HomeDefault

Facebook Twitter and Google plus share and Like Button

Like Tweet Pin it Share Share Email

Now a days in very busy life and in internet edge, social website play a very important role in friendship and social work and sharing views and idea, wishing Birthday and Anniversary.

 

Social websites now provide various API that can be implemented in websites(personal or commercial), It will provide live-streaming, sharing links etc.

 

Facebook twitter and Google plus along with LinkedIn provide us like/share button API, by implementing it, it will show a button on your webpage, the Like button lets a user share the page content with friends on social websites. When the user clicks the Like button on site, a related story appears in the user’s friends’ News Feed with a link back to website (from where a user clicked button).

 

This means when a user clicks a Like button on your page, a connection is made between webpage page and the user.

 

Facebook Like

There are two ways to Facebook Like button implementations.One is XFBML and second one is Iframe.

The XFBML dynamically re-sizes button’s height according to whether there are profile pictures to display,gives the ability to know in real time when a user clicks the Like button, and it gives the user the ability to add an optional comment to the like.

 
XFBML
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
 
IFRAME
<iframe src="//www.facebook.com/plugins/like.php?href=<?=urlencode($yourpageurl)?>&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

 

Twitter Share

<a href="https://twitter.com/share" data-url="<?=$yourpageurl?>" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

 

Google plus Share

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<div class="g-plusone" data-size="medium"></div>

These are the basic code, There are so many options available on these button, a compete implementation guide available here.