Text Wrapped Twitter And Facebook Buttons At Top Of Posts

Posted : Wednesday, March 23, 2011 | Post Author : Paul Crowe | 15 comments

Today as i was replying to the Emails from my contact form i got a bit of a surprise.One Email asked “I like to add Facebook share and tweet buttons to my blog post same like your blog (share and tweet buttons at the beginning of the post text). thanks:)”.So i went to my list of posts page for Spice Up Your Blog to get the link to the tutorial for this to send back.Then i realised i have never actually covered it in a post.

I have showed how to have a Twitter counter at the top of your posts and even a Ttwitter and Facebook button in a fixed floating position, but not how to have the Twitter and Facebook Counter Buttons at the start of posts wrapped in text.It’s actually quiet an easy tutorial..

So lets do it !

The Twitter button i will be using is the Most recent updated Twitter Button that includes a link to your Twitter Profile.You will see if you use the Twitter button on any of the posts in this blog the link you post on Twitter includes a link to my Twitter Profile and once you share the link you are given the option to follow me (If Your Not Already).So the button not only gets people sharing your posts but also gets you more followers.The facebook button is the standard counter button not the Like Button.

I am using these buttons at the time of writing the post but as you know I’m always changing so for future reference i have a live demo below.

Live Demo – Twitter And Facebook Button Demo

Add Twitter And Facebook Buttons To Blogger

Step 1. In Your Blogger Dashboard Click > Design > Edit Html > Tick The Expand Widget Templates Box.

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)


Step 3. Copy And Paste The Following Code Directly Before / Above <data:post.body/>

<div style=’float:left; margin-right:10px;’>
<a class=’twitter-share-button’ data-count=’vertical’ data-via=’PaulCrowePro’ href=’http://twitter.com/share’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/><br/>
<a href=’http://www.facebook.com/sharer.php’ name=’fb_share’ type=’box_count’>Share</a><script src=’http://static.ak.fbcdn.net/connect.php/js/FB.Share’ type=’text/javascript’/><br/><a href=’http://www.spiceupyourblog.com’><img alt=’Best Blogger Tips’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png’/></a>

Important – Replace My Twitter Username In Red PaulCrowePro With Yours, If you don’t have one Leave It Blank.

Step 4 Save Your Template.

The buttons will now be at the start of all your posts for readers to share your content, we have lots more Social Bookmarking Gadgets for you to check out.

Drop Your Comments, Views And Questions Below.


  1. Michael DucylowyczMarch 23, 2011 at 6:05 PM

    Is there a way to make images and text wrap around this?


  2. Thanks in works here in my blog:
    Cool Stuff and The Reveal of Knowledge


  3. @ Michael Ducyl.. – In what way could an image wrap around the buttons ?


  4. hi paul please reply i can see 4 ?? what to do ??


  5. 4 is save your template, you cant see the save button ?



  7. I’m just searching for some resourceful article to collect information about this topics.
    And after reading your post it has become a little easier to me , thanks


  8. Thanks for the tutorial, Paul!

    I pasted this code above but the counter before each post shows the cumulative number of tweets/fb shares for all posts instead of the number of tweets/shares for a particular post. Am I missing something?


  9. Cool another alternative to Add This


  10. butcher block oilMarch 31, 2011 at 8:18 PM

    thanks for sharing this tips..this is really cool tricks..i like it..keep posting this kind of information..it’s really fun learning this kind of stuff..


  11. even though this shows up on each individual post on the main page, it DOES NOT link directly to that post unless that person has clicked through to that exact post. people aren’t going to want to have to click through to the individual post just to share it on Twitter.


  12. @ Lesa – I have noticed this with the script based counter buttons, they don’t pick up the post URL.I am looking into it and i will update the post if i find a solution, i will also add another comment to let you know.


  13. Anirudh ~ Except Nothing |May 12, 2011 at 7:13 AM

    Cool !!! Works Well !!! Thanx


  14. Friend it appears at top of post. It does not give good look in my blog. I like to add end of the post at Right Side.

    Help Me!



  15. Shipsocker Genie LandFebruary 2, 2012 at 1:46 PM

    it sure works but when i add it to the blog the facebook like button does not show up 🙁


  16. How do you get the links beside each other? I’m trying to the Pinterest, Twitter, and Facebook buttons on, but they are sitting on top of each other and running into one another,