April 19, 2015

Custom responsive social sharing widget for blogger (or) blogspot platform




Custom responsive social sharing buttons for blogger (or) blogspot blog


As a blogger, webmaster, internet marketer or an entrepreneur, we cannot neglect the power of social media. Social media plays the important role sometimes as a traffic provider and other times as a factor to change the search engine rank position indirectly. Any website or blog even authority blogs like Mashable and Techcrunch cannot increase the online presence without using social media. Social media will help you drive traffic & boost income.

This is one of my favorite and personal widget which I made by myself with simple HTML knowledge which i gained from StackOverFlow & W3School after making this widget i implemented it on my blog and i am using this widget till now, i am getting good shares around 80% of my visitors share my posts using this widget i placed this widget right below the post and that's the recommended spot. some of my buddies requested me to share my own custom made social sharing widget as an blog post. I am sure you will be satisfied with this custom responsive social sharing buttons widget. this widget is compatible with Blogger/Blogspot & WordPress Platform. Tested over 5+ months works fine.

Also read: OptinMonster Lightbox popup (OptinForm) for blogger/blogspot platform

Advanced features of this widget:

  • Fast loading
  • Responsive widget
  • Professional looking
  • Contains for 4 social media buttons
  • A/B tested widget
  • No clutter
  • Attractive color combo
  • 80% Conversion rate
  • Seo-Friendly (No-follow buttons)
  • User Friendly (opens in new tab
  • Much more...
Getting pretty good social media engagement after implementing this tool. screenshot attached below and i used heatmap tools like hotjar to track the number of clicks this widget gets at that time this sharing buttons was getting 80% convo. rate. it was my one of the major source of traffic.


Social media engagement
Sharing Activity

#1. Add Social Sharing Widget Code:

  • Now find the below code in your template
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  • Place the below codes just after the above code
<div class='clear'/>
<div id='share-button'>
<p>Share this post via:</p>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel="nofollow" target="_blank" style='background:#3b5998;'>Facebook</a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel="nofollow" target="_blank" style='background:#c0361a;'>Google+</a>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;&quot;' rel="nofollow" target="_blank" style='background:#4099ff;'>Twitter</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:blog.url' rel="nofollow" target="_blank" style='background:#000;'>Digg</a>
<div class='clear'/>
</div> 

#2. Add Social Sharing Widget CSS Code:

Follow the steps bellow carefully to add this widget to your blogger/blogspot blog.
  • Go to Blogger Dashboard > Template > Edit HTML.
  • First take backup of your template just an extra precaution
  • Now find ]]></b:skin> in your template
  • Add below codes just above ]]></b:skin>
#share-button{margin:0 0 8px;padding:0;overflow:hidden}#share-button p{float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}#share-button a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}#share-button a:hover{top:1px;
left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)}

NB: Clear cookies and history and check your blog to see how the widget works & you're done !

After trying this professional looking stylish responsive fast loading social sharing widget do drop your experience as valuable comment, i will always engage in comment section if there is any problem in this widget. Do let me know i will surely help you. do drop your valuable comments so that it will motivate to me to provide you much more useful stuffs and do share this post it will help your blog-o-sphere to improve with this amazing widget. Thanks for reading till the end patiently.

5 comments:

  1. Nice work.
    I want LinkedIn/Reddit share instead of Dig button. Can you just get that done???

    ReplyDelete
  2. Does this work for Wordpress also?

    ReplyDelete
    Replies
    1. Hey Kumar LS,
      It works fine with WordPress too.

      Delete