📜 ⬆️ ⬇️

Socialize the site with Facebook

image Inspired by the communication with Andrew Bosworth on RHS ++, I decided to embody the idea of ​​Facebook on the socialization of everything on the Internet in my project www.bitrixonrails.ru , first of all by adding a comment system. I wanted to tell about its implementation and to know your opinion about its usefulness / convenience.

Intuition suggested that integration with Facebook should not take a lot of time - the way it turned out.

Implementation


Conveniently, for developers , the possible integration options with time costs and project benefits are described in sufficient detail .
I especially liked this sign:
image


Created an application (Application), passing a simple wizard :
image

In the second step, I downloaded the file and uploaded it to the server, Facebook found it and as a result I received the APPLICATION_ID.

Next, in the local sandbox, I received a code that connects the Facebook API on a page, which then allows you to use Facebook tags (called collectively XFBML, with the prefix 'fb:'). These tags display authorized user profile data, a comment form, and other elements. Read more about XFBML in the documentation .
This is what this code looks like:
< div id ="fb-root" ></ div >
< script >
window.fbAsyncInit = function () {
FB.init({
appId: "YOUR_APPLICATION_ID" ,
xfbml: true ,
cookie: true ,
status: true
});
};
( function () {
var e = document .createElement( 'script' ); e.async = true ;
e.src = document .location.protocol + '//connect.facebook.net/en_US/all.js' ;
document .getElementById( 'fb-root' ).appendChild(e);
}());
</ script >


* This source code was highlighted with Source Code Highlighter .

')
To connect the Russian language, you need to use the ru_RU locale. To do this, simply replace the line '//connect.facebook.net/en_US/all.js' with '//connect.facebook.net/ru_RU/all.js'.

To add a form and a list of comments, it remains to add the following tags to the material output template:
< fb:comments ></ fb:comments >

* This source code was highlighted with Source Code Highlighter .


It looks like this as a result:
image


The most interesting option is, of course, the “Add a comment to my Facebook profile” option, which allows all your friends to see your comments and, if they wish, join the discussion. For the Huffington Post, this worked perfectly. Here is how my comment looks in Facebook itself:
image


In terms of time it turned out something like 2 hours.

Such a commenting system is already working on the website “Private Correspondent” , as described by both Bosworth and Ivan Zassoursky, but your opinion about such a commenting system for IT topics is interesting.

Source: https://habr.com/ru/post/91327/


All Articles