Add Twitter tweet button to Blogger posts

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.

official Twitter tweet button

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 account recommend suggest

         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:

  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:
     <data:post.body/>
  5. Paste the button code immediately below (after) that line:
    <!-- Twitter tweet button Start -->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <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
                   Twitter tweet with counter data-count vertical
              tweet counter on side horizontal
                  tweet stand alone 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 .
    • Position it on the right
      Change the text-align in line 3 from left to right.
    • 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 == &quot;item&quot;'>
      and remove expr:data-text='data:post.title' in line 4.
  8. Preview, you should see the button appear in each post.
  9. 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.

Enjoy!

59 comments to "Add Twitter tweet button to Blogger posts"

Belly Charms November 30, 2010 at 5:46 AM    

AWESOME. Thanks for the info and I will be adding this as soon as Cyber Monday is over. Thank you!

Greenlava November 30, 2010 at 3:47 PM    

@Belly Charms
Great.You're welcome.

Greenlava November 30, 2010 at 5:29 PM    

@Venu
Place the code right before this line in your template:
[h3 class='post-title entry-title']

and you want to replace code line 3 with this one:
[div style='float:right;padding:5px 0px 5px 5px;width:60px;']

Antoine December 3, 2010 at 8:14 PM    

Hi Greenla,

Thx your for the tips,

I can not properly align the three icons facebook, twitter, google buzz (see my post at the following address: http://www.tweakyourdevice.com/2010/12/nouveau-message-test.html )

Here is the code I put for now:
div style='float:right;'


Thx you in advance

JKCounterpuncher December 4, 2010 at 8:56 PM    

As I've changed my Retweet button to Tweet button (though they're the same), this site give simple and detailed instruction. Thanks for this post, very useful. I've bookmarked it for future references. Great site indeed.

Greenlava December 5, 2010 at 1:07 AM    

@Antoine
You want to put each button inside a div tag and vertical align each button using margins:
[div style='float:right;margin:Tpx Rpx Bpx Lpx;']
BUTTON CODE
[/DIV]

T --> value of top margin
R --> value of right margin
B --> value of bottom margin
L --> value of left margin

Susan Scheid (Raining Acorns) December 14, 2010 at 12:29 PM    

This is very helpful and clear. The one remaining issue for me is that, for all posts except the current one, I use the page break/read more feature. I would rather the tweet button appeared after the "read more" hyperlink, but am not sure where to place it in the HTML code. Can you advise?

Greenlava December 15, 2010 at 1:26 AM    

@Raining Acorns
A few lines below [data:post.body/], you should see this code:

