Facebook comment box for Blogger with notifications Enabled


Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda? 

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding
2. Tidak Tahu Computer Programming
3. Tidak Paham Bahasa Pemrograman Android
4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...
Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan
2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan
3. Susun blok-blok kode programnya, dan
4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?
Mudah kok, karena sudah hadir untuk Anda Di Sini :


Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 
The Facebook comment box is one of most popular comment boxes used by webmasters in these days. In 2009, Facebook developers introduced their best social plugin knowing as “Facebook comment box’. This Facebook plugin can be embedded in any website or blog and visitors will use their Facebook account ID, Yahoo, AOL or Hotmail account to drop comments.



Comments
Websites or blogs which use the Facebook comment box receive many advantages, especially engaging people to comment on and share it on Facebook. You can see “Post on Facebook” option has appeared on comment box and whenever anyone comments using their Facebook account, the message and link to commented site will be posted on the timeline of visitor. If there are many third party commenting plugins, most of them ask the username and Password before publishing the comments. Though we all know about Facebook, it has huge registered members and other thing peoples who don’t have a Facebook account can comment using other accounts mentioned in above. One thing you should know as you want to learn more about Facebook comment box: Facebook comment plugin has no SEO value. It uses iframe tag. So search engines like Google won’t crawl the content in the comment box. If you use  a regular comment box such as default blogger comment form and get more comments with additional  keywords, it’s  not worrying if you haven’t optimized your articles with keywords. Readers would do this SEO task for you. Because keywords are words/phrases what people are typing. This is something Facebook lacks, exclusive of extra traffic you get from Facebook.

A few months ago I wrote a post about adding the Facebook comment box without notifications. It was easier to embed Facebook comment box than Vkontakte comment form and  Disqus comment box. So here in this tutorial I will explain you how to add Facebook comment box with the notification feature enabled to blogger. First of all we should create a Facebook application for your blog.


Create a Facebook Application


Step 1: Go to Facebook developer page and click on “Create New App” button at the top right.


Create-New-App


Step 2: Now enter the Application name ( title of the app ) and its  Namespace (Link for your app). Click on continue button and fill out the captcha and proceed.


Application-name

Step 3: Now you’re half done. On the next page, type your base domain . Enter custom domain ( If you’re using a custom domain) or just blogspot.com( if you’re using .blogspot sub domain) in the space provided to the app domain under Basic info.

Click on “Website with Facebook Login” tab and type your blog address ( http://www.problogtricks.com/ or http://bestlodge.blogspot.com/ ). Make sure you have typed your blog’s URL starting with http:// and ending with / as shown in below screenshot.


App-Domains
Click Image to Enlarge

Step 4: Now scroll down the page and click on save settings button. You’re done with creating the application. On the same page you can see your Facebook application ID and its Secret id. Copy them and save on your computer.

Now let’s see how to add Facebook comment box with notification enabled in Blogger.


Add Facebook comment box code to the template


Step 1: Sign in to your Blogger account and go to Template.
Step 2:  First of all, get a copy of your current template. It's most prominent action which you should do before doing any change in template. In case if you get any wrong in the template, it’s difficult to recover them.
Step 3: Click on “Edit HTML” button and find below code in your template.
<html
Step 4: Now in front of the above code, paste below code directly inside the <html> tag. 
xmlns:fb='http://www.facebook.com/2008/fbml'
Be sure you have added a space before and after the above code. See below example.


<html  xmlns:fb='http://www.facebook.com/2008/fbml'  b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' ........ xmlns:expr='http://www.google.com/2005/gml/expr'>

Step 5: Use Ctrl + F shortcut keys and find below code in your template.
</head>
Now paste below block of code just before of the above code.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Pro Blog Tricks' property='og:site_name'/>
<meta content='Image-Link-Of-Blog-Logo' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/problogtricks' property='fb:admins'/>
<meta content='article' property='og:type'/>

Customization

  • Replace your blog title or name instead of Pro Blog Tricks
  • Add your blog's logo link with Image-Link-Of-Blog-Logo.This logo will appear next to your post titles on Facebook profiles of visitors.
  • Replace YOUR_APP_ID with the App id that i asked you to save.
  • http://www.facebook.com/problogtricks is the link of  Facebook fan page.Just replace with your profile page or like page URL.


Step 6: Next find below code using above shortcut keys.
<body>
If you can’t find this code, it should be a similar code like below one. 
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
After one of above codes in your template,paste below code.


<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY 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>

Make sure that you have changed the MY APPLICATION ID HERE with your Application ID.

Step 7: Now here’s the last part of this tutorial to add the Facebook comment box code to display it on the blog. We can add comment box manually on each page. But when it comes to real blogging, it’s difficult and boring work to insert the comment box code in every page. So find below code in you template to add the iframe to display the comment box below of each post pages.


<data:post.body/>

or

<p><data:post.body/></p>

If you’re using a magazine type template like PBT, you will encounter two or three similar codes. Using the wrong <data:post.body/> code will not show up the Facebook comment box ( second code line worked me). If you’re not sure which code should be used, search for below code in your template.


<div class='post-footer-line post-footer-line-1'>

or

<p class='post-footer-line post-footer-line-1'>

Now paste below piece of HTML code just below of one of the above codes.


<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p align='center'>
<div style='background: #CCCCCC;'>
  <div style="text-align:center;font-family:Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;color:#2578C0;font-size:32px;"><strong >Spread out Your Opinions</strong></div>
<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.problogtricks.com/2013/09/facebook-comment-box-for-blogger-with-notifications.html' target='blank'><small>[Comment Box for Blogger]</small></a></div>
</div>
</p>
</b:if>
</b:if>



  • If you do not want to display the facebook comment box in static pages,remove above first and last two lines.
  • Do you want to display Facebook comment box in homepage and archive pages ?So remove above highlighted codes from above block code.
  • Change #CCCCCC with the background color of comment box area.
  • Set the width of Facebook comment box.If you want to change the width from 450px to 500px,just change 450.
  • Change the title by replacing the Spread out Your Opinions.


Enabling the Notification for comments


This is the last work you do with Facebook application. We created Facebook application, not for anything, track the comments and shares on the Facebook. As my previous post adding Facebook comment box without notifications, you just needed to do is adding the piece of code to blog. But here we want to add the comment box which has enabled the notifications. So now let’s see how to enable the notification for every comment.

Visit this URL:  https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID

Replace YOUR_APP_ID with your application ID.

On that page, click on settings and add yourself as a moderator.

Add-moderators

That's all.Now you'll receive comment notifications as regular notifications you get.Tell a friend to comment on your site and then log in to your Facebook account.You will see there is a notification that informs your friend commented on your blog.

Need Help... ?


Did you check our demo ? Have any problem ? Don't hesitate,ask me anything by commenting below.

Would you like our tutorial ? So spread this tutorial among your friends in Facebook,Google plus and Twitter.Stay blessed friends!

Pengelola Blog : ABDUL WAHAB

Judul : Facebook comment box for Blogger with notifications Enabled
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang Facebook comment box for Blogger with notifications Enabled
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
http://kejutaninternet.blogspot.com/2013/09/facebook-comment-box-for-blogger-with.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait

Previous
Next Post »