How to Add Facebook Like Share Buttons and Facebook Page to Your WebPage

0
228
views

One of the great way to make your website visitors to like and share your content with their Facebook and also even you can make them follow your Facebook fan Page. This will greatly help in developing your Audience network and reaching out more people.

How to Add Facebook Like and Share Buttons

First you need to go to
https://developers.facebook.com/docs/plugins/like-button

There you will find options like Like Button Configurator, Code Example, Settings etc.,
Click on the Like Button Configurator It will display something like that in the image

Mention the Page URL which needs to be liked in the field URL to Like. If you want to mention the width of the button specify it in the width field. Choose the Layout Action Type and button size. If you want to include the share button along with Like button then be sure to check the checkbox.

and then click the Get Code button
Code will be something like this
1. In the Fist step of this you need to choose your application. If you haven’t created any application then goto
https://developers.facebook.com/ and create one app (It’s very easy to create!).

2. In the second step you need to initialize Javascript SDK code before you use plugin anywhere in your application

Include the JavaScript SDK on your page once, ideally right after the openingtag.

<script>
<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/sdk.js#xfbml=1&version=v2.10&appId=your-app-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

3. In the 3rd step Place this code wherever you want the plugin to appear on your page.


<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

This is one of the standard way of doing it.
You can use many other different methods to design your button and also display counter along with your button.

How to Add Facebook Fan Page

You can even add the Facebook Fan Page in the same way
First You need to goto
https://developers.facebook.com/docs/plugins/page-plugin
Configure settings and click on the Get Code button

There are two options available you can either choose Javascript SDK or Iframe both of them are fine.
Copy and the Paste the code in your website where you want to appear your Facebook Fan Page Box.

Include the JavaScript SDK on your page once, ideally right after the openingtag.

<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/sdk.js#xfbml=1&version=v2.10&appId=Your app Id";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Place this code wherever you want the plugin to appear on your page.

<div class="fb-page" data-href="https://www.facebook.com/FB-Page-Id" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/FB-Page-Id" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/FB-Page-Id">Indianviralnews</a></blockquote></div>