How to create a vertical floating social share bar for your website with share count and without using plugins or 3rd party script? You can create floating social media share bar in just three steps and by using html and JavaScript code. Sharing your content to various social media services really help you to widen your blog or websites reach and credibility. As we discussed the social media signals are one of the parameters considered by the search engines to determine the website rank and indexing.
Depending on the platform (such as WordPress) you are using there may be many different plugins available to add social sharing buttons to your web pages and blog posts. But there are not many of them which provide options the way you want. Today we will discuss how to create custom share bar widget that renders a vertical floating social share bar with share count along with share buttons.
Related Posts:
- Add Pinterest “Pin It” Button to WordPress Blog without a Plugin
- Top 20 Free WordPress Social Share Plugins
- Cross post Google Plus Posts to Facebook and Twitter
How to Create Floating Vertical Social Share Bar with Counter
We will make use of share buttons provided by the services such as Google+, Facebook , Twitter, and Pinterest etc to create a floating share bar. Advantage of using the script directly from the social media services is that you will always get the actual share count. If you use custom widgets such as ShareThis, the counts won’t show the official numbers registered at Twitter, Google and pinterest servers but they will show increments registered at ShareThis.
We can always include new sharing buttons or remove already added one just by removing the required button code. Our vertical share bar with counters will be rendered as below. This social sharing bar would float to the left of your blog posts and would float as the visitor scrolls up or down.
To integrate the widget code you should have access to the code/template of your website of blog.
You can add or remove the social media buttons as you like. We will provide you the most widely used social sharing buttons in the below example. This includes Facebook, Twitter, LinkedIn, Pinterest and Google+. You just need to include the code for other buttons to add them to the widget. You can follow the below steps to implement the widget on your blog or website.
Step 1: Add the following code to the “head” section
Depends of your website/blog platform you need to find out the header template file where you have the <head%gt;<head/> section. Add the below code just above the closing head tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style> .sharebar{ position:fixed; float: left; padding: 1px 0 0 2px; margin-top: 70px; margin-right: 20px; z-index:1; background:#CCCCD1; border-color: #D7D8E9; border-style: solid; } </style> |
Step 2: Add the share button code to to the content page
Add the following code just after the <body> tag of your template file. Usually you will have a template file where you can find the <body> tag. Add the below code just below the body tag.
1 2 3 4 5 6 7 8 9 10 11 | <div class="sharebar"> <a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo get_the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a> <br/><br/> <div class="fb-like" data-send="false" data-layout="box_count" data-width="90" data-show-faces="false"></div> <br/><br/> <div class="g-plusone" data-size="tall"></div><br/><br/> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="globinch">Tweet</a> <br/> </div> |
Please note that we have included code for the social media services given below.
- Google+
You can add additional buttons by adding the corresponding button code in the above section.
Please note that the above code is meant for the widget button. The JavaScript responsible for rendering the buttons needs to be included in your template to make them work. The below code does exactly that. You just need to copy and paste the below code just above the closing body ( </body>) tag. You need to identify the position of closing body tag in your template file. We are adding this towards the end of the page to make it load towards the end of the page loading. By doing so, these scripts will not block the other sections of the page from loading.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!-- Twitter Code --> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <!-- Google+ Code --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <!-- Facebook Code --> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- Pinterest Code --> <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script> |
As I mentioned above if you are adding additional buttons such as StumbleUpon, you can include the JavaScript in the above section.
Once you have completed the above steps, you will see the Floating Vertical Social Share Bar with Count rendered on your pages.
The above code is tested on Firefox, IE 8+ and Chrome. If you find any problems with the above code, please let me know using the comments section. I will be happy to rectify any issues.
Before you go, subscribe to get latest technology articles right in your mailbox!.
Step 1 has no code. Please update?