For Facebook Custom share button.
<a id="ref_fb" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title;?>&p[summary]=<?php echo $description;?>&p[url]=<?php echo urlencode($share_url);?>&
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);?>&
url=<?php echo urlencode($share_url);?>&
is_video=false&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);?>&caption=<?php echo $description;?>&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