Twitter is very popular now a days and it's popularity increasing day by day. In this article our objective is to add tweet button to Blogger posts and pages. Generally when you add tweet button to Blogger site or blog and have more than one post on home page then 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 tweet button code that you obtain from twitter resources.You can get default tweet button code from twitter resources by following link:
https://twitter.com/about/resources/buttons#tweet
Original tweet button code at twitter resources:
<a href="https://twitter.com/share" class="twitter-share-button" data-via="techprevue">Tweet</a>Modified 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 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 tweet button to Blogger template
- Go to Blogger Dashboard › Select blog › Switch to Template tab › Edit HTML › Check Expand widget template
- Now search template for <data:post.body/>
- If you want to place tweet button code above post then insert code above <data:post.body/> or if you want to place tweet button code below post then insert code below <data:post.body/>
- 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> - Save the template changes › Done
Conclusion:
After completing all steps explained above you can find that tweet button works perfectly for each post on your home page and show count per post.› Other important
› Learn how to edit Blogger template
Post a Comment