Friday, 8 July 2016

How to add Floating Social Media Network Share Buttons for Blogger

The impact of Social media network has been increasing in our life over last few years. We are habituated to get an update from social media network and to update our favorite social media network like Facebook, Twitter, Google Plus, LinkedIn, etc., each moment.

Floating social media buttons for blogger



          Have you ever noticed that why high SERP ranked blog and sites are using a floating social media network share icon widget? Every time we share our article on the social network its creates an automated backlink to our blog or site. The major search engine Google, Bing have started counting the popularity of our blog on the social media network. Especially Google Plus. They are now considering social network popularity as a ranking factor in the search engine.

Recommend For You: How to link Your Facebook Account to Twitter Account

          It's gradually more important to us, bloggers, online marketers or product reviewers to have a floating social media network share icon available to our potential visitors. So they can share their loved article on their favorite social media site instantly.

          Here I have presented how to add floating social media network share icon on a blog. These are few pre-configured user-friendly social media share icon and techniques that you can easily configure to match your website look and feel.

Floating Social network share button from GetSiteControl


          Get site control (GetSiteControl) is a website that offers to configure floating social media network share icon on your blogger blog or website with installing a one-time simple script in your blog template. The social network share icons are responsive enough to display on various screen size. Get site control offers statistics in a beautiful way about the social media network widget, like, how many times the floating social media network icon displayed or impression count statistics, share count statistics and much more. You can change the social media network icons native color to your own to match your test and website look.

          GetSiteControl social share buttons for bloggers offers various display position, vertical, horizontal and popup. All you need a GetSiteControl account and installing a small script in your blog template HTML to configure this beautiful social media network share buttons for blogger.


          A disadvantage of using free version GetSiteControl is you can not disable share icon on the mobile device. If you have configured AdSense page level ad unit, then a visitor may get difficulties to click on the page level ad unit as the expandable share icon displays on the page level ad unit.



          Another disadvantage of GetSiteControl Social share buttons widget is social icons availability are limited to few.

Get site control floating share bar preview

Attractive Floating Social media share icon from Sumome


          Sumome is another excellent website that offers to configure social media network share icon on your blog or website with installing a simple script in your blog template. Sumome also provides lots of excellent features besides floating social media network share buttons for blogger.


          To configure this floating social share buttons on your blog, you need an account on Sumome and install the small script in your Blog HTML just before the </body> tag.

          There is a little disadvantage of using Sumome widget is there will be a non-removable icon representing Sumome brand.

Sumome Features List

AddThis floating social media share buttons for blogger


          AddThis is another website offers beautiful floating social share icon for bloggers with share count feature. The free version of AddThis social media floating widget is more than enough for your blog, but if you are looking for more customized look floating share buttons, then you need an AddThis Pro account.


          Configuring this widget on your blog is same above, Login with your AddThis username and password and copy the script code and paste it into your blog template HTML just before the </body> tag.



          A removable AddThis brand icon + will be there, but the disadvantage of the button is if you remove the icon you will miss a lot of share icons except your selected primary social media share buttons.

Add this social share buttons

Pure CSS3 and HTML Coded Floating Social Media Share Buttons for Blogger


          Why I have included here, this CSS3 and HTML coded floating social media share buttons for bloggers? The search engine king Google gives preference in the ranking factor those sites have good speed. The above-described techniques of adding social media share buttons for bloggers used an external script which may slow down your blog speed.

          These floating social media share buttons for bloggers loads on a blog extremely fast and very easy to configure. I have not used any script, so the share count feature is missing from this Floating social media network widget.

HTML CSS3 Floating Share bar preview

How to configure this Floating social media share buttons onto your blog?


          Sign into your blogger dashboard using your Google account username and password.

          Scroll down the left side menu and click on Template.
          Clicks on the Edit HTML from the right side.
          Copy and paste the bellow font-awesome code between the <head> and </head> tag. (Do not need to paste the font-awesome code if there already present one.)

loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");

          Now copy the CSS floating social media share buttons style code and paste before the </head> tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.dd_floatingsocial {position: fixed;bottom: 30%;padding: 0;left:0;background: none;text-align: center;margin: 0 auto;z-index: 99999999;}
