AndroidCSS

Android material design Programming Blog

How to add social share buttons to each post in wordpress blog

Without any plugins adding social share buttons to all posts in WordPress blog requires little HTML and CSS code. Let’s see how to do that.

Most of the blogger use plugins to add social share buttons on their WordPress blog but the problem with some of those widgets is, it adds extra burden on sites speed.

By pasting some little HTML and CSS code on your WordPress blog it is possible to have social sharing buttons on each posts. I integrated top 5 social media’s namely Facebook, Google Plus, twitter, LinkedIn and Pinterest in my code and by having little knowledge on HTML and CSS you can alter code to add other social media too.

For social media icons in our social share buttons i used icon font called Font-awesome and today most of themes support Font-awesome for basic icons. What if my wordpress theme does not support Font-awesome? Will see how to fix it later. For Now, Let’s see how code looks and where should i paste those code.

Social Share buttons: Adding HTML

Login to your WordPress Admin panel and navigate to Appearence → Editor. With editor opened, on right side click on content-single.php. With content-single.php file opened search for h1 tag and copy paste below code after h1 tag and save changes. Try experimenting by placing below code at different positions. For example, i placed my code one at top right of the article and one at below the article as you can see in same post.

Even you can add this code to all posts in your home page also, for that you need to edit content.php. For reference, See my home page.

<div class="article-share article-share-right">
<ul>
<li><a class="fa fa-facebook" title="share to facebook" href="http://facebook.com/sharer.php?u=<?php the_permalink(); ?>" target="_blank"><span>facebook</span></a></li>
<li><a class="fa fa-google-plus" title="share to google plus" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"><span>google plus</span></a></li>
<li><a class="fa fa-linkedin" title="share to linkedin" href="http://www.linkedin.com/shareArticle?url=<?php the_permalink(); ?>" target="_blank"><span>linkedin</span></a></li>
<li><a class="fa fa-twitter" title="share to twitter" href="http://twitter.com/intent/tweet?status=How to do <?php the_title(); ?>?. Tutorial link: <?php the_permalink(); ?>" target="_blank"><span>twitter</span></a></li>
<li><a class="fa fa-pinterest" title="share to pinterest" href="https://www.pinterest.com/pin/create/extension/?url=<?php the_permalink(); ?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID)); ?>&description=<?php the_title(); ?>" target="_blank"><span>pinterest</span></a></li>
</ul>
</div>
<div class="clear"></div>

Social Share buttons: Adding CSS

With editor opened, on right side click on style.css(scroll to bottom). With style.css file opened copy paste below css code at the end of style.css and save changes.


.article-share{ display:inline-block; margin-bottom:10px;text-align:center;} 

.article-share-right{float:right;}

.article-share-center{display:block!important;margin-top:20px!important;}

.article-share a{font-size:20px; width:40px; cursor:pointer; border-radius:50px;color:#FFF;background-color:#CCC;text-align:center;padding-top:10px;padding-bottom:10px;text-decoration:none;} 

.article-share ul {margin:0;padding:0;}

.article-share ul li
{list-style:none;display:inline-block;margin-left:2px!important;}

.article-share a span{display:none;} 

.fa-facebook:hover{background-color:#3b5998!important;}

.fa-google-plus:hover{background-color:#dd4b39!important;}

.fa-linkedin:hover{background-color:#007bb5!important;}

.fa-twitter:hover{background-color:#55acee!important;}

.fa-pinterest:hover{background-color:#cb2027!important;}

.fa-rss:hover{background-color:#ff6600!important;}

Now, go to any of your post to see the result. If you don’t see any social media icons means your theme does not support Font-awesome icon fonts. Here is the method to add Font-awesome to your theme.

With editor opened click on Theme Header(header.php) at right menu and find for head tag(<head>), below that tag copy paste this code and save changes.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Re run your post now, you like to see new results with our social share buttons.

2 Comments

Add yours

  1. How to show as popup when clicked?

    • add below code to onclick attribute of your anchor tag.

      window.open('your url','popup','width=500,height=400'); return false;

      For Example:
      Above anchor tag inside li element can be redefined as

      <a class="fa fa-facebook" title="share to facebook" onclick="window.open('http://facebook.com/sharer.php?u=<?php the_permalink(); ?>','popup','width=500,height=400'); return false;" target="_blank"><span>facebook</span></a>
      

Leave a Reply

Your email address will not be published.

*

About | Policy | Disclaimer

Creative Commons LicenceUp ↑