[b:if cond='data:post.hasJumpLink'.
[div class='jump-link']
[a expr:href='data:post.url + "#more"' expr:title='data:post.title'][data:post.jumpText/][/a]
[/div]
[/b:if]

you want to paste the Tweet button code right below it.

Susan Scheid (Raining Acorns) December 16, 2010 at 6:12 AM    

Thank you! This went exactly where I'd hoped.

Anonymous,  December 17, 2010 at 2:58 PM    

I wish to include the body of my post in the tweet and not the title. I changed the data:post.title tag in the given code to data:post.body but that just gave me the div and span tags with the post text. Is there any way around that?

Thanks!

Greenlava December 17, 2010 at 4:50 PM    

@Siddhartha Ghai
None that I could think of, sorry :(

Layla Abdo January 7, 2011 at 8:42 AM    

Hi Greenlava

your post is useful,
my question is how I can replace facebook share button near Twitter button on the right side on the same line, (I tried to put both of them in the right side but one of them shows at the next line)

thanks

Greenlava January 7, 2011 at 6:48 PM    

@Layla Abdo
Replace text-align:left; code line 3 with float:left;

akubiomed January 12, 2011 at 10:52 AM    

I'm using TweetMeme plugin for WordPress. My tweet was not counting after pressing tweet button. What is the problem likely occurs

Greenlava January 12, 2011 at 12:12 PM    

@akubiomed
WordPress eh? Hmm...I've retweeted on of your posts, but somehow the URL didn't register.
Why don't you try adding the button without using a plugin?

Lia January 21, 2011 at 11:46 PM    

Can you help me figure out how to put a space between the Facebook and Twitter share button and my blog posts? Right now, they're way too close together and I've been trying for a while to put a space between them but nothing works! Thanks so much. You can see here: http://thislittlepiglet.blogspot.com/

Lia January 21, 2011 at 11:58 PM    

I just put a break in the post html, and that worked, but am wondering if there is something I can put in the template code that will automatically insert the break every time...

Whimsical Wendy February 17, 2011 at 2:38 AM    

This post has helped me so much. I don't 'speak' html, but with clear instructions like this, I got the code to do what I want on my blog in very little time at all. Thanks again! =)

Anonymous,  March 5, 2011 at 10:34 PM    

Thank you so much for this. I've been searching far and wide for a clear instructional post on this and couldn't find any. Thank you for including this.

apaajanews March 9, 2011 at 12:49 PM    

details info about tweet button, im looking for tweetmeme button this info helps a lot..tq

Greenlava March 9, 2011 at 1:48 PM    

@Tami Marie
@apaajanews
You're welcome.
There are a lot more tutorials waiting to
be discovered :) Browse the archive or use the seach box to find them.

Anonymous,  March 10, 2011 at 4:55 AM    

Tweet count isn't working? I'll tweet and immediately afterward number will go back to zero. Please help.

Marie Claire Cremona March 11, 2011 at 4:48 AM    

neither is my tweet count working :( same as previous comment

Greenlava March 11, 2011 at 9:46 AM    

@Anonymous
@Marie Claire be
Seems to be a glitch or delay in Twitter cache update.
I've tried tweeting Twitter developers page using their own on-page button...same result.

Joanna Revers March 28, 2011 at 4:17 AM    

Thank you! That was very helpful! www.findingshibusa.com

Anonymous,  May 18, 2011 at 8:56 PM    

This was very helpful. Thanks. But there seems to be a problem with post titles that use apostrophes.

http://www.redbullandpoker.com/2011/05/when-matt-ridley-and-joe-rogans-ideas.html

It cuts the title off at the apostrophe and inserts a slash.

t.a.c.a May 23, 2011 at 5:15 PM    

hye.. i googled up " how to add tweet this button on ur blog" and found this page and i also read ur tutorial on putting "share" button as well.. i'm not really good in HTML codes... i want to know how to put both button align but i dunno the value of the margin.. can u help me somehow?

LeClerc May 27, 2011 at 10:13 PM    

Greenlava: I'd be interested in hearing your thoughts about apostrophe's in titles not working with the tweet button (as anonymous posted above).

Greenlava May 28, 2011 at 2:55 PM    

@LeClerc
Post updated. I've added something on the matter.

Andrew June 6, 2011 at 10:22 PM    

Hi Greenlava,

I would like to place three buttons (Facebook, Twitter, +1) all next to each other at the top of my Blogger posts. The first one inserts fine, but then the second sits way over to the right (changing text-align or float to 'left' doesn't move it? :s And the third one just goes on the next line down.

Can you help please? :)

Thanks,

Andrew

Greenlava June 8, 2011 at 10:17 AM    

@Andrew
What's your blog URL?

Andrew June 9, 2011 at 3:58 AM    

@Greenlava, my blog is http://www.3dsfocus.com

I currently have Twitter and Facebook buttons at the top of each post, but I would like to add more. Thank you for your help :)

Greenlava June 11, 2011 at 1:26 AM    

@@Andrew
You have to reduce the width of the Like button's iframe. Right now you set it to 450px. You can safely reduce it to 90px (since you've chosen button_count layout).

Andrew June 15, 2011 at 1:20 AM    

@Greenlava

Thank you for your reply. I have reduced the width of the Twitter iframe and added the code for the Google +1 button, but it does not sit in line with the others correctly. Can you take a look and see if you can help, please? :)

Thanks,

Andrew.

Greenlava June 15, 2011 at 5:43 PM    

@Andrew
Which blog?

Andrew June 15, 2011 at 6:17 PM    

@Greenlava Sorry, it's www.3dsfocus.com again :)

