Friday

Pin It

Widgets

6

Adding social bookmarking sharing

  • Friday
  • Andy Law
  • Share
  • Now, there are so many options for bloggers, like you and me when it comes to ulitizing social bookmarking sharing widget. And, the fixed social bookmarking sharing buttons which I'm about to show you is one on them.

    It looks something like this, placing on the top of every blog post.



    Similar to the floating social media widget, but it is displayed horizontally. And it stays visible to readers while they are scrolling to the bottom of the blog post. It's cool, right!.

    How to integrate this social bookmarking sharing widget to your blog

    Step 1: Go to Template >>> Edit HTML >>> Proceed >>> Tick Expand Template Widget box

    Step 2: Add this code Before/Above </head> tag (Press Ctrl + F to find </head> )
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /*<![CDATA[*/
    	#w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    	#w2bSocialFloat td{padding:4px;margin:0;border:none;}
    	#w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
    	#w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Set the Top Offset
    $theOffset = 0;
    
    jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
    /*]]>*/
    </script>
    <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script>
    <script type="text/javascript">
    /*<![CDATA[*/
    	// Twitter
    	(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
    	// Google + (plus)
    	(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
    	// Stumbleupon
    	(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
    	// Digg
    	(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
    /*]]>*/
    </script>
    </b:if>
    
    Step 3: Add this code Before/Above <data:post.body/> tag.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id="w2bSocialFloat" class="w2bSocialFloat">
    <table  width="100%" class="w2bSocialFloat">
    	<tr>
    		<td>
    			<a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
    		</td>
    		<td>
    			<iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
    		</td>
    		<td>
    			<div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
    				<data:post.body/>
    				<script type="text/javascript">
    					w2bPinItButton({ 
    						url:"<data:post.url/>", 
    						thumb: "<data:post.thumbnailUrl/>", 
    						id: "<data:post.id/>", 
    						defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg", 
    						pincount: "horizontal" 
    					}); 
    				</script> 
    			</div>
    		</td>
    		<td>
    			<div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
    		</td>
    		<td>
    			<su:badge layout="1" expr:location="data:post.url"></su:badge>
    		</td>
    		<td>
    			<a class="DiggThisButton DiggCompact"></a>
    		</td>
    	</tr>
    </table>
    </div>
    </b:if>
    
    Step 4: Save Template

    *Note: If you're using Read More function in your blog, paste the code in step 3 in the middle of this 2 lines
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/> 
    
    You might be interested in my other post on how to add floating social bookmarking sharing here.

    6 Responses to “Adding social bookmarking sharing”

    mohammad azam said...
    23 December 2012 at 17:41

    New dofollow social bookmarking site with instant approval :

    creatinsurance.com
    followinsurance.com
    newnewsformobile.com
    recentinsurance.com
    creatinsurance.info
    followinsurance.info
    recentinsurance.info

    Bookmarking Sites list 2013


    Gaurav said...
    9 January 2013 at 04:59

    Hello Friends,

    This is dofollow bookmarking site. instant approval within 24 hr.Use It
    Dofollow bookmarking site

    http://www.webdesigncumseo.com


    Ajimon Chacko said...
    29 January 2013 at 06:18 This comment has been removed by the author.

    Ajimon Chacko said...
    29 January 2013 at 06:19

    One more Social Bookmarking Site www.newsvoting.com


    adrian lucernas said...
    23 March 2013 at 20:20

    Thanks: www.bloggerheroe.com


    nuchuis said...
    16 April 2013 at 03:59

    Bookmarking Demon is one of first automated solutions for link building to be launched to the world. The simple fact that Bookmarking Demon is still going strong and it is still very popular almost 5 years after being launched just shows that it works.
    I have tried using Bookmarking Demon in the past but I did so when I only got started and I really didn’t know anything about how it works and how to put it to good use. I decided to give it another shot and test it out again as I am looking to decrease the amount of time I invest into link building and one of the ways is using such automated tools.


    Post a Comment

    SUBSCRIBE NOW to get the latest posts