Custom Social Share Button

Question

While working with QueryHome we were looking how we can have custom share button for Facebook, LinkedIn, Twitter and Google+ with the following key target in our mind -

• The social share button should be flexible enough to have our own design.
• There should no load of external JS files for your custom share button, to avoid the delay in page loading.
• Should be Easy for integration.
• Custom social share button gives an option to share the dynamic contents.(avoid Open graph protocols)

Sample Buttons (you can change them as per your need)

Code

Facebook

<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 button" alt="Facebook Custom Image"/></a>

Twitter

<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 button" alt="Twitter Custom Image"/></a>

Google+

<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 button" alt="G+ Custom Button"/></a>

LinkedIn

<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 linkedIn button image" alt="LinkedIn Custom Button"/></a>

Above code is a working code and running at QueryHome.