How to Add Expandable Social Media Sharing Widget into Blogger

Here I Will show you how you can add an expandable social media sharing widget to your Blogger blog. Social media sharing widget allow you and your readers to drive more traffic to your blog by sharing blog post to social sites.

Although this widget is built with HTML, CSS, jQuery, Javascript, and XML, SO it won’t affect your blog’s loading speed.

How to Add Expandable Social Meadia Sharing Widget

Let’s get started:

  • First Login to your blogger Dashboard.
  • Now go to Template >> Editor.
  • Now you have to find </head> tag and paste the bellow code just befor </head> . You can easily find by Using CTRL + F, and locate </head>
<script src=''/>
<link href='' rel='stylesheet' type='text/css'/>
function toggle(d)
var o=document.getElementById(d);;none&#39;)?&#39;inline-block&#39;:&#39;none&#39;;
  • And now Using CTRL + F, locate <b:if cond=’data:blog.metaDescription == &quot;&quot;’> and paste the bellow code above it:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social-div'>
<a class='facebook' expr:href='&quot;; + data:post.url' id='socialshare' target='_blank'>
<img src='' style='margin-right:8px;margin-bottom:-7px;margin-left:-5px;'/>
Share on Facebook
<a class='Twitter' expr:href='&quot;; + data:post.title' id='socialshare' target='_blank'>
<img src='' style='margin-right:8px;margin-bottom:-5px;margin-left:-5px;'/>
Share on Twitter
<div id='expand-social' style='display:none;'>
<a expr:href='&quot;; + data:post.url' id='google-plus' target='_blank'>
<img src=''/>
<a expr:href='&quot;; + data:post.url' id='stumbleupon' target='_blank'>
<img src=''/>
</a> </div>
$(&#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;, &#39;.Twitter, .facebook, #google-plus, #stumbleupon&#39;, opts);
return false;
<div class='share-toggle'>
<div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
<div class='plus-div'>
<a id='expand-plus'> + </a>
<div class='minus-div'>
<a id='expand-minus'> - </a>
  • Now Click on Save.

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

Abhay Pratap Singh
Abhay Pratap Singh is Digital Entrepreneur, Who is Making Money From the Internet since 2012. He Also Works as a Freelancer and Does Web and Mobile app Development. Apart from That, He Invests in Stock Market and Crypto Currencies. Here in iTechCube, Writes about Blogging, WordPress Guides, and Tutorials to help begginers.

Related Articles


Please enter your comment!
Please enter your name here