Sunday, 6 April 2014

Add Floating Social Media Bar Widget for Bloggers and Websites

Add Beautiful and fully customized floating social media widget bar for blogger/website. And learn how its done.


  Floating sharing Bar is quite popular among Bloggers who always tries to make blog socially available to everyone, and sharing is one of best method by which readers can easily share with their friends. This not only help the readers but also the blogger who’s blog been shared among hundreds of people. This in turn bring readers directly to their blog. This can be done using floating Shareable widget which we will discuss here. 

  Floating Bar not only helps you to increase your blogs social availability but also it increases the chances of sharing your post by readers with their friends since its floats just side by side to your blog post

  The biggest problem while implement this Floating bar is that it cannot be customized according to blogger need only if blogger is itself a good HTML programmer. But the widget I will be discussing here is much simpler in coding and as well as much simple to implement. The widget is also can be easily customized.
This tutorials is divided into two parts A and B.

In Part A:  we will create our Widget using Shareaholic website which is Free of cost and
In Part B: We will implement this code into our Blogger Template

So let’s Get Started

Note:  If you have already created apps using Shareaholic you can skip to Part B

Part A: Creating Shareaholic Sharing App

1: Firstly register with your account in Shareaholic Website. Sign up there. Now login with credentials and click on “For you Site”

2: Now click on ‘Get Started’. It will Ask you to Add Your Website, just fill the information required and save it. Now after adding your website it will provided you with an analyze code that you to place before </head&gt in your Blogger Template. Save this Code we will integrate this Code in Part B process.


3: Now all you have to do is to create sharing App that we will use to integrate into our Blogger.


4: Now Customized the Widget According to your need I personally recommend to follows this Settings. It’s important you should select ‘No Headings’.
Click on image for bigger view

5: Now save your settings and get your code of it. It may appear like this

<div class="shareaholic-canvas" data-app-id="some number" data-app="share_buttons">
</div>

Since we have created ours Widgets now we have to integrate this code in our Blogger template

Part B: Integrating Code

1: Now go to your Blog>> Template >> Edit HTML (you may backup your template First)

2: And Search for </head>  paste that Analyze Code Just BEFORE it.


3: Now search for following code using CTRL+F
<b:includable id='post' var='post'>

4: Now copy and paste the Following Code just AFTER it
<!--Floating bar Eutectics Starts Here-->
<b:if cond="data:blog.pageType == &quot;item&quot;">

<style> 
.Eu_social_floating{ 
    position:fixed; top:25%;
    margin-left:-90px;float:left;
    width:70px; 
    background-color:#ffffff;
     padding: 5px 0 0px 0px; 
     border-top:0px solid #ddd; 
border-left:0px solid #ddd;
border-right:0px solid #ddd;   
border-bottom:0px solid #ddd; 
z-index:9999px !important; 
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px; 
} 
</style> 
<div class="Eu_social_floating">
You’re Sharing app Code 
</div>
</b:if>
<!--Floating bar Eutectics Ends Here-->

5: Now paste your sharing apps Code in place ‘Your Shareaholic Code’

Simply save it, you are done Congrats!

See your post page it will starts appearing already.

Important Notes for Geeks like You: 
1: To Change Your Widget Background Color
Background-color:#ffffff

2: To Give border to your widget
border-top:0px solid #ddd;
border-left:0px solid #ddd;
border-right:0px solid #ddd;  
border-bottom:0px solid #ddd;
By default color border color is #ddd and its width is 0px i.e no border

3: To Change your Widget width
width : 70px

4: To Change its position horizontally according to your post content
margin-left:-90px;
If you decrease its value from -90px to -100px it will move more towards LEFT and similarly
If you increase its value from -90px to -80px it will move more towards RIGHT.

5: To change its Position Vertically change the Value of following
top:25%;

Also you can change setting from Shareaholic Page to change its appearance. Like in this examples


Another approach towards the same result :
In this method we would make the scrolling Social bar interactive with some JavaScript. Here in this case, the Social bar will follow the readers till the end of page. The social bar will got fixed only when readers scroll just below post title and remain fixed till the end. Add the CSS just above ]]></b:skin>
.Eu_social_floating{ 
    position:absolute;
    margin-left:-90px;float:left;
    width:70px; 
    background-color:#ffffff;
     padding: 5px 0 0px 0px; 
     border-top:0px solid #ddd; 
border-left:0px solid #ddd;
border-right:0px solid #ddd;   
border-bottom:0px solid #ddd; 
z-index:9999px !important; 
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px; 
}
.sticky {
  position: fixed!important;
  z-index: 100;
  margin-top: 10px;
  top: 0;
}
also add this following code just above </head>.
<script type='text/javascript'> $(document).ready(function() { var stickyNavTop = $(&#39;.Eu_social_floating&#39;).offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if(scrollTop &gt; stickyNavTop){$(&#39;.Eu_social_floating&#39;).addClass(&#39;sticky&#39;);}else{$(&#39;.Eu_social_floating&#39;).removeClass(&#39;sticky&#39;);}}; stickyNav(); $(window).scroll(function() { stickyNav(); }); });</script>

More from Author:
You may wonder how this widget works, the answer is quite simple. Basically the widget we have created is design to appear/Render within the post body, say like below the post. But to make Render like Floating Bar I have created this small Code that Float like Fixed Widget into the Blogger template so as to allow the Shareaholic Share Code to render within it. Cool Huh!

If you face any problem regarding this tutorial feel free to drop your comment below

1 Discussion

  1. Invite people and Make New Friends. Share your Thoughts & Moments, Chat, Listen Music and Play Games. Find any Business, Follow the Shop and Enjoy a New Shopping Experience. Offers, Discounts and Earn Rewards and Much more.

    ReplyDelete

Note : All comments will be moderated. Do Not Spam.