June 10, 2011

Widgets

Add +1 button and Other Share Buttons Below Post Titles


social-share-widgetThe area just below your post titles have more impressions i.e. that area is more viewed by your visitors and if you add social share or bookmarking buttons such as the new Google +1 button, Facebook Like + Send button, tweet button and my favorite addthis button, then there are more chances of getting more likes, digs, stumbles and +1'd. So lets add this beautiful widget to your blogger blogs. You can see them live just below the post titles of this blog.

Adding the Social Share Widget To Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for <data:post.body/>
  4. and just above it paste the code given below,

<b:if cond='data:blog.pageType == "item"'>

<table border='0'>
<tr>
<td><div style='margin-right:5px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>
<td><div style='padding-top:6px;'>
<script type='text/javascript'>
tweetmeme_style = &quot;compact&quot;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div></td>

<td><div style='margin-right:25px;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div>
</td>
<td><div style='margin-right:25px;'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='40px'/>
</div>
</td>
<td>

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->

</td>


</tr>
</table> </b:if><br/>

    5.   Next search for </head>

    6.  and just above it paste the following code,

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

    7.  Save your template and you are done!




If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

59 comments:

samsexy98 on Jun 10, 2011, 9:32:00 PM said... #

Buddy the div tags are not closed properly. When I closed it I am even getting that td tags are not closed properly which I couldn't find. Please correct it..

Mohammad Mustafa Ahmedzai on Jun 10, 2011, 9:38:00 PM said... #

@bhavesh

Oh sorry for the inconvenience brother. I just updated the code. How is you illness now?

ahmed safwan on Jun 11, 2011, 1:14:00 AM said... #

mohammed change this to

ahmed safwan on Jun 11, 2011, 1:16:00 AM said... #

close the data post code

samsexy98 on Jun 11, 2011, 9:24:00 AM said... #

Finally added.. Needed to adjust the buttons to fit properly in my layout..

Thanks Bro.. I thought your forgot after you didn't reply to my mail :)
And I am fine now... :)

Mohammad Mustafa Ahmedzai on Jun 11, 2011, 2:05:00 PM said... #

@Ahmed

Oh thanks, yeh I made that stupid mistake everywhere. I updated all codes. :>

@Sam
I am really happy to hear that pal. Forgive me for no replies to mails. You know everything bhavesh. And you will always remain a special friend buddy. :))

samsexy98 on Jun 11, 2011, 2:08:00 PM said... #

@Mohammad Mustafa Ahmedzai

Oh yea I can understand your problems bro :)

samsexy98 on Jun 12, 2011, 4:30:00 PM said... #

Buddy I just can't figure out the problem. Look at my share button. It is fully orange. Even the count "0" is orange color instead it should have been is white. I don't understand what's the problem??

samsexy98 on Jun 12, 2011, 4:30:00 PM said... #

Also see that when hover the button, all becomes white.

Mohammad Mustafa Ahmedzai on Jun 12, 2011, 6:18:00 PM said... #

@Sam
Ok do onething bhavesh

Go to addthis.com and get a fresh code for the counter. and add it instead of the addthis code I have provided. This will make things perfect. Let me know.

samsexy98 on Jun 12, 2011, 6:23:00 PM said... #

I have already done that. Even the send button have problem. When u click send a window comes with "Send" and Cancel" buttons. That window goes under my sidebar instead of staying above, so I placed it after the +1. So problem is actually shifted and not solved. But what to do with this share button... :(

Mohammad Mustafa Ahmedzai on Jun 12, 2011, 7:08:00 PM said... #

@Sam

I visted your blog again and all your buttons are working just perfect. I am not sure if you are using mozilla. further you addthis button has been customized and I guess you have implemented the following tutorial on it ->

http://www.mybloggertricks.com/2011/06/how-to-put-your-blog-name-in-menu.html
Please read the above tutorial again and removing hover effects you may have added just use the code provided in the tutorial only.

samsexy98 on Jun 12, 2011, 7:42:00 PM said... #

Ok see. I have added the same code (with my customization) in minima strech and all is well. So its a problem in the template and not in the code. And the customization of margins is needed to fit in the template.

See this image (What I see on my blog) -> http://lulzimg.com/i22/88cb2b.png

Now while hovering, hover on "Share" instead of on count "0". You will see that "Share" also goes white.

Whereas on this demo site with same custom code, all is well -> http://wallpaperstreasure.blogspot.com/2010/12/art-of-computer-virus-research-and.html

Mohammad Mustafa Ahmedzai on Jun 12, 2011, 11:56:00 PM said... #

@sam

Oh I see pal. Did you ever add the addthis button code elsewhere in your template which you forgot to remove before adding this? I personally think this can not be due to template coding. the code is saved on addthis servers and it doesn't conflict with other scripts.

