Custom Social Share Buttons

Now a days social media is important part of web development and brand promotions. Social share buttons are widely used things on a web site, while developing each site we concentrate how we can use all buttons,icons images are very close to the template.

This article will help to create custom social share buttons for Facebook, Google Plus, Pinterest, Tumblr , Twitter and Linked In.

For Facebook share button.

<a id="ref_fb"  href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $description;?>&amp;p[url]=<?php echo urlencode($share_url);?>&amp;
p[images][0]=<?php echo $image_url;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600'); return false;"><img src="your custom facebook share button image" alt=""/></a>

Twitter Share Button

<a id="ref_tw" href="http://twitter.com/home?status=<?php echo $title; ?>+<?php echo urlencode($share_url);?>"  onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600');return false;"><img src="your custom twitter share button image" alt=""/></a>

Google Plus share button

<a id="ref_gp" href="https://plus.google.com/share?url=<?php echo urlencode($share_url);?>"
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600');return false"><img src="your custom gplus share button image" alt=""/></a>

Pinterest share button.

<a id="ref_pr" href="http://pinterest.com/pin/create/bookmarklet/?media=<?php echo urlencode($share_image);?>&amp;
url=<?php echo urlencode($share_url);?>&amp;
is_video=false&amp;description=<?php echo $description;?>"
onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600');return false;"><img src="your custom pin share button image" alt=""/></a>

Linked In share button.

<a id="ref_lkd" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode($share_url);?>&title=<?php echo strip_tags($title); ?>&source=<?php echo urlencode($siteurl);?>"
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600');return false;"><img src="your custom pin share button image" alt=""/></a>

Tumblr share button.

<a id="ref_tum" href="http://www.tumblr.com/share/photo?source=<?php echo urlencode($share_image);?>&amp;caption=<?php echo $description;?>&amp;clickthru=<?php echo urlencode($share_url);?>"
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600');return false;"><img src="your custom pin share button image" alt=""/></a>

Dynamically reate Social share buttons

var share_url         =    "your url to share" ;
var share_image      =    "your image to share";
//full url not ../images should be http://www.
var title               =    "title";
var description       =    "description";
//title and description should be formatted ie, remove all special char otherwise it may creates errors on social media sites.
var FB_url             =    "http://www.facebook.com/sharer.php?s=100&p[title]="+(title)+"&p[summary]="+description+"&p[url]="+encodeURIComponent(share_url)+"&p[images][0]="+(share_image);
var GP_url            =    "https://plus.google.com/share?url="+encodeURIComponent(share_url);
var TW_url            =    "http://twitter.com/home?status="+escape(title)+"+"+encodeURIComponent(share_url);
var Pt_url            =    "http://pinterest.com/pin/create/bookmarklet/?media="+encodeURIComponent(share_image)+"&url="+encodeURIComponent(share_url)+"& is_video=false&description="+description;
var TB_url            =    "http://www.tumblr.com/share/photo?source="+encodeURIComponent(share_image)+"&caption="+(description)+"&clickthru="+encodeURIComponent(share_url);
var LK_url            =    "http://www.linkedin.com/shareArticle?mini=true&url="+encodeURIComponent(share_url)+"&title="+(title)+"&source="+encodeURIComponent(siteurl);
jQuery("#ref_fb").attr('href',FB_url);
jQuery("#ref_gp").attr('href',GP_url);
jQuery("#ref_tw").attr('href',TW_url);
jQuery("#ref_pr").attr('href',Pt_url);
jQuery("#ref_tum").attr('href',TB_url);
jQuery("#ref_lkd").attr('href',LK_url);

Note: please make sure to add jquery library in page.