In Focus

Integrating Facebook API in Your Website

This article demonstrates how to integrate the Facebook API into your website.

Hello Geeks!

Introduction

As we all know, social media plays a vital role in taking any firm/organization from foot to neck. This simple principle is universal and applicable to each and every type of organization. But when it comes to eCommerce then.

I don't think even I need to explain this in terms as this simple graph says it all. So before going further have a look at this graph.

Getting Started

Since you understad what a social network can do for you, in return it takes nothing from you, yeah I said "nothing".

Just follow these simple steps to get started.

  • First of all visit this official link of the Facebook AppGuide:
https://developers.facebook.com/docs/app-events/best-practices
  • Look for the My Apps Option in the header, as show below:

  • Click on the My Apps Options and then on "Add a New App" My Apps -> Add a New App.

  • After clicking on "Add a New App",  you will get something like the following:


Actually, this is an option window that contains 4 options. Just choose any one and proceed further quickly.
(In my case I am going with the "Website" option.)
  • Select any and move quickly

  • As you click on any of that four available options you will ext get this window, requiring some details about your website, such as:
SiteURL
Mobile URL
  

And then, click on "Next"

 

  • As you click on "Next" you will get a similar window, shown below. This screen will share the First Step, "Setup SDK" with you and share other.


So in the beginning you are here:



Then you will get a code snippet, just paste that snippet into your website whereever you want to integrate that Facebook content.
Here's a snippet.
  1. <script>  
  2.   window.fbAsyncInit = function() {  
  3.     FB.init({  
  4.       appId      : '564784100291609',  
  5.       xfbml      : true,  
  6.       version    : 'v2.3'  
  7.     });  
  8.   };  
  9.   
  10.   (function(d, s, id){  
  11.      var js, fjs = d.getElementsByTagName(s)[0];  
  12.      if (d.getElementById(id)) {return;}  
  13.      js = d.createElement(s); js.id = id;  
  14.      js.src = "//connect.facebook.net/en_US/sdk.js";  
  15.      fjs.parentNode.insertBefore(js, fjs);  
  16.    }(document, 'script''facebook-jssdk'));  
  17. </script>  
  • The very second step is App Configuration. (You don't need to do anything in that step, just move forward for the next.)

  • Then here comes the next step, "Test". In this step you too check whether all that is working or not. They call it "Test Your Facebook Integration".
For that just follow the words written below



That's all guys, it's over.



I hope you guys will love that.

Stay tuned for Twitter and some other social networking integrations. Until then keep sharing and happy learnig.