Add Twitter Counter And Share This Buttons To The Top Of Blog Posts




| 6 comments

The 'Tweet This' or 'ReTweet' Twitter counter button is the latest 'Must Have' feature on all Blogs.Only a year ago it was the 'Digg This' button that was displayed but they have almost all been replaced.Adding the Twitter Tweet This button to your blog is easy and in this post we will look at how to add it to the top of your blogger posts and the bottom of your blogger posts.

The button can be set to float on the left or right of your posts this allows it to be 'wrapped in text' and fit in nicely as you currently see on this blog.I have the button at the top and bottom of the posts just to make it easy for the readers.

You will notice i also have the 'Share This' button Placed above the Twitter button and i will show you how to add both the Twitter and Share This buttons or just the Twitter button.

The Share This Button opens up a selection of bookmarking options when you place your cursor over it.You can test both buttons above.

Here Is A Preview Of The Buttons :



twitter and share button for blogger


Here's the steps to add the buttons

1. Get To Your Blogs Html

Click 'Layout' ► 'Edit Html' ► Tick The 'Expand Widget Templates' Box


Blogger layout

edit html blogger

Expand widget templates blogger



2. Find The Area For The Button

In your blogs Html find the following code:
(Click 'Ctrl and F' for a search bar to help find the code - For more help on this click 'Extra Help' link at the top of the post)
<data:post.body/>


3. Select Your Button

Pick The Button You Want Added from the options Below then copy the code.

Twitter Only Button Code :
<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><div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>


Twitter and Share This Code :
<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><div style='float:left; margin-right:10px;'>
<script src='http://w.sharethis.com/button/sharethis.js#publisher=bea50586-2b9f-448d-947a-01385f28e305&amp;type=website&amp;post_services=facebook%2Ctwitter%2Cdigg%2Cdelicious%2Cstumbleupon%2Cemail%2Cgoogle_bmarks%2Cmyspace%2Creddit%2Ctechnorati%2Cybuzz%2Clinkedin%2Cwindows_live%2Csms%2Cbebo%2Cblogger%2Cyahoo_bmarks%2Cmixx%2Cfriendfeed%2Cpropeller%2Cwordpress%2Cnewsvine%2Cxanga%2Ctypepad' type='text/javascript'/>
<br/><br/>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>
4. Were To Place The Buttons

To place the button/buttons at the top of your posts paste the code Above : <data:post.body/>

To place the button/buttons at the bottom of your posts paste the code Below : <data:post.body/>

You can also Paste the code above and below And have the button/buttons at the top and bottom of your blogger posts.

Once you have the code added click save.

Move the Button/Buttons from the left to the right

The buttons above are set to be on the left of your posts but you can move them to the right.

In the code for your Button/Buttons change the first line of code like this :

From :

<div style='float:left; margin-right:10px;'>

To :

<div style='float:right; margin-left:10px;'>

Thats your Twitter and Share This buttons added !

You can use different buttons from Twitter like the compact Twitter button, you can find that button and other Twitter gadgets and widgets on the Twitter Goodies Page.

As always help is only a comment away, Have you added the buttons ?


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

6 comments:

  1. Hi Misha,

    You comment did not display properly.Use the 'Contact Me' form to let me know your problem.

    Paul.

    ReplyDelete
  2. Found it, sorry. Expand all widgets, very important.

    ReplyDelete
  3. Nice Post Buddy.. I was using Digg Button only but now will have other social media buttons on my blog also.

    ReplyDelete
  4. Hi Keshav,

    Thanks for your comment, You can add the Twitter and Share This buttons above or below you Digg button so you dont have to loose that.

    Paul.

    ReplyDelete
  5. The tweet button went perfectly with the facebook like button you taught before......it looks really cool now.....well it will look more cool when it no longer show 0 tweet :p

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us