Social bookmarking sites are a popular way to store, classify, share and search links. In a social bookmarking system, users store lists of Internet
resources, which they find useful. These lists are both accessible to
the public or a specific network, and other people with similar
interests can view the links by category, tags, or even randomly.
Here I’m sharing some of the top social bookmarking widgets, that are very easy to install in your blogger blog. All the Instructions are written to install the buttons at the end of all your blog posts.
Note: If you are reading this in a RSS Reader, then you have to open this post in a web browser in order to view demos and scripts included.
Demo:
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find <p><data:post.body></p>
3. And just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.)
4. Save the template, and open any post to see the buttons.
The code given installs the simplest form of AddThis sharing widget as shown in the demo above. To customize or design your own widget, goto AddThis.com.
or view AddThis Toolbox, if you want to design or choose from a large collection of AddThis buttons.
Demo:
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find <p><data:post.body></p>
3. And just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.)
4. Save the template, and open any post to see the buttons.
The code given installs the simplest form of AddToAny sharing widget as shown in the demo above. To customize or design your own widget, goto AddToAny.
Demo: See Demo Here
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find </head> and ABOVE it, place this code:
3. Now find ]]></b:skin> and just ABOVE it, place this code:
4. Now find <p><data:post.body></p> and just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.)
5. Save the template, and open any post to see the sharing buttons.
Demo:
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find <p><data:post.body></p>
3. And just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.)
4. Save the template, and open any post to see the buttons.
The code given installs the simplest form of ShareThis sharing widget as shown in the demo above. To customize goto ShareThis.com
Demo:
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find <p><data:post.body></p>
3. And just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.)
4. Save the template, and open any post to see the buttons.
The code given installs the simplest form of SocialList sharing widget as shown in the demo above. To customize goto SocialList.org.
Demo :
Click here to see the demo.
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find <p><data:post.body></p>
3. And just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.
4. Save the template and view any post.
The code given installs the simplest form of SocioFluid sharing widget as shown in the demo above. You can change size, hovering effect and select/deselect the buttons you want to show on your widget, to do customization, goto SocioFluid.com.
Hope you liked it.
If you face any problem while installing these widgets, leave the comments below. Otherwise don’t forget to share this page to others; you can use any of the bookmarking widgets above
< imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
You can install simple and few social bookmarking buttons in your blog post, An All-in-one Social Bookmarking Service or these Popular Social bookmarking widgets or plugins in your site/blog to help your visitors to bookmark and share the articles they like.Here I’m sharing some of the top social bookmarking widgets, that are very easy to install in your blogger blog. All the Instructions are written to install the buttons at the end of all your blog posts.
Note: If you are reading this in a RSS Reader, then you have to open this post in a web browser in order to view demos and scripts included.
1. AddThis
AddThis is one of the most commonly used bookmarking buttons. This is because of it’s simplicity in installation and customization options. AddThis takes minimum space in your site and supports over 225 social bookmarking sites. You can install AddThis in almost any type of website, blog or even in emailing list.Demo:
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find <p><data:post.body></p>
3. And just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.)
<!-- ADDTHIS BUTTON BEGIN -->
<a href="http://www.addthis.com/bookmark.php?v=250"
class="addthis_button"><img
src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif"
width="125" height="16" border="0" alt="Share" /></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- ADDTHIS BUTTON END -->
4. Save the template, and open any post to see the buttons.
The code given installs the simplest form of AddThis sharing widget as shown in the demo above. To customize or design your own widget, goto AddThis.com.
or view AddThis Toolbox, if you want to design or choose from a large collection of AddThis buttons.
2. AddToAny
Similar to AddThis , AddToAny also supports hundreds of social bookmarking sites. AddToAny not only takes Minimal space in your blog post but also supports emailing and local bookmarking.Demo:
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find <p><data:post.body></p>
3. And just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.)
<!-- Add to Any Share/Save BEGIN -->
<br/><a class='a2a_dd' href='http://www.addtoany.com/share_save'><img alt='Share/Save/Bookmark'
border='0'
src='http://static.addtoany.com/buttons/share_save_171_16.png'
width='171' height='16'/><p class='a2a_linkname_escape'
style='display:none'><data:post.title/></p></a><script
type='text/javascript'>a2a_linkname_escape=1;a2a_linkurl="<data:post.url/>";</script><script
src='http://static.addtoany.com/menu/page.js'
type='text/javascript'></script>
<!-- Add to Any Share/Save END -->4. Save the template, and open any post to see the buttons.
The code given installs the simplest form of AddToAny sharing widget as shown in the demo above. To customize or design your own widget, goto AddToAny.
3. Sexy Sharing Bookmarks
Created by a Pakistani Web Designer – Naeem Noor, Sexy Sharing Social Bookmarking Widget got huge popularity among bloggers because of it’s unique design and beautiful hovering effect.Demo: See Demo Here
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find </head> and ABOVE it, place this code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery('.sexy-bookmarks').height();
var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight>sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(
function() {
jQuery(this).animate({
height: sexyFullHeight 'px'
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight 'px'
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth=jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin 'px');
}
});
</script>
3. Now find ]]></b:skin> and just ABOVE it, place this code:
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left
!important; list-style-type:none !important; margin:0 !important;
height:29px !important; width:60px !important; cursor:pointer
!important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px
!important; height:29px !important; text-indent:-9999px !important;
background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover,
.sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious,
.sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover,
.sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati,
.sexy-technorati:hover, .sexy-facebook,
.sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover,
.sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover,
.sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat,
.sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover,
.sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin,
.sexy-linkedin:hover, .sexy-google,
.sexy-google:hover, .sexy-friendfeed,
.sexy-friendfeed:hover{background:url('http://img717.imageshack.us/img717/3006/sexyspritenew.png')
no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}
4. Now find <p><data:post.body></p> and just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.)
<div class='sexy-bookmarks sexy-bookmarks-expand
sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important;
padding:25px 0 0 10px !important; height:29px;/*the height of the icons
(29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external'
expr:href='"http://del.icio.us/post?url="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Share this on del.icio.us'>Share this on
del.icio.us</a></li>
<li class='sexy-digg'><a class='external'
expr:href='"http://digg.com/submit?phase=2&url="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external'
expr:href='"http://www.stumbleupon.com/submit?url="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Stumble upon something good? Share it on
StumbleUpon'>Stumble upon something good? Share it on
StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external'
expr:href='"http://reddit.com/submit?url="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Share this on Reddit'>Share this on
Reddit</a></li>
<li class='sexy-google'><a class='external'
expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Add this to Google Bookmarks'>Add this to
Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external'
expr:href='"http://twitter.com/home?status=Reading: "
data:blog.title " - " data:post.url "
(@NAME)"' rel='nofollow' title='Tweet This!'>Tweet
This!</a></li>
<li class='sexy-facebook'><a class='external'
expr:href='"http://www.facebook.com/share.php?u="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Share this on Facebook'>Share this on
Facebook</a></li>
<li class='sexy-mixx'><a class='external'
expr:href='"http://www.mixx.com/submit?page_url="
data:post.url' rel='nofollow' title='Share this on Mixx'>Share this
on Mixx</a></li>
<li class='sexy-comfeed'><a class='external'
expr:href='data:blog.homepageUrl
"feeds/posts/default"' rel='nofollow'
title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external'
expr:href='"http://buzz.yahoo.com/submit/?submitUrl="
data:post.url' rel='nofollow' title='Buzz up!'>Buzz
up!</a></li>
<li class='sexy-linkedin'><a class='external'
expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Share this on Linkedin'>Share this on
Linkedin</a></li>
<li class='sexy-designfloat'><a class='external'
expr:href='"http://www.designfloat.com/submit.php?url="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Submit this to DesignFloat'>Submit this to
DesignFloat</a></li>
<li class='sexy-technorati'><a class='external'
expr:href='"http://technorati.com/faves?add="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Share this on Technorati'>Share this on
Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external'
expr:href='"http://scriptandstyle.com/submit?url="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Submit this to Script & Style'>Submit
this to Script & Style</a></li>
<li class='sexy-myspace'><a class='external'
expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"
data:post.url "&title=" data:post.title'
rel='nofollow' title='Post this to MySpace'>Post this to
MySpace</a></li>
<li class='sexy-blinklist'><a class='external'
expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Share this on Blinklist'>Share this on
Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external'
expr:href='"http://friendfeed.com/?url="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Share this on FriendFeed'>Share this on
FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external'
expr:href='"http://www.newsvine.com/_tools/seed&save?u="
data:post.url "&title=" data:post.title'
rel='nofollow' title='Seed this on Newsvine'>Seed this on
Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div> 5. Save the template, and open any post to see the sharing buttons.
4. ShareThis
Sharethis is mostly popular because of its tracking and reporting features. While free registration you have to add domain(s) so that ShareThis can track the links their clicks and visits, and the social sites where your data is going. And this is the reason it is mostly used by professionals who are very concerned about tracking their content.Demo:
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find <p><data:post.body></p>
3. And just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.)
<div style="text-align: left;">
<script
src='http://w.sharethis.com/button/sharethis.js#publisher=3f23816c-c290-4d29-8bb0-a882f3cb6c99&type=blogger'
type='text/javascript'/></div>
4. Save the template, and open any post to see the buttons.
The code given installs the simplest form of ShareThis sharing widget as shown in the demo above. To customize goto ShareThis.com
5. SocialList.org
SocialList bookmarking widget is not so well-known but works impressively well. It supports over 1700 social bookmarking sites. And the best thing about this is that it opens all bookmarking sites in a mini popup window so reader is not redirected to any page in a new window.Demo:
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find <p><data:post.body></p>
3. And just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.)
<!-- SocialList.org BEGIN -->
<script type='text/javascript'>
sociallist_url = location.href;
sociallist_title = document.title;
sociallist_text = "";
sociallist_tags = "";
</script><script src="http://sociallist.org/widget.js" type="text/javascript"></script>4. Save the template, and open any post to see the buttons.
The code given installs the simplest form of SocialList sharing widget as shown in the demo above. To customize goto SocialList.org.
6. Socio Fluid
SocioFluid bookmarking widget is one of the most beautiful looking widget. With very little support to social bookmarking sites, SocioFluid is still very liked among bloggers, because of its, nice hovering and zooming effect over buttons. With big shiny and separate buttons for each bookmarking site, it has most simplest code of all.Demo :
Click here to see the demo.
Click here to view Code and Installation Instructions [+/-]
1. Go to Layout > Edit HTML.
Check “Expand Widget Templates”
2. Find <p><data:post.body></p>
3. And just BELOW it, paste the following code.
(Pasting the code ABOVE <p><data:post.body></p> would show the widget at the start of posts.
<!--SocioFluid--><script type="text/javascript"
src="http://sf2.sociofluid.com/v2?widget=132480-0001030c0d11"></script><noscript><a
href="http://www.sociofluid.com/">SocioFluid</a></noscript><!--SocioFluid-->4. Save the template and view any post.
The code given installs the simplest form of SocioFluid sharing widget as shown in the demo above. You can change size, hovering effect and select/deselect the buttons you want to show on your widget, to do customization, goto SocioFluid.com.
Hope you liked it.
If you face any problem while installing these widgets, leave the comments below. Otherwise don’t forget to share this page to others; you can use any of the bookmarking widgets above
No comments:
Post a Comment