Custom social share for wordpress posts

Today, i am going to introduce a basic but very important article on Social Share for social networks. This functionality can increase your website traffic and can make your site popular over the internet, i am talking about Google Plus, Facebook, Twitter etc.These sites are very useful to collect page impression and traffic.

So being a WordPress developer,I created many more websites on WordPress and use many more ready made plugins for social share.

Sometime they are useful and sometime they are not useful or i can say in other word they does not fulfill our project requirement.

Generally ready made plugins work on WordPress single post page or post detail page or in technically single.php page .

They generally  do not work on multiple posts rendering page  where many posts are showing one by one at that time if we use ready made plugin then they share the right post but they do not take right post featured image or post thumbnail .

So to get rid of this problem i  find out a very simple and good solution.

Now you just need to follow some simple steps for your blog.There are WordPress theme file that need to be updated.

  • Functions.php
  • Style.css
  • Header.php

Now open functions.php of your current running theme and past this code.

function nr_create_social_share_buttons() {


// Get current page URL 
$nrURL = urlencode(get_permalink());

// Get current page title
$nrTitle = str_replace( ' ', '%20', get_the_title());

// Get Post Thumbnail for sharing
$nrThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( ), 'full' );

$twitterUrl = ''.$nrTitle.'&url='.$nrURL.'&via=nrtechwebsolution';
$facebookUrl = ''.$nrURL;
$googleUrl = ''.$nrURL;	
$linkedInUrl = ''.$nrUrl.'&title='.$nrTitle;		
$pinterestUrl = ''.$nrURL.'&media='.$nrThumbnail[0].'&description='.$nrTitle;

$content .= '
'; $content .= '
Twitter'; $content .= 'Facebook'; $content .= 'Google+'; $content .= 'LinkedIn'; $content .= 'Pin It'; $content .= '
'; return $content; } /*Get post thumbnail outside the loop*/ function get_thumb_outside_loop(){ $post_id = get_queried_object_id(); if ( has_post_thumbnail( $post_id ) ) : $post_image_array = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), 'thumbnail' ); return $image = $post_image_array[0]; }

Now open your theme style.css file and copy and paste this css code this code will help to style the sharing buttons.

.nr-link { padding: 2px 8px 4px 8px !important; color: white; font-size: 12px; border-radius: 4px; margin-right: 2px; cursor: pointer; -moz-background-clip: padding; -webkit-background-clip: padding-box; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); margin-top: 2px; display: inline-block;}
.nr-link:hover,.nr-link:active { color: white;}
.nr-twitter { background: #00aced;}
.nr-twitter:hover,.nr-twitter:active { background: #0084b4;}
.nr-facebook { background: #3B5997;}
.nr-facebook:hover,.nr-facebook:active { background: #2d4372;}
.nr-googleplus { background: #D64937;}
.nr-googleplus:hover,.nr-googleplus:active { background: #b53525;}
.nr-pinterest { background: #bd081c;}
.nr-pinterest:hover,.nr-pinterest:active { background: #bd081c;}
.nr-linkedin { background: #0074A1;}
.nr-linkedin:hover,.nr-linkedin:active { background: #006288;}
.nr-social { margin: 0px 0px 25px 0px; -webkit-font-smoothing: antialiased; font-size: 12px; display:block; float:left;}
.nr-content .dataTable tr .sorting_1{ vertical-align:top;}
.nr-content .dataTable .listing_title{ padding-top:10px;}

Now last step to finish our small but effective functionality.
Just open header.php and add some meta tags manually.I will explain why we are adding manually these meta tags but for this time i use manually way.
Please note these tags should be placed in head tag.


This was the last step.Our code is ready but how to add use this code in loop page where many posts are showing one by one.

Usage :I am assuming that your applying on WordPress standard posts loop.Please use very first function in WordPress standard loop.
The function will generate the sharing can add , as i am using this function in standard loop.


if ( have_posts() ) {
while ( have_posts() ) {
echo nr_create_social_share_buttons();		
 } // end while
} // end if

Good now we finished our task, its time see the changes.
If you have any doubt or query feel free to ask here i am always with you.


Leave a Reply

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