Add Twitter Tweet Button for Blogger Posts

Sharing your content over Social media is better way to publicize you blog. Twitter is popular social network and micro blogging site where most users publish their updates. Once users interested in your content, they can copy and paste your post URL to share your post with their
followers and friends. However it may take some time and user may forget to share your URL too. But rather than copying pasting page URLs, what if you can let your readers to share your content among their followers and friends while they reading your content?

Twitter officially offers tweet button for websites. However it is not specifically customized for Blogger blog posts. At the official Twitter widget page, if you have specified an URL with Tweet button, then its only valid for that specific URL. So would you gonna specify Tweet button for each and every page? It will be time consuming. However if you didn't specify a specific URL for Tweet button, then the button will share the URL of the page where button is on. But to avoid sharing invalid links, you can specifically configure your Tweet button for Blogger posts.

Think of a scenario where you have integrated Tweet button for your posts and wanted to display Tweet button with your posts on homepage. Generally homepage will display several posts or post snippets. So whenever a user clicks on your Tweet button corresponding to the post, while on the homepage, the button will share the homepage URL not the post URL. Because it will share the URL where the button is displayed. So when implementing Twitter button, its better to use dynamic URL where the button will use only the post URL not the URL of the page where button is on. Let's figure out how to configure and add Tweet button to share only the post URL.

Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Template tab on left pane.


4. Click on Edit HTML button.

5. Click Proceed button to view Template Editor.

6. Tick on, Expand Widget Templates.

7. Now add following line of code just before </head> or </body> tag.

<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>

8. Search for <data:post.body/> in your template and add following code snippet just after that.