social share code placement

Floating WordPress Social Bar Without Plugin [Tutorial]

There are many social sharing plugins for WordPress. Most of them are free and work pretty well. These plugins can really help boost your traffic and even SERPs (“search engine result pages”).
The issue is that many of these plugins also slow down your website, and contain too many options that most people don’t need. Most WordPress website owners don’t know that they can easily add a floating media bar to their website, without any plugins ! It loads very fast, and since the code is easy to understand – you can tweak and customize everything within minutes.

This is how it looks :

wordpress share without plugin

Step 1 : CSS

  • You need to add the following CSS code to your theme’s CSS file. You can do that easily by opening the theme editor (under the “appearance” tab in your WordPress admin panel).

theme editor social plugin

  • The code should be added at the end of your CSS theme file. Change the”margin” value (marked blue) in order to move the floating social bar right or left.


/* Social Bar Widget CSS*/
.post-social-share {
width : 128px;
padding : 10px 0;
padding-bottom : 0;
background : #e5e5e5;
border : 1px solid #2a09bf;
border-radius : 8px;
position : fixed;
text-align : center;

top : 229px;
left : auto;
z-index : 15;
margin: 0 0px 0 -220px;
}
.social-widget {
margin-bottom : 10px;
}

Step 2 : Adding The Social Bar To Posts

  • Open the theme editor (if you closed it) and click on “single.php” (single post file) from the templates located in the right side of the page.

simgle post share box step2

  • Now paste the following code after the post is called (after “<?php while ( have_posts() ) : the_post(); ?>”) , and before the comments are loaded. :

social share code placement

<!-- Social Floating Bar Widget Code -->
<div class='post-social-share'>
<b><u>Share</u> </b><br /><br />
<div class='facebook-share social-widget'>
<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&send=false&layout=box_count&width=60&show_faces=true&action=like&colorscheme=light&font=arial&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:65px;" allowTransparency="true"></iframe>
</div>
<div class='twitter-share social-widget'>
<a href="https://twitter.com/share" class="twitter-share-button"{count}>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class='reddit-share social-widget'>
<script type="text/javascript" src="//www.redditstatic.com/button/button2.js"></script>
</div>
<div class='google-share social-widget'>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div style="float: center">
<div class="g-plusone" data-size="tall"></div>
</div>
</div>
</div>
<!-- Social Floating Bar Widget Code End -->

Step 3: Make Sure Everything Works

  • The floating media bar should appear in all of your posts.  By default – facebook,twitter,reddit and google plus buttons will be shown. If you want to delete one of them, just remove it’s div (marked blue).
  • You can also change the colors, by changing the CSS code. You can use this Hex Color website to choose the desired colors.

hex color

Buttons Documentation

If you followed this tutorial and still can’t get this working, feel free to comment below and we will try our best to help you solve the problem. If you need a more advanced sharing options, check out the following WordPress plugins :

  1. AddToAny Share Buttons – A great social plugin for WordPress websites. Many options and features.
  2. Digg Digg – This WordPress plugin will add a simple floating social sharing box to your posts. The plugin is outdated but still works well.

Leave a Comment