How To Add Facebook Comment Box for Blogger Or Website With Notifications Enabled In Your Profile 2013
Facebook Comment box is very useful plugin Facebook had developed ,
This plugin is embedded in any web site or web log and guests will use their IDs of Facebook, Yahoo, AOL or Hotmail to depart a comment at your website.
I will toke about putting it in blog for now ,and it will work for website ISA.
lets Start:
It is very easy steps
1- Creating a Facebook Application at your Facebook account :
Step 1:
Go to the Facebook Developer Page you should create a new application by clicking the button at the top right.
If you make An application before go to step 2 now .. if you do not you will find button -Register as an Developer- click on it .
A window will appear to you to guide you to the procedures needed to become Facebook developer,
Follow it to end , as it is appear in pictures.
Step 2:
You will find button ( + create New App ) .. Press it .
i. Enter your application name and namespace,input the captcha code and proceed.
ii. On the next page, enter your custom domain name (if you’re using a custom domain) or just blogspot.com (if you’re using blogspot sub domain) in the space provided for App domain.
iii. For App website, enter you blog URL. ( http://www.xyz.com/ or http://xyz.blogspot.com/ ). Be sure it starts with http:// and ends with / as shown in the screenshot below:
Be sure: That you choose Sandbox Mode : Disabled -- to make your App live and visible to all users.
iv. Scroll down a bit and hit the Save Changes button.
Now you’re done with creating your Facebook application but there’s one more thing to do.
On that same page, you should see your application ID. Copy it and save somewhere, you’re gonna be needing it.
Now lets go to your blogger and Finish this mission.
2- Adding the codes to your template :
Log in to your blogger account and click on Template > Edit HTML > Check Expand Widget Template.
i. Press Ctrl + F and search for this code:
- Right in front of this, add the following code:
iii. Now, let’s add the open graph meta tag. Search for this code in your template:
iv. Now here’s the last part of tweaking your template your template to make it display Facebook comment box. The last thing is the iframe to display the comment box where you want. Search for this in your template:
3. Enabling notification for comments on every post :
This is the last part and it’s optional but I recommend it. Enabling this lets you know whenever someone comments on your blog. You get a regular notification on Facebook and you can visit your blog to reply the comment.
- Visit this URL: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
- Be sure to replace YOUR_APP_ID with your real application ID
- On the page that opens, click on settings and add yourself as moderator
- Click on your name when it shows up and save the changes you made. When someone drops a comment on your blog, you should be notified that instant on Facebook.
If this works for you, you can say thank you by sharing on Facebook, hitting the Google +1 button or simply using the comment box. Also, it would be nice of you not to remove the credit link to allow others find this useful widget. If you’re having problems implementing this as well, don’t hesitate to let me know maybe I can be of help.
This plugin is embedded in any web site or web log and guests will use their IDs of Facebook, Yahoo, AOL or Hotmail to depart a comment at your website.
I will toke about putting it in blog for now ,and it will work for website ISA.
lets Start:
It is very easy steps
1- Creating a Facebook Application at your Facebook account :
Step 1:
Go to the Facebook Developer Page you should create a new application by clicking the button at the top right.
If you make An application before go to step 2 now .. if you do not you will find button -Register as an Developer- click on it .
A window will appear to you to guide you to the procedures needed to become Facebook developer,
Follow it to end , as it is appear in pictures.
Step 2:
You will find button ( + create New App ) .. Press it .
i. Enter your application name and namespace,input the captcha code and proceed.
ii. On the next page, enter your custom domain name (if you’re using a custom domain) or just blogspot.com (if you’re using blogspot sub domain) in the space provided for App domain.
iii. For App website, enter you blog URL. ( http://www.xyz.com/ or http://xyz.blogspot.com/ ). Be sure it starts with http:// and ends with / as shown in the screenshot below:
Be sure: That you choose Sandbox Mode : Disabled -- to make your App live and visible to all users.
iv. Scroll down a bit and hit the Save Changes button.
Now you’re done with creating your Facebook application but there’s one more thing to do.
On that same page, you should see your application ID. Copy it and save somewhere, you’re gonna be needing it.
Now lets go to your blogger and Finish this mission.
2- Adding the codes to your template :
Log in to your blogger account and click on Template > Edit HTML > Check Expand Widget Template.
i. Press Ctrl + F and search for this code:
<html
This should be found on the second or third line of your template.- Right in front of this, add the following code:
xmlns:fb='http://www.facebook.com/2008/fbml'
-Be sure to have a space before and after this code. Take a look at the example below:
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog…………..2005/gml/expr' >
ii. Press CTRL + F on your keyboard and search for this:
<body>
If you can’t find this, search for something similar. You should search for this instead:
<body expr:class='"loading" + data:blog.mobileClass'>
In the next line, paste this code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
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>
Be sure to replace YOUR APPLICATION ID HERE with the application ID I asked you to copy earlier, remember?<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
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>
iii. Now, let’s add the open graph meta tag. Search for this code in your template:
</head>
In the line above it, paste this piece of code:
<meta property="fb:app_id" content="YOUR_APP_ID" />
Replace YOUR_APP_ID with that same application ID you previously copied.iv. Now here’s the last part of tweaking your template your template to make it display Facebook comment box. The last thing is the iframe to display the comment box where you want. Search for this in your template:
<data:post.body/>
If you’re using a magazine style template, you’re likely to have more
than one occurrence of this. Using the wrong one won’t make the comment
show up. If you’re not sure about which one to use, search for this
instead:
<div class='post-footer-line post-footer-line-1'>
In the line just below it, paste this code:
<b:if cond='data:blog.pageType == "item"'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='http://www.doncaprio.com/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
<div align='right'><a href='http://www.doncaprio.com/2011/08/facebook-comment-box-for-blogger.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div>
</div>
</p>
</b:if>
Save your template, the Facebook comment form should now appear. If it looks rather small, replace width=’450′ with width=’600′. This increases the width from 450px to 600px.<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='http://www.doncaprio.com/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
<div align='right'><a href='http://www.doncaprio.com/2011/08/facebook-comment-box-for-blogger.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div>
</div>
</p>
</b:if>
3. Enabling notification for comments on every post :
This is the last part and it’s optional but I recommend it. Enabling this lets you know whenever someone comments on your blog. You get a regular notification on Facebook and you can visit your blog to reply the comment.
- Visit this URL: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
- Be sure to replace YOUR_APP_ID with your real application ID
- On the page that opens, click on settings and add yourself as moderator
- Click on your name when it shows up and save the changes you made. When someone drops a comment on your blog, you should be notified that instant on Facebook.
If this works for you, you can say thank you by sharing on Facebook, hitting the Google +1 button or simply using the comment box. Also, it would be nice of you not to remove the credit link to allow others find this useful widget. If you’re having problems implementing this as well, don’t hesitate to let me know maybe I can be of help.
