top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Custom Social Share Button

+1 vote
1,607 views

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)
Social Buttons

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.

posted May 26, 2014 by Salil Agrawal

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

Sometime back I have published the article for custom social share button, now we can extend it for the gmail also.

Motive of the share button

The gmail 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.

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

Sample Code

<a id="ref_gm" href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to&
su='.$title.'&
body='.$gmail_body.'&
ui=2&tf=1&pli=1?"
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600');return false;">
<img src="<Your Image>" alt="Gmail Share Button"/></a>

Above code is a working code and running at QueryHome.

READ MORE
Many a times user open our website on Mobile Device and we want to provide a mechanism by which user can share your post his/her whatsapp network.

Here is the code/steps for the whatsapp sharing for your website

Step 1: Check if it is mobile device

Step 2: If it is mobile device add the following html code

<a href="whatsapp://send?text=Your Test along with your URL">

    <img src="Whats App Sharing Image" alt="Whatsapp Share Button" title="Share on Whatsapp">

</a>

And you are done.

 

Above code is working on QueryHome
READ MORE
...