Well, this has been a problem for me. There must be some social media share plugins that displays social sharing buttons of popular social networking sites like Facebook, Twitter, Google Plus, LinkedIn and Pinterest etc. on the blog’s home page to share the home page itself. But unfortunately the one I like to use for my blogs don’t have this feature. They do show the icons on the home page but those are for the individual pots/post excerpts on the home page only.
Fortunately most of the social media sites allow you to create your own button code. You could go there, create your own button, copy the code and come back to paste the code to your blogs template.
Now it could be challenging for newbies who don’t know or are hesitant to edit a WordPress template. Now, you could always paste the codes inside a text widget to show on the sidebar but if you want elsewhere you would need to edit the template.
It’s no big deal. Even if you are not familiar to editing templates, I encourage you to try it because it is going to help you in future. Just one caution: Back up the template you intend to modify just in case …
To create Facebook Like Button click here
To create Twitter Tweet Button click here
To create Google Plus +1 Button click here
To create Pinterest Button click here
To create LinkedIn Share button click here
Okay now that you have all the codes, it’s time to integrate them to the template. For best result don’t put the code blocks in a sidebar widget. IMHO the best place to havethem is on the top and/or bottom of the page.
Here’s how to do it -
1. Log in to your Wordprerss Dashboard
2. Go To Appearance » Editor menu
3. Select and open Main Index Template (index.php) from the right sidebar
4. Find the code you see below:
<?php if (have_posts()) : ?>
5. Insert your Social share button code block above it
WARNING: Please backup the index.php file by copying the content to notepad before you do the editing.
Now, the code block that you’ll integrate to your template (folowing the above instructions) should more or less like the one you see below:
DO NOT Copy-Paste - This is an Example only. <div style="margin-left:10px auto;"> <div style="float:left; padding:0px 5px;"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.yourdomain.com/" data-text="Your Web Site Title" data-count="vertical" data-via="twittername"></a></div> <div style="float:left;"><g:plusone size="tall" href="http://www.yourdomain.com/"></g:plusone></div> <div style="float:left; margin:11px 0px 0px 5px;"><a href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.yourdomain.com%2Fyour-post-page-or-whatever%2F&media=http%3A%2F%2Fwww.yourdomain.com%2Fimages%2Fphoto.jpg&description=A%20short%20description%20of%20your%20photo." data-pin-do="buttonPin" data-pin-config="above"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a></div> <div style="float:left; padding-left:5px;"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.yourdomain.com%2F&send=false&layout=box_count&width=450&show_faces=false&font&colorscheme=light&action=like&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe></div> </div> <div style="clear: both;"> </div>
IMPORTANT: This code places the buttons side by side horizontally. You might need to adjust the CSS values to make the buttons appear perfectly. DO NOT Copy-Paste the above code because yours would be different, This is just to show you how it should look.
If you are using a paid WordPress theme you could take help of their support. Post a comment if you have any questions – I would try my best to answer.