Tina's Tutorials: "Sharing is" Social Networking Widget

Many of you might have seen the awesome "Sharing is Caring" buttons under many blog posts, including mine. You can see a demo of what it does at the bottom of this post. By clicking on one of the pop-up buttons, people are able to share your post via social networking systems.

This tutorial, part of my series of tutorials, will show you how to get this awesome and handy widget.


Step 1:
First, open up your dashboard in another tab or window. Go to Design, then Edit HTML, and tick the “Expand Widget Template”.

Step 2:
Put your cursor in the box below, press CTRL+ A, then CTRL+C.
Go back to your HTML, and press CTRL+Fand type in "</head>" (without quotations).
Paste the code before </head> by pressing CTRL+V  with your cursor in front of </head>.


Code 1:
<!--START OF SOCIAL NETWORKING HTML. For instructions, go to http://bookcouture.blogspot.com.><script src='http://code.jquery.com/jquery-latest.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> <style type="text/css"> 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://img259.imageshack.us/img259/892/bookcoutureblogspotcoms.png') !important; background-repeat:no-repeat} div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left 0px !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://img221.imageshack.us/img221/3365/bookcouturesprite.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}</style><!--END SOCIAL NETWORKING CODE HTML. For more instructions, visit http://bookcouture.blogspot.com-->

Step 3:
Now, as before, copy everything in the box below by pressing CTRL+ A, then CTRL+C.
Go back to your HTML again, and press CTRL+F and type in "JumpLink".

Now, look for </b:if>, which should be several lines of code before JumpLink.
You need to paste the code I have after </b:if> by pressing CTRL+V.

(The reason for this is because the JumpLink code codes for "Read More>>", and you want this to go before your social networking widget.)

Code 2:
<!--START Social Networking Widget. Instructions at http://bookcouture.blogspot.com--><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"%3B+ 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&%3Burl"%3B+ 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"%3B+ 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"%3B+ 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&%3Bbkmk"%3B+ 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' 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"%3B+ 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&%3Burl"%3B+ 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"%3B+ 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"%3B+ 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"%3B+ 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"%3B+ 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%2Faddblink.php&%3BUrl"%3B+ 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"%3B+ 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> <div class='sexy-link'> Widget by <a href='http://www.cssreflex.com/'>Css Reflex </a>|<a href='http://www.bookcouture.blogspot.com' title='Book Couture tutorials. Get this widget!'> Tutorial</a></div> <!--END Social Networking Widget. Instructions at http://bookcouture.blogspot.com-->


Now, remember to SAVE your code.

Step 4 (optional):
For those of you that have Twitter, please follow this step! In your HTML, press CTRL+F (⌘+F) and search for data:blog.title. Then add + " (@TWITTERNAME)" straight afterwards. Then if people tweet your posts, your twitter name will show up.

SAVE your code.
Note: If you have an RSS, you don't need to change anything. The code will link to your feed by default.

Step 5 (optional):
Some of you might want to customise the default "Sharing is Caring" caption. To do this, you must change the image.

Here are some different options: 
To change it, find http://img259.imageshack.us/img259/892/bookcoutureblogspotcoms.png in your code, and replace it with one of the following.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmHIksISSov5xzMxomQbnMYAhe6BMePIVOAHbyYXCZwlp5gNB2jdZW2onAep0YSq-SjQ9px7XITACNC251E1UW_t3HdaXWJVO1ZauTO_ohtvv9G4Vun_F5mJzq_seejHTmNOlRmY-Rf2o/s1600/bookcouturesharingiscaring2.png

(I made this one, and you are free to use it if you wish.)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjXcjMyoWQWpxnwWCSEnTG3O-o8ICwoHO4BfLV85WIPJJ_7xf_REuQ2z9-PzBgOJEcaCWJpKzHZQoP6Q4HfoDkBjjdalSasKXl6fADHt5TrOajFRIQIjOf0vmxnba4sMqxpZMRrCHxSg5z/s1600/bookcouture-sharethelove+copy.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWJwM1_pDUII_zDIvp6lpzvMJTFAUWFrTervUFK0Af44EZMseueP6coJekm-Ef9hERqfPSpA8LqOiTVEv4vouYgILu7nESfyyWc-83ieqCG2KULbi4PcZLEsNU9cRDjm76qQSnoDkkrXWW/s1600/share+the+knowledge.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_NkoBMFQF02TrScKnHeRdUMoIvrY4RS-_oqTq-_rbREN1FNzlM7mQBFuktAW8TqgvoJ371G-woLkGkvxgG5q5Zt4A5uylqfXiYoXDWLcg7k983wZVnI426g0mb2BkJURL8L74F8W8ZbVT/s1600/bookcouturesharethelove.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6KWxGwMWD4xADuZVSmaESIm2D5hNXsbn4ckNiKyQ8s0hVqZEh9g_l5nHpNRKCDE43L5I_mzqIKw1DpwT8b_vo77eSpYdJrUh448TipZE9M_vQhEAa7YV9ONz8TZldozZcVBSIjbYyYX8d/s1600/bookcouturesharethewealth.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikIhgfj4HZhdaVD_5t6_Z2BZ3yPhs4klgZEtf0LetnTsPDTu_SKoY9PF8LSdomSGE4OJ_99yiT8ScNp3TSaPV5mSME6P7kUjaQSrbNCbyOLcsAfyhj_vf6wD_j6XcL99DStwK3q7dcnqMq/s1600/bookcouturesharingiscaring.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA981N4sEPu4RtkP1UhSpv6pBXsfSkiN6EeJedcshP8fFmayDd9zIzT_iVLYMt04_riKpr0unKW4X-9O2GhBoO_iJX_JDmtqoxIxLsbJNJe5bQ9p3e5duqPJa2TS8GtlNoKsenl9cUUONL/s1600/bookcouturesharingissxy.png

Remember to SAVE your code.

Step 6 (optional):

Help others! Share this post by testing the widget below. As you can see, there are a myriad of options to choose from. Click on the RSS to subscibe, or Twitter to tweet my post.

Add me:

More tutorials from Tina...

• Share this on del.icio.us
• Digg this!
• Stumble upon something good? Share it on StumbleUpon
• Share this on Reddit
• Add this to Google Bookmarks
• Tweet This!
• Share this on Facebook
• Share this on Mixx
• Subscribe
• Buzz up!
• Share this on Linkedin
• Submit this to DesignFloat
• Share this on Technorati
• Submit this to Script & Style
• Post this to MySpace
• Share this on Blinklist
• Share this on FriendFeed
• Seed this on Newsvine