Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks » Add an Expandable Social Sharing Widget to Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add an Expandable Social Sharing Widget to Blogger

Add an Expandable Social Sharing Widget to Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

764 views

This easy tutorial by Abdul Rafay shows us how to add an expandable social sharing widget to your Blogger site, allwing you and your readers to drive more traffic to your blog. Although this widget is built with HTML, CSS, jQuery, Javascript, and XML, it won’t affect your blog’s loading speed.

Let’s get started:

  • Login to your Dashboard, then go to Template >> Editor.
  • Using CTRL + F, locate </head> and paste the following code above it:
<script src='http://code.jquery.com/jquery-1.9.1.js'/>
 <link href='https://googledrive.com/host/0B8D3MQmcZTyvZllGZW55UGhJM0k' rel='stylesheet' type='text/css'/>
 <script>
 function toggle(d)
 {
 var o=document.getElementById(d);
 o.style.display=(o.style.display==&#39;none&#39;)?&#39;inline-block&#39;:&#39;none&#39;;
 }
 $(document).ready(function(){
 $(&quot;#social-expand&quot;).click(function(){
 $(&quot;#expand-plus&quot;).toggle();
 $(&quot;#expand-minus&quot;).toggle();
 });
 });
 </script>
  • Using CTRL + F, locate <b:if cond=’data:blog.metaDescription == &quot;&quot;’> and paste the following code above it:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='social-div'>
 <a  class='facebook' expr:href='&quot;  http://www.facebook.com/sharer.php?u=&quot; + data:post.url'  id='socialshare' target='_blank'>
 <img  src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8'  style='margin-right:8px;margin-bottom:-7px;margin-left:-5px;'/>
 Share on Facebook
 </a>
 <a  class='Twitter'  expr:href='&quot;http://twitter.com/share?text=&quot; +  data:post.title' id='socialshare' target='_blank'>
 <img  src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM'  style='margin-right:8px;margin-bottom:-5px;margin-left:-5px;'/>
 Share on Twitter
 </a>
 <div id='expand-social' style='display:none;'>
 <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' id='google-plus' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvV0NHX0xLXzEwc1U'/>
 </a>
 <a expr:href='&quot;  http://www.stumbleupon.com/submit?url=&quot; + data:post.url'  id='stumbleupon' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvc3pYZFhDLXlBNFk'/>
 </a> </div>
 <script>
 $(&#39;.Twitter, .facebook, #google-plus, #stumbleupon&#39;).click(function(event) {
 var width  = 575,
 height = 400,
 left   = ($(window).width()  - width)  / 2,
 top    = ($(window).height() - height) / 2,
 url    = this.href,
 opts   = &#39;status=1&#39; +
 &#39;,width=&#39;  + width  +
 &#39;,height=&#39; + height +
 &#39;,top=&#39;    + top    +
 &#39;,left=&#39;   + left;
 window.open(url, &#39;.Twitter, .facebook, #google-plus, #stumbleupon&#39;, opts);
 return false;
 });
 </script>
 <div class='share-toggle'>
 <div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
 <div class='plus-div'>
 <a id='expand-plus'> + </a>
 </div>
 <div class='minus-div'>
 <a id='expand-minus'> - </a>
 </div>
 </div>
 </div>
 </div>
 </b:if>
  • Click on Save.

Your expandable social sharing widget should be installed and working now.

Liked It ? Please Share

Comments

15 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Abdul Rafay says:

    Thanks for Mention my Name :-)

    • Carmela Maraan says:

      Hi Abdul,

      You’re welcome. And thanks so much for sharing such a cool tutorial! :)

      Carmela

  2. Safeer Ahmed says:

    Awesome sharing tool. Thanks @abdul rafay anf carmela for sharing

  3. Alhamdulillah…Thanks Abdul.

  4. Thank you ,

    I was looking for a article about it. Because I wanted to add social sharing button to my site which is on Blogger. Will try to add it.

    Shahadath
    http://www.cheapoutsourcing.info/

  5. Hi, can you please add a demo to show how the widget perfoms? thanks

  6. Ravi Chahar says:

    Actually i was seeking some kind of tool like that for my blog. I hope this will work out. Anyways thanks for sharing your knowledge with us.

  7. Lush Pash says:

    Very Awesome Tutorial and Very Easy also Keep it up

  8. Hi, can you please add a demo to show how the widget perfoms? thanks

  9. Tips-Q says:

    thanks you for share,

  10. OBAT KANKER says:

    TERIMAKASIH ATAS INFONYA SEMOGA BERMANFAAT….

  11. Zohaib Jahan says:

    nice post, it’ll be better if demo were there…

  12. This was a fantastic article. Really loved reading your we blog post. The information was very informative and helpful…

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here