samsexy98 on Jun 13, 2011, 8:14:00 AM said... #

No buddy, I checked, there is no other code of addthis in my template :(

Mohammad Mustafa Ahmedzai on Jun 13, 2011, 3:39:00 PM said... #

@Sam

Send me your template but its your duty to remind me daily if I have solved the problem. you know I forget things unwillingly :p

samsexy98 on Jun 13, 2011, 5:23:00 PM said... #

Ok i will send u the template when i come back on my pc as i m on my smart phone right now.. Btw i dnt remind u again n again bcoz i feel like i m forcing u to do my work.. But as u have said now i will remind u wenever i get this problem in mind bcoz i m also like u who forget things.. Lol.. :-P

IMM on Jun 24, 2011, 2:37:00 PM said... #

I can`t find this code in my templates:

Is that code in all templates?

samsexy98 on Jun 28, 2011, 10:09:00 AM said... #

I think we need a code update for addthis.. I see a different large chunk of code on the official site..

TJ @ MeasuringFlower.com on Jul 12, 2011, 8:20:00 AM said... #

How do you change the Like + Send button to just the Like counter button? Thanks!

Jefferson J. Jackson on Jul 21, 2011, 8:32:00 PM said... #

Hey I don't know if i did something wrong but when i did all the steps at the bottom of the post there is 1 like button and 1 send button from facebook. Everything is fine with the ones below the post title. I think they are there because i previously tried to add share buttons and failed. But they appeared and i don't want them there. I was just wondering how i could remove the buttons?would appreciate any suggestions.

Kusumadikaa on Jul 29, 2011, 8:40:00 PM said... #

thank for this blog,,

AKHIL HASSAN on Aug 24, 2011, 2:26:00 AM said... #

salam muhammed sayib
above tricks is not working my blog what can i do i hope u will help me.

abdulrafay on Aug 26, 2011, 9:10:00 AM said... #

hello muhammad
i have in 3 different places pls guide me where should i put the code
thanks.
oneworldblogging.blogspot.com

Danielle @ "We Have It All" on Sep 2, 2011, 1:40:00 AM said... #

I could not find "" - is there anything else I could look for?

we_haveitall (at yahoo dot com)

TheMex on Sep 7, 2011, 7:30:00 AM said... #

my didn't work either with the postbody code i have to put either on this of two codes


to put on the top of the post

<div class='post-body entry-content'>


this one tu put on the bottom of the post

<div class='post-footer'>

i hope it help bye

Sunithi Selvaraj, RD on Sep 9, 2011, 7:12:00 AM said... #

Hi, few things.

Changed the look of my blog and some things changed

Now the share buttons appear on every page. How can I get it off the rest and only on the post page which happens to be my home page. I would also like it on my recipe, nutrilinks and blog directory page. Can I customise it only for the pages I want? If not if i can have it only the post page that will be fine.

Also the share button which shares to "everything" is counting the total share since I installed which is 4 posts back.. so showing a higher number. How can it get it to show share number for that post only.The twitter, fb etc are working fine except that the twitter button on my home page is not working.
If you can Please check out my blog and take a look I would appreciate it.

Fachrul Afgan on Sep 13, 2011, 8:59:00 AM said... #

Asalamualaikum Brother, I had add this button in my page but i want it in center. can u help me?? my page d-t3xfa.blogspot.com

Harold Shaw Jr. on Oct 7, 2011, 5:07:00 PM said... #

Hi I am using the Mimoza Theme and there doesn't seem to be a , I am doing a major overhaul of my site as part of my return to Blogger and would like to use this as part of this overhaul. If you could give me a hint of where I can put the code for this theme.

If you have a theme that is close to the same color scheme, you seem to do a great job on your themes but I like a little darker color combination - I would prefer to use yours

Thanks

Harold

MaUzZz[BR] on Oct 16, 2011, 7:19:00 AM said... #

Hello thanks man, visit my blog Brothers !

r00tbrazil.blogspot.com

turnatricks on Oct 26, 2011, 12:17:00 PM said... #

I could not find this code pls help me bro........

Windows to Internet on Nov 4, 2011, 9:26:00 PM said... #

Thank you nice post. I have utilized it in my blog ... Awesome blog..

Windows to Internet on Nov 4, 2011, 9:29:00 PM said... #

Dear how you have made the social buttons widget static when we scroll up and down the page... ? I am talking about the widget just right on your blog.

Mohammad Mustafa Ahmedzai on Nov 5, 2011, 12:40:00 AM said... #

@windows to internet

Read this tutorial pal Floating Share widget

Anmol Rawat on Nov 11, 2011, 11:34:00 PM said... #

they are visible only if anyone opens the post.. what if i want them to be visible in homepage as well?

Adil on Nov 24, 2011, 3:00:00 PM said... #

Thank you so much brother!

MR.38 on Dec 11, 2011, 11:48:00 AM said... #

not working man :(

Reynaldo Stephens on Dec 12, 2011, 12:59:00 PM said... #

Is the Facebook "Like Button" still available for this? I added this to my site but the Facebook "Like Button" is only thing that does not appear

Nik on Dec 14, 2011, 3:55:00 PM said... #

Thanks for this post..........
but i have a little problem...
please help me out...
i cant find the code "" in my template...
where should i post your code...??
i m using Isabela template...
please help me...my blog is..
dailymediafire.blogspot.com

keval kothari on Dec 23, 2011, 8:34:00 PM said... #

Thanks for nice plugin...I have implemented in my blog Gtu Guru

♛ ☾ Mr. Nashrin ☽ ♛ on Jan 8, 2012, 8:15:00 PM said... #
This comment has been removed by the author.
Abhi Kurve on Jan 17, 2012, 9:59:00 PM said... #
This comment has been removed by the author.
順叔 on Feb 4, 2012, 8:56:00 AM said... #

Thanks for the nice plugin. I put it at the bottom of my post. It worked for the first day but the Facebook Like and Send button just disappears mysteriously after that. Any idea why?

Joseph Ezie Efoghor on Feb 8, 2012, 12:58:00 PM said... #

What if you already have other buttons and you want to add only Google+ button? What do you add?

Ghadeer on Mar 20, 2012, 9:47:00 PM said... #

I dont have the code in my blog !!

Test Blog on Apr 5, 2012, 1:57:00 AM said... #

Thanks for this tutorial. Is there a way to have the icons show on the "homepage" on Blogger? Right now they only show if you click on the post URL. See sample: http://valeriebetzphotography.blogspot.com/

Thanks!

Abhishek sony on Apr 23, 2012, 12:31:00 PM said... #

Love this widget Thanks bro Working fine on my Both Blogs

http://lolsplanet.blogspot.com/

http://nannu4u.blogspot.com/

god bless you keep posting :)

bollywood-gossips.net on Apr 26, 2012, 11:14:00 AM said... #

thank for this blog

BitHacker on Apr 29, 2012, 4:07:00 PM said... #

http://tweetmeme.com/about/fail_redirect The retweet button won't show anything and redirects me to that URL. Any kinda help would be appreciated

adostr on Jun 7, 2012, 6:03:00 AM said... #

nice blog ur doing wonderful job there have loot of collectin of trickccc

Sanjeev Baldia on Jun 15, 2012, 3:50:00 PM said... #

@Mohammad Mustafa Ahmedzai...Bro I Have Followed The Procedure But Nothing Is Displaying Below The Post Titles :(
Help Me Out...I'm New To Blogger...
Thanks in Advance

aynora nur on Sep 30, 2012, 8:03:00 PM said... #

thank you mohammad, your tutorial just perfect with my template. tqvm

ADMIN on Oct 19, 2012, 8:15:00 AM said... #

please tell me how to change the size of the buttons??
i have installed it but looks quite smaller!! is it possible to change the!!
dealzfire

Stefano Bruno on Nov 6, 2012, 6:49:00 PM said... #

Hi, the bottom of twitter not work, fix please

samehadaku.net on Nov 14, 2012, 6:16:00 PM said... #

what if i want to add facebook share ?

atif gujjar on Jan 14, 2013, 1:57:00 AM said... #

OH ITS NICE AND NOW MY BLOG HAS COMPLETED WITH EVERY WIDGET AND TEMPLATE
SEE HERE
ATIF3.BLOGSPOT.COM

atif gujjar on Jan 14, 2013, 2:10:00 AM said... #

friend today i m sharing a great and true free earning website here,which will
give u $3 just on sign up and u have to share these website and reffernce of others
people.u u can get $1 per reffernce also money just on visiting website.so dont waste
time and start it today. this is free website and for every one.click on bellow site and register

http://tinyurl.com/earandearn

for more tricks, earning website, and mega secret website then just follow me on twitter @the_killar
i will not disappoint u

Robi Marapao on Mar 27, 2013, 5:56:00 PM said... #

Thanks for this tutorial. It works perfectly fine on my blog here: http://iheart-emo.blogspot.com/2013/01/the-bachelors-search.html
More power to your site. :)

onlinemoneymakingtrickz on Apr 9, 2013, 3:24:00 PM said... #

thank You For This But I am Not Able To find can u Please help me

Click Here To add Comment

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.

Regards,
Mohammad

Support Us

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:-

or try a Beautiful Banner


Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |