.gif)
This time we will show you how to add the official Twitter tweet button to each Blogger post. This button will let people share your posts without leaving your blog.
The one feature that I like most about Twitter tweet button is that you can choose to recommend up to two Twitter accounts for sharers to follow after they share content from your blog.
It will also automatically shorten the URL using Twitter’s t.co URL shortening service.
I have modified the button’s original code to make it detect the correct post URL and post title even when you click the button on a page that shows multiple posts i.e. home page.
Now let’s install the button:
1-Go to Dashboard > Design > Edit HTML.
2-Back up your template.
3-Tick the Expand Widget Templates check box on top right of the HTML window.
4-Find the following line of code in your HTML, this is the code for your post content:
2-Back up your template.
3-Tick the Expand Widget Templates check box on top right of the HTML window.
4-Find the following line of code in your HTML, this is the code for your post content:
<data:post.body/>
5-Paste the button code immediately below (after) that line:
<!-- Twitter tweet button Start --> <b:if cond='data:blog.pageType != "static_page"'> <div style='text-align:left;padding:5px 5px 5px 0;'> <a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='BloggerSentral' data-related='' href='http://twitter.com/share'>Tweet</a> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> </div> </b:if> <!-- Twitter tweet button End -->
6-Button configuration
Choose the type of button and follow recommendation by changing the value of the respective attributes in code line 4.
| Button type | Attribute | Value |
 | data-count | vertical |
 | horizontal | |
 | none | |
Follow recommendation 1 | data-via | Your Twitter username |
Follow recommendation 2 | data-related | Second Twitter username |
7-Button placement
The steps above positioned the button on bottom left of each post. To change the button position, do the following:
Position it on top of post
Instead of after <data:post.body/>, place the button code before .
8-Preview, you should see the button appear in each post.
9-Click Save if you like what you see.
9-Click Save if you like what you see.