Greenlava June 16, 2011 at 4:44 PM    

@Andrew
Try changing the padding from 10px to 5px.

Anonymous,  June 29, 2011 at 6:15 AM    

I spent HOURS googling how to get social media share buttons on individual blog posts and couldn't get it to work. Finally I found your blog post. Thank you! You may have saved my sanity.

KWC June 30, 2011 at 9:21 AM    

yup..
this tutorial really works. thank you!

Donna Marie July 19, 2011 at 5:48 PM    

Thanks for sharing your tips!

Health Online August 5, 2011 at 6:56 PM    

Thanks for sharing it

DJ St1cK E November 15, 2011 at 9:03 AM    

I'm trying to get my facebook and twitter to be next to each other and i've tried and tried.. what do i need to change? THANKS!

www.hookedonhouse.com

Greenlava November 15, 2011 at 12:16 PM    

@DJ St1cK E
Add style="float:left" to the Like button div tag.

DJ St1cK E November 15, 2011 at 12:56 PM    

i do have to say though.. i've written the html to automatically center the photos in my posts, and now it looks like the float left solution pushes the pictures over? any fix for this? Thanks a ton

Greenlava November 15, 2011 at 6:12 PM    

@DJ St1cK E
You can fix that by adding a line break right after the div that's holding the Tweet and StumbleUpon button, like this:
[div]
TWEET AND SU BUTTON CODES
[/div]
[br/]

Honeybee November 30, 2011 at 1:03 PM    

I have come back just to say hi :) I edit my blog, and hv to reinstall my tweet button, here i come looking for reference. tq, keep up the good work.

-Honeybee
http://www.healthybeautifulblog.blogspot.com

Robert Campbell January 4, 2012 at 11:55 AM    

data:post.body does not exist in my html

Greenlava January 4, 2012 at 4:02 PM    

@Bob Campbell
Have you checked the Expand Widget Templates checkbox?

Condra January 8, 2012 at 6:12 AM    

Heya, Very very helpful thank you so much!!

just one question: I managed to edit and put the FB like and twitter ones on the same line, but the twitter one is a bit off? like it sits too low, and also would like to make it be further to the right.

Can you help me w/ that? to see what I mean:
http://7randomthoughtsbeforebreakfast.blogspot.com/

Greenlava January 8, 2012 at 9:11 PM    

@Condra
Wrap your Like button code in a div tag, like so:
[div style="padding: 5px 15px 0px 0px; float: left;"]
[PUT YOUR EXISTING FACEBOOK IFRAME CODE HERE
[/div]

Condra January 8, 2012 at 9:22 PM    

Thank you so much!! much appreciated it works like a charm :)))

Jacquelyn January 22, 2012 at 12:24 PM    

I can't get my buttons to go on the same line, and I tried what was mentioned above (at least I think I did it right). Can someone explain how to fix this?
Here is a link: http://lifeinfullswingblog.blogspot.com/

Greenlava January 26, 2012 at 7:45 PM    

@Jacquelyn
Refer to this post: Aligning Google +1, Tweet and Like buttons horizontally

Shabana Feroze May 29, 2012 at 5:02 AM    

This was SO helpful! I followed it step by step and added the Tweet button! Thank you so very much!!
www.thesilverkickdiaries.com

RDX July 10, 2012 at 12:38 AM    

thanx alot such a valuable info !!

Unknown August 2, 2012 at 8:59 AM    

THANK YOU THANK YOU, I had tried adding a button before and it worked, but it recently started receiving cross-script errors. THIS CODE WORKS!

Lily November 11, 2012 at 3:31 PM    

THANK YOU!!!! it worked on my blog :) awesome tutorial..

Anonymous,  November 29, 2014 at 1:43 AM    

@Greenlava. Great post - very useful - thanks! Many of the comments and responses have also helped me too. I was just wondering, is there any way of making the twitter button only appear in the expanded blog post (once they've clicked 'read more') and not below the previews?

Greenlava November 29, 2014 at 5:05 PM    

@Sam O'Flaherty
Use "item" conditional tag: Targeting specific pages/URLs with conditional tags

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.