get Facebook comments of a webpage - facebook-graph-api

I have an app that is connected to my Facebook page.
by using the APP id i have embedded the comments widget to several web pages on my website.
(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/he_IL/sdk.js#xfbml=1&version=v2.8&appId={app_id}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I have the facebook comments widget installed on several web pages on my website:
Some pages for example:
<div class="fb-comments" data-href="http://www.foo.bar" data-numposts="20"></div>
<div class="fb-comments" data-href="http://www.foo.bar1" data-numposts="20"></div>
<div class="fb-comments" data-href="http://www.foo.bar2" data-numposts="20"></div>
3. Now im trying to get the comments posted on the pages using facebook graph API
I have tried these and more:
https://graph.facebook.com/http%3A%2F%2Fwww.foo.bar2/comments
https://graph.facebook.com/v2.8/{app_id}/comments
https://graph.facebook.com/{app_id}/comments
Most of them return:
(#100) Tried accessing nonexisting field (comments) on node type (URL)
Is it possible to get the comments posted on a specific webpage ? how ?
Thanks

Related

Rate Limits, Facebook Graph API and Javascript

My search didn't come up with a relevant answer for my problem so I post here hoping to get guidance.
I am developing a not-for-profit website for finding assisted-living solutions.
Each web page has social buttons for sharing/liking in Facebook and it shows the number of shares/likes. We do not require logging for viewing pages.
The problem is that we are constantly hitting the rate limits because of the API calls to get the number of likes (which is important to present) and then the Facebook buttons do not show.
this problem is several months old, probably the limits were changed, or maybe permissions?
All calls are done with the app id.
This is the js that is used when a page loads:
//<!--Start Facebook Script-->
window.fbAsyncInit = function () {
FB.init({
appId: 'my-app-id',
xfbml: true,
version: 'v3.1'
});
};
(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 = 'https://connect.facebook.net/he_IL/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
And the markup for the Facebook buttons is also standard - as suggested by Facebook.
<div style="padding:5px 0; display:inline-block; vertical-align: middle;">
<div class="fb-like" data-layout="button_count" data-href="the-webpage-url" data-action="like" data-size="large" data-show-faces="false" data-share="true" style="display:inline-block;"></div>
</div>
Here are solutions that we have seen but do not wish to use:
We do not want to cache social information
We do not wish to force users to login in order to view the number of likes etc. (Of course they do have to log if they want to actively share or like).
I hope someone can suggest a solution.
Thanks

Set page tab content height

How can I set the hight for my page tab content that is from a google site? It works fine, I just want the vertical scroll bars not to be longer than the actual facebook page size.
The code I'm using now
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '576155032405795', // App ID from the app dashboard
});
FB.Canvas.setAutoGrow();
};
// Load the SDK asynchronously
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
You may want to look into the setAutoGrow() or setSize() functions of JavaScript SDK. Both may help you but you will have to judge which one to use, from the setAutoGrow()'s documentation
This function is useful if you know your content will change size, but you don't know when. There will be a slight delay, so if you know when your content changes size, you should call setSize yourself (and save your user's CPU cycles).
and from setSize()'s documentation
Call this whenever you need a resize. This usually means, once after pageload, and whenever your content size changes.
So you need to judge accordingly.
Edit
I would like you to use setAutoGrow() function in your code. You will need to put this code in the page that is been rendered within the Page Tab. And as you have mentioned that is your content is retrieved from page within your Google sites, then this is where you would be required to add the code.
You will have to insert the following code within your page just after the body opening tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
});
FB.Canvas.setAutoGrow();
};
// Load the SDK asynchronously
(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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Here the channel.html will contain just the following line of code
<script src="//connect.facebook.net/en_US/all.js"></script>

Facebook LIKE button not showing

I put the facebook like button code as suggested by facebook developer documentation.
<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_GB/all.js#xfbml=1&appId=416733691671772";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.domain.com/" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true" data-action="recommend" data-colorscheme="dark" data-font="arial"></div>
Strange thing is that, the code of facebook like button is there when I inspect element in firefox and chrome. And its showing on my localhost as well..
To debug problems with the 'Like' button, always use the Facebook debug tool: http://developers.facebook.com/tools/debug

Facebook Comment Box disappear when using it with Backbone.js

I am trying to embedded Facebook comment boxes dynamically generated by Backbone.js in my HTML I have the following code right after the body in my HTML file.
<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/all.js#xfbml=1&appId=147738045314917";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Then I dynamically generate the div tags using Backbone template. I embed the following html tag.
<div class="fb-comments" data-href="http://something.com" data-num-posts="2" data-width="470"></div>
The problem is that the comment box don't always show for some reason. I am also using the Facebook SDK in this page too.
I don't really get this, any help would be great. Thank a lot!
After adding new XFBML elements to the DOM (or the HTML5 equivalent in this case), you want to call FB.XFBML.parse on the containing element in order to transform these.

Like Box HTML Snippet for iWeb

I have had a like box for a while on my website but wanted to upgrade it to one showing recent posts. My site is created in iWeb.
I went to the social plugins section and created the box for my page www.facebook.com/rivieracoaching but when I click 'Get code'the dropdown box where it says "This script uses the app ID of your app:" the dropdown box only shows an old page that I have deleted - I can't see any of my actual current pages to choose from.
This is odd because the preview on FB looks correct and in the code it does seem to say Riviera Coaching but when I copy/paste it into the iWeb HTML snippet nothing shows. I googled and an iWeb specialist says to copy/paste the code from the IFRAME section so i did that but no joy. Am I doing something wrong or is this a glitch in FB/iWeb?
The code FB is generating is:
<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_GB/all.js#xfbml=1&appId=124751684204020";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Please help, this is most frustrating!
You're not forced to specify an appId to simply include a like box. You can use the following js code :
(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_GB/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
And then include your xFBML like box code :
<fb:like-box href="www.facebook.com/rivieracoaching " width="292" show_faces="true" stream="true" header="true"></fb:like-box>