Integrate Facebook Like Button to your Webpage

Open Source 27 Mar , 2013  

Buffer

fblikeHello guys, If you are planning to create a website, So For SEO purpose, I think Facebook is such a platform now that you can have a huge audience over there… So Integrating Facebook Tools to your website make it very easy to spread all around and it also helps your friends to make it popular… So in This Post I’m gonna show you that how you can Integrate it in very easy and simple way….

So From Following Templates, Choose the type of Like button you want in your page, You may change the APP_ID if you want to do it using your own application, If you can so please change the App Id here :  appId=120807688111247 on 6th line of the code 🙂

 

1. Facebook Like Button

like

 

 

<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&appId=120807688111247";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-width="450" data-show-faces="false"></div>

2. Like Button + Send Button

like

 

 

<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&appId=120807688111247";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div>

3. Like Button + Send Button + Show Faces

like

 

 

 

<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&appId=120807688111247";
  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>

4. Like Button + Count

like

 

 

<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&appId=120807688111247";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

5. Like Button + Count + Send Button

like

 

 

 

<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&appId=120807688111247";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>

6. Like Button + Vertical Count Box

like

 

 

 

<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&appId=120807688111247";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>

7. Like Button + Vertical Count + Send Box

like

 

 

 

 

<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&appId=120807688111247";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-layout="box_count" data-width="450" data-show-faces="false"></div>

So these were the codes for Like buttons, There is a simple Login behind them notice –

<div class=“fb-like” data-send=“true” data-layout=“box_count” data-width=“450” data-show-faces=“false”></div>

In Above code there are number of parameters like data-layout,  data-width, data-show-faces etc..  So You can play with them by changing the value of there parameters … If you face any problem with them please let me know by commenting on below comment box..  Play and Enjoy !

, ,