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, similar to the TweetMeme retweet button. However, it comes with a few additional features worth considering.
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. These accounts could include your own, or that of a contributor or a partner. It’s a great way to promote your accounts and increase followers.
Twitter recommending to follow the selected user
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, label or archive page.
Now let’s install the button:
- Go to Dashboard > Design > Edit HTML.
- Back up your template.
- Tick the Expand Widget Templates check box on top right of the HTML window.
- Find the following line of code in your HTML, this is the code for your post content:
- Paste the button code immediately below (after) that line:
- 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
Follow recommendation 1
data-via Your Twitter username
Follow recommendation 2
data-related Second Twitter username
- 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 .
- Position it on the right
text-alignin line 3 from
- To display the button in static pages as well, remove the conditional tag –in code line 2 and 7.
- To display the button only on post pages, replace conditional tag in line 2 with this:
<b:if cond='data:blog.pageType == "item"'>
expr:data-text='data:post.title'in line 4.
- Position it on top of post
- Preview, you should see the button appear in each post.
- Click Save if you like what you see.
Problem with apostrophes in post titles
As pointed out in the comments, there is a problem with post titles that use apostrophes –only the text before the apostrophe shows up, followed by a backslash.
From my observation, the problem is due to the inclusion of the
expr:data-text='data:post.title' attribute. Removing this attribute should eliminate the problem.
However before you hit that Delete button, consider this: without the data-text attribute, you will encounter another problem –when you click the button on a multi-post page, it won’t post the post title. It uses the blog title instead, bummer.