Skip to content

Latest commit

 

History

History
77 lines (59 loc) · 2.22 KB

twitter.md

File metadata and controls

77 lines (59 loc) · 2.22 KB
title contributors issues
Twitter
user name
reed
Nick Reed
repo number
rails/turbolinks
119

Twitter Buttons

twitter.com/about/resources/buttons

Official Implementation

<body>
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://mysite.com" data-size="large">Tweet</a>
  <script>
  !function(d,s,id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (!d.getElementById(id)){
      js = d.createElement(s);
      js.id = id;
      js.src = "//platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js,fjs);
    }
  }(document,"script","twitter-wjs");
  </script>
</body>

Solutions

If all of your tweet buttons explicitly set the url and text properties (either through query parameters or data attributes), you can use either solution. If not, and any or all of your tweet buttons rely on using the current url and document title, you must use the second solution.

The first solution is less work to implement, but the second might be faster since it only runs the widgets.js script once, on the initial page load.

Solution #2 is implemented on this site.

Solution #1

Replace the supplied javascript snippet with an external script tag pointing to platform.twitter.com/widgets.js.

<body>
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://mysite.com" data-size="large">Tweet</a>
  <script src="//platform.twitter.com/widgets.js"></script>
</body>

Solution #2

Remove the script from the body and load the following script inside the <head>.

twttr_events_bound = false

$ ->
  loadTwitterSDK ->
    bindTwitterEventHandlers() unless twttr_events_bound

bindTwitterEventHandlers = ->
  $(document).on 'page:load', renderTweetButtons
  twttr_events_bound = true

renderTweetButtons = ->
  $('.twitter-share-button').each ->
    button = $(this)
    button.attr('data-url', document.location.href) unless button.data('url')?
    button.attr('data-text', document.title) unless button.data('text')?
  twttr.widgets.load()

loadTwitterSDK = (callback) ->
  $.getScript("//platform.twitter.com/widgets.js", callback)