Wednesday, 11 February 2015

How to integrate Facebook open Graph API in Website

How to integrate Facebook open Graph API in Website

In April of 2010, Facebook launched Open Graph API. Open Graph API let's you get website information  & post on facebook.com. It helps to share your website information globally through facebook.com.

When it was launched within a week around 50,000 website integrate the Facebook Open Graph API. With use of Open Graph API, we can published/post/submit your website's page/article/video on facebook.com and your content will start displaying in Facebook.com


To implement Open Graph API in website, there are two steps and are following.

Step No 1
How to create App in Facebook:
A. Login Facebook, go to the Developers page (https://developers.facebook.com/).
B. Click "Set up a new app" button on the top right corner.
C. Give a name to your new App, "agree" to Facebook terms and conditions, then click on "Create app".
D. Go to Web Site tab, fill up Site URL and Site Domain.
E. Note down the "Application ID" which we will use in Meta Tags.


Step No 2
Following are Different Meta Tags of Open Graph API which you can add in your Website
<!-- Begin Open Graph metadata -->
<meta content='508427595967225' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='http://www.web-technology-experts-notes.in/2014/12/facebook-comments-integration-in-website.html' property='og:url'/>
<meta content='Facebook comments Integration in website' property='og:title'/>
<meta content='article' property='og:type'/>
<meta content='Web Technology Experts Notes' property='og:site_name'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihwY-LposUHaskiINc04SYtH2iOmaZoqTTtxnZIK3eDejPPH2V_h1MiBT6Mo9yCzKY9tWfbv0vkuR6g9sFZYmTsMUN_xSatoMayqDAwWS6BxoemOkV05fIyFCo3OsPhTsgPuz-ZbRr52A0/s72-c/facebook+comment+box.png' property='og:image'/>
<meta content='The Comments box lets people comment on your site with Facebok. Add Facebook comments box for you blogger, Generic website, Ecommerce website etc.in few seconds with dynamic URL.' property='og:description'/>
<!-- End Open Graph metadata -->



Want to check your Meta tags on facebook.com:
https://developers.facebook.com/tools/debug/ (This need Fb Login)

Need More info, check offical facebook page:
https://developers.facebook.com/docs/opengraph/getting-started