Search This Blog

How to add Facebook Comments in OSCLASS theme?


How to add Facebook Comments in OSCLASS theme 1
The popularity of Facebook has prompted many website owners to include Facebook comments and Facebook Social plugins on their blogs and websites to allow easier sharing of content and interaction using Facebook. In this post, we'll see how to add Facebook comment in OSCLASS.

Before we start integrating, we need a Facebook App and generate a code from Facebook Developers to integrate it with. I have already blogged about- "How to create Facebook App?" before. So, please refer to this post and come back here. Or you can also watch this short video tutorial.

The process in a nutshell is:
1) Go to https://developers.facebook.com
2) Create Facebook App
3) Get the code
4) Integrate it with OSCLASS


Assuming you have created Facebook App and copied the code, let's proceed. I am using Bender Black theme. It should be the same for most OSCLASS themes.

1. Integrating the first code from Facebook Developer's app.

As per Facebook, we are to integrate the first code after the "<body>" tag as it says -
"Include the JavaScript SDK on your page once, ideally right after the opening <body> tag."
  • Copy the first code from Facebook Developers.
  • Open "header.php" in a text editor.
  • Find the "<body" tag. 
In OSCLASS, it looks like "<body <?php bender_black_body_class(); ?>>"
Paste the first Facebook code right after the end of the line that has "body" in it.

<!-- FB PAGE -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=YOUR APP ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- FB PAGE -->
//Please note: I have replaced the Facebook app id with  "YOUR APP ID" above.
  • Save the "header.php" file.

2. Integrating the second code from Facebook Developer's app.

We would like the Facebook comment box to appear only on item posts. You can decide where you want the Facebook comment box to appear. In this case, I want the Facebook comments to appear right below the item description.
  • Copy the second code from Facebook Developers.
It looks like this:
<div class="fb-comments" data-href="http://your-website.com" data-numposts="5"></div> 
The above code uses the website URL. Instead of the website URL, we would want the "Item url" instead. So use the code given below instead. Otherwise, comments in one page will appear in all other pages. We want the Facebook comments to be distinct for each item page.
  • Open "item.php" in a text editor.
  • Find the "<?php osc_run_hook('item_detail', osc_item() ); ?>" tag. 
  • Paste the code given below right after <?php osc_run_hook('item_detail', osc_item() ); ?>
<!-- FACEBOOK COMMENT-->
<h2>Comment with Facebook:</h2>
div class="fb-comments" data-href="<?php echo osc_item_url() ; ?>" data-numposts="5" data-colorscheme="light"></div>

<!-- FACEBOOK COMMENT-->
You can change the  data-numposts="5" data-colorscheme="light"
In my case, the Facebook code is pasted between:
<?php osc_run_hook('item_detail', osc_item() ); ?>
and 
<?php osc_run_hook('location'); ?>

  • Save item.php

Check if the Facebook comments appeared.

If the Facebook comment is too close to the item description, you can add some space by adding <br/> or <p></p> tags before the Facebook comment (second code).In the screen shot below, I have added a like "Comment with Facebook".

How to add Facebook Comments in OSCLASS theme


If you found this post helpful, please let me know in the comments.


Sponsored Links


1 comment:

  1. I am very much pleased with the contents you have mentioned. I wanted to thank you for this great article. I enjoyed every little bit part of it and I will be waiting for the new updates.
    Facebook app development companies

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...