Facebook Social Bookmarking Widget

I hope most of you have downloaded the free Social Media Buttons which are designed just how Facebook Buttons are designed. In today's tutorial we will learn how you can add those buttons to your blogger blogs. The steps are similar to the earlier Social Bookmarking widget that we shared. click here for For Demo

Steps To Be Followed

Go To Blogger > Design > Edit HTML
Back up your template
Check the Expand Widget Templates box
Then click Ctrl + F and in the browser search box paste this,

data:post.body

5. Now Just above this code paste the code below,

<b:if cond='data:blog.pageType == "item"'>
<table border='0'>
<tr>
<td>

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='StumbleUpon Button Link'/></a>
</td>
<td>

<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='Twitter Button Link '/></a>
</td>
<td>

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' src='DIGG Button Link '/></a>
</td>
<td>

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' src='EMAIL Button Link'/>
</a>
</td>
<td>

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action= like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; margin-top:16px; height:40px;'/>
</td>
</tr>
</table></b:if>

6. Simply Replace the blue bolded text with button links I shared in last post on Facebook Buttons. Finally save your template and you are done! :>
You may also like to check these social bookmarking widgets

Pin it

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 »

Mohammad 5/20/2011 Social Media , Widgets

15 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

Amit M BMay 21, 2011, 8:52:00 AM
It would be better if you would have done the same widget with CSS and then added the border effect that appears on facebook like button.That would be more atractive . . .
Mohammad Mustafa AhmedzaiMay 21, 2011, 2:40:00 PM
@Amit
Oh yeh it surely would have. You still can do that by creating this class,

.Facebook-icons :hover{
border:1px solid #4150B8;
}

And then simply call them in the image tags using class="Facebook-icons"
Beben KobenMay 21, 2011, 11:24:00 PM
its elegant...thanks
diegotataMay 27, 2011, 12:03:00 AM
thanks information
Kristen HowertonJun 4, 2011, 9:35:00 AM
I really like these. Any chance you will make one for Google Buzz?
Mohammad Mustafa AhmedzaiJun 8, 2011, 4:26:00 AM
@kristen

I will publish a more update version of it soon InShAllah. Hopefully this week.
Diona VaughanJun 16, 2011, 2:47:00 AM
Hi,
So I removed my nav bar from my Simple blog template on blogger. I would like to add a facebook, twitter, and email icon widget in the top right hand space where the nav bar used to be. Can you suggest a code to use that I can insert in the advanced css space for this??

thanks
Mohammad Mustafa AhmedzaiJun 18, 2011, 3:23:00 PM
@Diona
you are talking about a fixed custom navbar at top. This will require a new code and it would be comprehensive to explain here so I will write a post on it soon. Request your patience.
Susan CalvertAug 25, 2011, 8:01:00 AM
I can log on to my blog but I do not see "Design" > Edit HTML, etc.: I must be blind! And how do you back up your template?
1. Go To Blogger > Design > Edit HTML
2. Back up your template
3. Check the Expand Widget Templates box
4. Then click Ctrl + F and in the browser search box paste this,
Sha ImanSep 17, 2011, 10:44:00 AM
i had try,but it's not appear.
UnknownNov 30, 2011, 1:30:00 PM
It's very Good!
Efoghor Joseph EzieDec 8, 2011, 12:47:00 PM
Would you please provide me with the link to download the Facebook Social bookmarking widget? My email is efoghorjos AT GMail
simonamarJan 3, 2012, 11:38:00 AM
This comment has been removed by the author.
AnonymousApr 9, 2012, 12:45:00 AM
hi mohammad please send me the buttons
thank you
Tanuj vermaMay 2, 2012, 5:20:00 PM
if we are having more than one "data:post.body" then ????