|

How to add sharing buttons without a WordPress Plugin

How to Add Social Share buttons to WordPress Theme Without a Plugins

Still use WordPress plugin for adding the share buttons. In my years of experience i do a simple code for add Share buttons in WordPress Theme without a pluginAdd Social Sharing Buttons to WordPress Manually is much better than adding WordPress Plugins for sharing because of the Java Scripts and some special codes which slow down your Web Pages.

Here’s what the final page looks like when you add the Social Share Buttons Without a Plugin

Add Social share buttons to WordPress Theme Without a Plugin

Today i will show you how to add share buttons for the most used Social Networks:

    • Facebook
    • Google+
    • Twitter
    • LinkedIn
    • Pinterest
    • StumbleUpon
    • Reddit

 

To add share button for the Social Networks above you need to add a few lines of HTML, php and CSS in your Single Post layout which is single.php

I will use ul and li tags for easy customization of the code and the buttons

Let’s go to this file and locate the file and add the code

<div class="share"
<h4>Did you like this article? If so please share it with your friends.</h4>
<ul>
<li><a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>" title="Share this post on Facebook" target="_blank" class="facebook">Facebook</a></li>
<li><a href="https://plus.google.com/share?url=<?php the_permalink() ?>" title="Share this on Google+" target="_blank" class="googleplus">Google+</a></li>
<li><a href="http://twitter.com/share?url=<?php the_permalink() ?>&text=<?php the_title(); ?>&via=iamwordpresser" title="Share this post on Twitter" target="_blank" class="twitter">Twitter</a></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title(); ?>" title="Share this post on LinkedIn" target="_blank" class="linkedin">LinkedIn</a></li>
<li><a href="http://www.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(); ?>" target="_blank" class="pinterest" data-pin-do='buttonPin' data-pin-config='above'>Pinterest</a></li>
<li><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Share this post on Stumbleupon" target="_blank" class="stumbleupon">Stumbleupon</a></li>
<li><a href="http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Share this post on Reddit" target="_blank" class="reddit">Reddit</a></li>
</ul>
</div>

Please note in the code above you need to change the twitter username with your twitter username.

&via=iamwordpresser
/*Change the username only with your Twitter username*/

You can always change na name link with all Social Medias with custom icons for sharing and the code will work without a problem. Like you can see i add class to each Social Network in case of specific CSS or Image Customization. Go to your WordPress Theme style.css file and add these lines to the file.

.share ul li {
    float: left;
    list-style: outside none none;
    padding: 0 0 0 5px;
    width: auto;
}
.share h4 {
    background: none repeat scroll 0 0 #d79c75;
    color: #030607;
    float: left;
    font: bold 12px/31px "Open-sans",sans-serif;
    margin: 1px;
    padding: 0 8px;
    width: auto;
}
.share {
    height: 32px;
    margin: 20px 0;
    width: auto;
}
/* Single Special Social Button Style*/
.facebook {
    background: none repeat scroll 0 0 #45619d;
    border: 1px solid #000;
    border-radius: 1px;
    color: #fff;
    font: lighter 12px/32px "Arial",sans-serif;
    padding: 8px;
    text-align: center;
    text-decoration: none;
}
.googleplus {
    background: none repeat scroll 0 0 #e15449;
    border: 1px solid #000;
    border-radius: 1px;
    color: #fff;
    font: lighter 12px/32px "Arial",sans-serif;
    padding: 8px;
    text-align: center;
    text-decoration: none;
}
.twitter {
    background: none repeat scroll 0 0 #55acee;
    border: 1px solid #000;
    border-radius: 1px;
    color: #fff;
    font: lighter 12px/32px "Arial",sans-serif;
    padding: 8px;
    text-align: center;
    text-decoration: none;
}
.linkedin {
    background: none repeat scroll 0 0 #0077b5;
    border: 1px solid #000;
    border-radius: 1px;
    color: #fff;
    font: lighter 12px/32px "Arial",sans-serif;
    padding: 8px;
    text-align: center;
    text-decoration: none;
}
.pinterest {
    background: none repeat scroll 0 0 #bd1e23;
    border: 1px solid #000;
    border-radius: 1px;
    color: #fff;
    font: lighter 12px/32px "Arial",sans-serif;
    padding: 8px;
    text-decoration: none;
}
.stumbleupon {
    background: none repeat scroll 0 0 #eb4924;
    border: 1px solid #000;
    border-radius: 1px;
    color: #fff;
    font: lighter 12px/32px "Arial",sans-serif;
    padding: 8px;
    text-decoration: none;
}
.reddit {
    background: none repeat scroll 0 0 #c5ddf6;
    border: 1px solid #000;
    border-radius: 1px;
    color: #fff;
    font: bold 12px/32px "Arial",sans-serif;
    padding: 8px;
    text-decoration: none;
}

I hope this article was helpful for you. If so please share it with your friends or leave a comment. Do not hesitate to ask any questions if you have some problems with the code above.

Also you can modify the code above for you needs and fix it for your new WordPress Themes.

Facebook Comments

Leave a Reply

Your email address will not be published. Required fields are marked *