Custom social share buttons are most required 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. In this case the social share icons or like buttons are crazy. They looks same on major site but many sites used custom icons for social share buttons.

Before starting the integration we can check what are the advantages of using custom social share buttons on your websites.

• The social share button so close to your template design.
• There is no load of external JS files for your custom share button, It will improve the page loading speed.
• Easy integration and no loading delay.
• Custom social share button gives an option to share the dynamic contents.(not from Open graph protocols).

custom social share buttons

This article will help to create custom social share buttons for Facebook, Google Plus, Pinterest, Tumblr , Twitter and Linked In. And also describe how you can share dynamically generated data to these social media sites.

For Facebook Custom 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>

Custom 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>

Custom 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>

Custom 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>

Custom 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>

Custom 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>

Make sure all the title description are properly formatted ie, special chars should be removed and well formatted content. Also the urls should encoded as per the standards otherwise you may get errors from social media sites.

Ok, Lets check how we can change these share buttons details dynamically like many websites, shopping cart sites have different product images on a single page. So changing those images via Ajax will not work with normal share buttons(This will read only open graph or given urls data). This case you can use this method.

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);

Make sure you page must includes any jQuery library.

While dynamically sending data through the social media sites using custom social share buttons the Google plus will not take image and other info, it required  url to parse.

Hope this article will help you guys to fix the dynamically changing content sharing on social media with custom social share buttons.