Easily Add Static Social Sharing Bar to the WordPress without Plugins
Weblog is now commonly known as a Blog, which is a discussion or an informational site on the internet. The WordPress is the most advanced tool available for blogging. The best way to promote the blog is through social sharing. You can increase the blog traffic by sharing the blog posts on the social network such as Facebook, Google+, StumbleUpon etc. With a single click, readers are also allowed to share the content of the blog in their social sites and this will be achieved easily with the help of social sharing bar.
You can add the social sharing bar to your blog with the help of plugins. Lot of plugins are available for the WordPress to display the social bar in your blogs. It’s not advisable to add bunch of plugins in the blog page, because the huge number of plugins will make the page load time high. So avoid unwanted simple plugins.
Easy way to Add Social Sharing Bar to your WordPress Blog without plugin
You can easily activate the social sharing bar to your blog post by adding some additional codes to the Source files.
Add Social Bar to the Blog Post
- Login into the WordPress
- Click on the Editor available under the Appearance menu, which is visible on the left side of the WordPress panel. It takes you to the Edit Theme page
- Source files of the installed theme will be available on the right side of the Editor Window. Click on the single.php (“Single Post”) file to edit
- single.php file codes are visible in the Editor window. Find the line <?php while ( have_posts() ) : the_post(); ?>
- Add the code given below.
Code for Social Sharing Bar:
<style> #pageshare {position:fixed; bottom:5%; left:50px; float:left; border: 0 px solid black; border-radius:5 px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:FFFFFF;padding:0 0 1 px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style> <div id=’pageshare’ title=”Share This With Your Friends”>
<div class=’sbutton’ id=’gb’><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like layout=”button_count” show_faces=”false” font=””></fb:like></div> <div class=’sbutton’>
<a href=”https://twitter.com/share” class=”twitter-share-button”>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
</div> <div class=”g-plusone” data-size=”standard”>
<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>
</div> <div class =’sbutton’ style=’margin-left:3px;width:48px’>
<su:badge layout=”1″></su:badge>
<script type=”text/javascript”>
(function() {
var li = document.createElement(‘script’); li.type = ‘text/javascript’; li.async = true;
li.src = (‘https:’ == document.location.protocol ? ‘https:’ : ‘http:’) + ‘//platform.stumbleupon.com/1/widgets.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(li, s);
})();
</script>
</div>
<div class =’sbutton’ id=’pinit’ style=’margin-left:3px;width=48px’>
<a href=”http://pinterest.com/pin/create/button/” class=”pin-it-button” count-layout=”none” target =’_blank’>
<a href=”#” onClick=”MyWindow=window.open(‘http://pinterest.com/pin/create/button/’,’MyWindow’,’toolbar=yes,location=yes,directories=yes,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=600,height=300′); return false;” class=”pin-it-button” count-layout=”none” >
<img src=”//assets.pinterest.com/images/PinExt.png” alt=”Pin it” / ></a>
<script type=”text/javascript” src=”http://assets.pinterest.com/js/pinit.js”></script>
</div>
- Finally click on the Update File button below the Editor Window.
- Now you can see a simple static social sharing bar on your Post page. It makes your readers feel good to share the content with their friends.
Manipulating the Social Sharing Bar
The Social Sharing bar will be seen at the left side of the post page. Some of you may need that at the right side of the post page. It is easily done by changing a single word in the second line of the above code.
#pageshare {position:fixed; bottom:5%; right:50px; float:left; border: 0 px solid black; border-radius:5 px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:FFFFFF;padding:0 0 1 px- Change the value from left to right and the position of the social sharing bar will be changed
- ‘bottom:5%‘ – Refers to the position where the social sharing bar appears in the page. (if you increase the value, then it will move the social sharing bar up in the page)
- If you need thin border around the social sharing bar, then change the value of the border from 0 to 1
- Change the background color of the social sharing bar to match your page by modifying the ‘FFFFFF‘ values.
Add more Social Share buttons to the Social Sharing Bar
- Add <div> </div> tag at the last of the above given code
- Get the missing button code and paste it with the div tag
- Newly added Button will be now available on the social sharing bar
Add Social Sharing Bar to the whole Blog Page.
The above mentioned steps will make the social sharing bar visible on the post page but not on the blog home page or other pages. If you need to add the social sharing bar to all pages available on the Blog, then it is also easy.
- Add a TEXT widget to the Side bar
- Copy and paste the same code on it
- Click Save button.
(Add the widget only to the Side Bar area)
Now the social sharing bar will be visible on all your pages.
It works well and good for the Swift Basic Free Theme. Hope so, it will work better on the other themes too.
If you like this post, Share it to your friends. Dont forget to Subscribe our Feeds, Follow us on Twitter, Facebook and Pinterest.
Great post, thank you!
How do you remove the counters and customize your own buttons? Is there a simpler way than nabbing the css and modifying?