Tweet
Facebook comment box - New Version
The new version tutorial
------------------------------
(Full: Comments-box + Like-button + Language)
First, set up a new application:
1. Go to: http://www.facebook.com/developers
2. Click on the + Set Up New Application button (at the top right of the page)
3. Type your Application Name (example: Mysite-Name Comments) > select Agree > click on Create Application
4. Go to the Connect tab (on the left tabs-list)
5. Enter your site url with an ending slash in Connect URL and click on Save Changes (for example: http://mysitedomainname.com/)
6. You will see your Application ID number (below your app API & Secret)
7. It will take between 2 to 20 minutes until it will be ready to use with.
-----------------------------------------------------------------------------------------------------------------------------------------
If you update from the old comments-box version so:
1. Remove:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
2. Remove:
<script type="text/javascript">
FB.init("123456789000000000","/xd_receiver.htm");
</script>
3. Then you just stay with your <fb:comments> tag, and the xmlns:fb="http://www.facebook.com/2008/fbml".
4. Follow the steps for the new version below!
-----------------------------------------------------------------------------------------------------------------------------------------
The new version setup steps:
1. Add this attribute to your <html> tag:
xmlns:fb="http://www.facebook.com/2008/fbml"
so in the end your <html> tag will look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
2. Add this code right after the <body> tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Change 'YOUR APP ID' with your application ID number, not the API like was before in the old version.
3. Drop your <fb:comments xid="xxxx" url="http://yourdomainname.com/your-page-name"></fb:comments> tag where you want in your page.
(but it must to be somewhere after (below it, not need to be right after) the code in step#2, and not before it)
4. THE ATTRIBUTES
Go here and check all the attributes you can use.
XID: You better use the xid attribute:
1. Otherwise if you will make a change to your page url,
then all the comments that where on that page will be gone.
2. This is the only way you can add 2+ coments-boxes on the same page for individual items.
3. This is the only way you can show the same comments-box on 2+ different pages.
Because of all these reasons it's kind of making the XID as a "must" attribute, so go and add it!
URL: You better use the url attribute,
otherwise visitors who will click on the link from the post on the facebook live stream,
they may be redirected to the wrong page.
Let's say if you got a website with 2 pages "home" and "news",
then you present the latest news article from the 'news' page on your 'home' page,
and you let visitors to comment about that article from the 'home' page too,
then if you didn't use the right url with the url attribute,
your visitors will be directed to the 'home' page
and not to the specific news article page they friend commented on.
and just the same thing will happen if a visitor click on the Like button that come with the comments-box.
so this attribute helps to set correct the comments-box & the Like button that comes with it.
TITLE: use the title attribute so -
when a visitor post a comment and that comment will show up on the visitor facebook profile page,
then It will present that the comment posted in the page/article with that title you specified in the attribute.
-----------------------------------------------------------------------------------------------------------------------------------------
Set or remove the Like botton:
(that comes with the comments-box above it)
Set the Like button - Open Graph protocol meta-tags:
For making the Like button to present your site content (the one that the visitor liked),
you will need to add some new facebook meta-tags called Open Graph
From this page:
To customize how your site shows up when users share your page with the Like button, you can add meta data to your web pages:
• og:title - The title of your page; if not specified, the title element will be used.
• og:site_name - The name of your web site, e.g., "CNN" or "IMDb".
• og:image - The URL of the best picture for this page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.
For example if you are creating a page about the movie 'The Rock' you would include this meta data:
<meta property="og:title" content="The Rock"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
Not a must, but you can also add these 2 tags to let you admin the pages:
<meta property="fb:app_id" content="YOUR-APP-ID"/>
<meta property="fb:admins" content="YOUR-FACEBOOK-PROFILE-ID"/>
Change YOUR-APP-ID with your application ID number.
Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.
Remove (Hide):
To hide the Like botton, you will need to add 2 attributes and create a CSS file.
1. simple="1"
2. css="http://yoursitedomainname.com/fb_comments.css"
<fb:comments xid="xxxx" url="http://yourdomainname.com/your-page-name" simple="1" css="http://yoursitedomainname.com/fb_comments.css"></fb:comments>
in the css file add this style code:
div.like, div.like div {display:none;}
(You can learn more about these and other attributes here)
--------------------------------------------------------------------------
------------------------------
(Full: Comments-box + Like-button + Language)
First, set up a new application:
1. Go to: http://www.facebook.com/developers
2. Click on the + Set Up New Application button (at the top right of the page)
3. Type your Application Name (example: Mysite-Name Comments) > select Agree > click on Create Application
4. Go to the Connect tab (on the left tabs-list)
5. Enter your site url with an ending slash in Connect URL and click on Save Changes (for example: http://mysitedomainname.com/)
6. You will see your Application ID number (below your app API & Secret)
7. It will take between 2 to 20 minutes until it will be ready to use with.
-----------------------------------------------------------------------------------------------------------------------------------------
If you update from the old comments-box version so:
1. Remove:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
2. Remove:
<script type="text/javascript">
FB.init("123456789000000000","/xd_receiver.htm");
</script>
3. Then you just stay with your <fb:comments> tag, and the xmlns:fb="http://www.facebook.com/2008/fbml".
4. Follow the steps for the new version below!
-----------------------------------------------------------------------------------------------------------------------------------------
The new version setup steps:
1. Add this attribute to your <html> tag:
xmlns:fb="http://www.facebook.com/2008/fbml"
so in the end your <html> tag will look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
2. Add this code right after the <body> tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Change 'YOUR APP ID' with your application ID number, not the API like was before in the old version.
3. Drop your <fb:comments xid="xxxx" url="http://yourdomainname.com/your-page-name"></fb:comments> tag where you want in your page.
(but it must to be somewhere after (below it, not need to be right after) the code in step#2, and not before it)
4. THE ATTRIBUTES
Go here and check all the attributes you can use.
XID: You better use the xid attribute:
1. Otherwise if you will make a change to your page url,
then all the comments that where on that page will be gone.
2. This is the only way you can add 2+ coments-boxes on the same page for individual items.
3. This is the only way you can show the same comments-box on 2+ different pages.
Because of all these reasons it's kind of making the XID as a "must" attribute, so go and add it!
URL: You better use the url attribute,
otherwise visitors who will click on the link from the post on the facebook live stream,
they may be redirected to the wrong page.
Let's say if you got a website with 2 pages "home" and "news",
then you present the latest news article from the 'news' page on your 'home' page,
and you let visitors to comment about that article from the 'home' page too,
then if you didn't use the right url with the url attribute,
your visitors will be directed to the 'home' page
and not to the specific news article page they friend commented on.
and just the same thing will happen if a visitor click on the Like button that come with the comments-box.
so this attribute helps to set correct the comments-box & the Like button that comes with it.
TITLE: use the title attribute so -
when a visitor post a comment and that comment will show up on the visitor facebook profile page,
then It will present that the comment posted in the page/article with that title you specified in the attribute.
-----------------------------------------------------------------------------------------------------------------------------------------
Set or remove the Like botton:
(that comes with the comments-box above it)
Set the Like button - Open Graph protocol meta-tags:
For making the Like button to present your site content (the one that the visitor liked),
you will need to add some new facebook meta-tags called Open Graph
From this page:
To customize how your site shows up when users share your page with the Like button, you can add meta data to your web pages:
• og:title - The title of your page; if not specified, the title element will be used.
• og:site_name - The name of your web site, e.g., "CNN" or "IMDb".
• og:image - The URL of the best picture for this page. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.
For example if you are creating a page about the movie 'The Rock' you would include this meta data:
<meta property="og:title" content="The Rock"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
Not a must, but you can also add these 2 tags to let you admin the pages:
<meta property="fb:app_id" content="YOUR-APP-ID"/>
<meta property="fb:admins" content="YOUR-FACEBOOK-PROFILE-ID"/>
Change YOUR-APP-ID with your application ID number.
Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.
Remove (Hide):
To hide the Like botton, you will need to add 2 attributes and create a CSS file.
1. simple="1"
2. css="http://yoursitedomainname.com/fb_comments.css"
<fb:comments xid="xxxx" url="http://yourdomainname.com/your-page-name" simple="1" css="http://yoursitedomainname.com/fb_comments.css"></fb:comments>
in the css file add this style code:
div.like, div.like div {display:none;}
(You can learn more about these and other attributes here)
--------------------------------------------------------------------------
Comment