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.
Paste the first Facebook code right after the end of the line that has "body" in it.
<!-- FB PAGE -->//Please note: I have replaced the Facebook app id with "YOUR APP ID" above.
<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 -->
- 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.
<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-->You can change the data-numposts="5" data-colorscheme="light"
<h2>Comment with Facebook:</h2>
div class="fb-comments" data-href="<?php echo osc_item_url() ; ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
<!-- FACEBOOK COMMENT-->
Though you can set a specific width in pixels such as "data-width = "300px", it is better to set in percentage. For example, "data-width="100%" makes the Facebook comment box responsive.
In my case, the Facebook code is pasted between:
<?php osc_run_hook('item_detail', osc_item() ); ?>
and (facebook comment code here)
<?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".
If you found this post helpful, please let me know in the comments.
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.
ReplyDeleteFacebook app development companies
Great articles.
ReplyDeleteOw... thanks... this work on my site, but how to moderation for user...? please help me..
ReplyDeletehttps://techubber.blogspot.com/2016/05/how-to-get-notifications-for-facebook-comments-on-websites-blogs-facebook-comment-moderation-tool.html
Delete