Twitter is very popular now a days and it’s popularity increasing day by day. In this article our objective is to add Twitter tweet button to Blogger posts and pages. Generally when you add Twitter tweet button to Blogger site or blog and have more than one post on home page then Twitter tweet button share your home page rather than sharing individual post. If you want to share the individual post from your home page and want to see actual post sharing count on the home page then you should have to do certain changes to original Twitter tweet button code that you obtain from twitter resources.

tweet button blogger

You can get default Twitter tweet button code from twitter resources by following link:
https://twitter.com/about/resources/buttons#tweet

tweet-button

Original Twitter tweet button code at twitter resources:

<a href="https://twitter.com/share" class="twitter-share-button" data-via="techprevue">Tweet</a>

Modified Twitter tweet button code for horizontal button:

<a class='twitter-share-button' data-via='userid' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share' rel='canonical'>Tweet</a>

Modified Twitter tweet button code for vertical button:

<a class='twitter-share-button' data-via='userid' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share' rel='canonical'>Tweet</a>

› Highlighted code in orange color above, is an extra part added to default code to get complete our objective.
› Must change userid highlighted in green with your twitter username or userid.

Inserting Twitter tweet button to Blogger template

  1. Go to Blogger Dashboard › Select blog › Switch to Template tab › Edit HTML › Check Expand widget template
  2. Now search template for <data:post.body/>
  3. If you want to place Twitter tweet button code above post then insert code above <data:post.body/> or if you want to place Twitter tweet button code below post then insert code below <data:post.body/>
  4. Paste the following script just above </body> tag in your template
    <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>
  5. Save the template changes › Done

Conclusion:

After completing all steps explained above you can find that Twitter tweet button works perfectly for each post on your home page and show count per post.

› Other important
Learn how to edit Blogger template