Twitter: Add share/tweet button on your content pages

Visit the Twitter Buttons page to generate your own.

To customise it a bit, you'll have to get your hands a little dirty.

Taking this for example:

<a href="" class="twitter-share-button" data-url="" data-text="I found this stupid post" data-via="myawesomeshirt" data-hashtags="shirts">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="//";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

The first line is where your options go. A simple <a> tag which the Twitter API detects and replaces with a button.

If you don't declare a certain variable, it will simply revert to the default.

  • data-url is the URL you wish to share. By default it will share the current page URL.
  • data-text is the text which will be tweeted along with the link. By default, this is the page title.
  • data-via is who you retweeted from I suppose? I set this to the site's twitter account. Default is empty.
  • data-hashtags are the hashtags you want to append to the end of the tweet.

The second line asynchronously loads the Twitter API script. This is important because it won't halt the rest of your page from loading.

See my other posts about sharing buttons for Facebook and GooglePlus.

Copyright © Twig's Tech Tips
Theme by BloggerThemes & TopWPThemes Sponsored by iBlogtoBlog