.dd_floatingsocial .social_menu {display: inline-block;float: left;list-style:none;max-width:40px;margin: 0;padding: 0;}
.dd_floatingsocial .social_menu .button_facebook {background: #09db3b;}
.dd_floatingsocial .social_menu .button_facebook:hover {background: #314a83;}
.dd_floatingsocial .social_menu .button_twitter {background: #09db3b;}
.dd_floatingsocial .social_menu .button_twitter:hover {background: #0092cc;}
.dd_floatingsocial .social_menu .button_googleplus {background: #09db3b;}
.dd_floatingsocial .social_menu .button_googleplus:hover {background: #be3f2b;}
.dd_floatingsocial .social_menu .button_pinterest {background: #09db3b;}
.dd_floatingsocial .social_menu .button_pinterest:hover {background: #ae181a;}
.dd_floatingsocial .social_menu .button_stumbleupon {background: #09db3b;}
.dd_floatingsocial .social_menu .button_stumbleupon:hover {background: #c7401f;}
.dd_floatingsocial .social_menu .button_linkedin {background: #09db3b;}
.dd_floatingsocial .social_menu .button_linkedin:hover {background: #224EB4;}
.dd_floatingsocial .social_menu &gt; ul {margin: 0;padding: 0;list-style: none;}
.dd_floatingsocial .social_menu &gt; ul &gt; li {margin: 0px 0px 0px 0px;position: relative;text-align: center;list-style: none; list-style-type: none;padding: 0px;border: 0px;border-left: 0 solid rgba( 0,0,0,.4);height: 50px;width: 50px;overflow: hidden; display: block;box-sizing: border-box;background: none;box-sizing: content-box;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.dd_floatingsocial .social_menu &gt; ul &gt; li a {display: block;width: 100%;height: 100%;box-sizing: border-box;padding: 13px 0px;cursor: pointer;text-decoration: none;}
.dd_floatingsocial .social_menu &gt; ul &gt; li:hover {border-left: 5px solid rgba( 0,0,0,.3);width: 50px;}
.dd_floatingsocial .social_menu &gt; ul &gt; li i {color: #fff !important;font-family: FontAwesome;font-size: 24px;font-style: normal;font-weight: normal;line-height: 1em;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.dd_floatingsocial .social_menu &gt; ul &gt; li:hover i {opacity: 0.9;}
@media only screen and (min-width:768px) and (max-width:979px) {.dd_floatingsocial {bottom: 20% !important;}}
@media only screen and (min-width:480px) and (max-width:767px) {.dd_floatingsocial {bottom: 15% !important;}}
@media only screen and (max-width:479px) {.dd_floatingsocial {bottom: 10% !important;display: none !important; /*---delete 'display: none !important;' to display on mobile--*/}}
</style>
</b:if>

          Now click inside template HTML code of your template and press CTRL+F to find the code class='post-footer-line post-footer-line-3'



          Copy and paste the below HTML code just after the above code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='dd_floatingsocial'>
    <div class='social_menu'>
<ul>
<li class='button_facebook'>
<a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
        </div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @digitaldoubt - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
        </div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
        </div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
        </div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
        </div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/><div class='share-btn' data-service='linkedin'/></strong></a></li>
</ul>
</div>
</div>
</b:if>
</b:if>

          Change the highlighted Twitter ID digitaldoubt with own Twitter ID.

          Click on Preview Template and clicks on any article to see that how it`s looking. If you are satisfied with the look then clicks on Save Template.

          So we have known how to add Floating social media network share buttons for blogger. Keep one thing in mind that external script will slow down your blog speed so wherever possible use script asynchronously.

Do not miss: How to submit a blog XML sitemap to Google Webmaster Tools

          Tell me in the comment box which one you are gonna try? Your feedback and suggestions are always welcomed.

          If you like this post please share with your friend on the popular social network. The floating social bar is waiting for your click. Good luck. Happy Blogging.

Author of DD | Technology Passionate | Electronics Engineer | Professional Blogger | Hobby - Travel | India | Quote - Love Life, Live Life.

2 comments

this will be helpful to my blog My Blog After i have applied it,


thanks for sharing this wonderful tutorials.

To have a greater exposure to your facebook account, People expend dollars to Buy Facebook Followers to very easily get exposure on world wide web. buy cheap facebook followers


EmoticonEmoticon