I am trying to add facebook facepile plugin to a page. I am trying to use news.reads action in the plugin and it doesn't work.
I am adding:
div class="fb-facepile fb_iframe_widget" data-action="news.reads" data-href="url-with-article" data-max-rows="1" data-width="200"
I understand that if I put news.reads action here I should be able to display images of friends who have read this article
I found that simply using the Facepile plugin on an Object that had users interacting via read actions automatically showed users that had read the object.
Specifying news.read as the data-action actually made the plugin cease to function.
Make sure you have initialized the Javascript with your app id:
<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/all.js#xfbml=0&appId=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Also, read the section called "Why is nothing displaying?" here: http://developers.facebook.com/docs/reference/plugins/facepile/
If all else fails, try the IFRAME version and see if you get any results there.
<iframe src="//www.facebook.com/plugins/facepile.php?href=url-with-article&action=news.reads&size=medium&max_rows=1&width=200&colorscheme=light&appId=YOUR_APP_ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px;" allowTransparency="true"></iframe>
Related
I came across something strange; the Facebok Page Plugin doesn't load on mobile only if it's for a specific Facebook page.
My code:
<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.4&appId=1591121954498982";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-page" data-adapt-container-width="true" data-height="350" data-hide-cover="false" data-href="https://www.facebook.com/pages/סיפורי-פירות-Fruit-Story/410067012494711?fref=ts" data-show-facepile="true" data-show-posts="true" data-small-header="false"> </div>
Changing just this line:
data-href="https://www.facebook.com/pages/סיפורי-פירות-Fruit-Story/410067012494711?fref=ts"
to another page's URL such as:
data-href="https://www.facebook.com/CocaColaUnitedStates?fref=ts"
...makes the plugin load fine.
Is it because the page URL contains Hebrew? Is there a relevant page setting?
I set up a small demo page:
http://s-fruit.co.il/facebook-test.html
Found the cause!
This is an intentional (though peculiar) behavior of Facebook when dealing with age-restricted pages and guest users (not logged in, as it often happens on mobile browsers as most use the app).
Why not simply display a login prompt? Some paraphrased info? Who knows. At least the mystery is solved.
An official response can be found here:
https://developers.facebook.com/bugs/828224027247232/
I have implemented the Facebook comments plugin to a page on my site. In addition to this I would like to be bale to moderate the comments. I followed the instructions on the Facebook developer section and implemented as described. I wanted to use the inline moderation tool rather than create an app. So I placed the following meta data.
<meta property="fb:admins" content="533551342"/>
Where the content is set to my Facebook profile ID.
I have then placed the script code as per Facebook developer instructions.
<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/sdk.js#xfbml=1&appId=672941899483225&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Once that is in place, I added the comments section to the site using the code instructed.
<div class="fb-comments" data-href="http://www.microspot.com/case-studies/boat_design.htm" data-width="540" data-numposts="10" data-colorscheme="light"></div>
So with all this in place the comments section shows and works, but the moderate link does not appear next to the number of posts text (which is what should happen according to face books documentation).
The web page is http://www.microspot.com/case-studies/boat_design.htm
Thanks in advance.
It seems the issue was not with the code but with Facebook re-indexing my changes. There is a tool on the Facebook developer page for debugging and indexing your changes.
Any update you make to the Facebook code on your webpage, especially the meta data, you should always use the following debug tool.
https://developers.facebook.com/tools/debug/
Simply paste your webpage link (should be a live page not local) into the box and follow the instructions each time you make a change.
<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/sdk.js#xfbml=1&appId=672941899483225&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
1st please don't mark my question as a duplicate one because I read all the questions related but none of the questions stated my hint.
I was trying to make a facebook like button and found that facebook like box is more what I need because it just like and doesn't show any post after like.
The idea is when I take the code from the like box plugin link it doesn't add the like to the facebook page as other said that it was a bug in the facebook like. But when I press the button inside that link it will add the like to the facebook page.
The question is if it is a facebook bug should they state the first field as "Facebook Page URL" and should it work in the plugin link while you are configuring the like box before you get the code???
In other words, if it work in the plugin link so it must work if you get the code and paste it in your site, or am I wrong??
I've tried the HTML5, XFBML and IFRAME code that the facebook generate for you according to the data you provide.
No one of the below codes work; It shows the like box and when you click it will change to grey color but it doesn't make a like to the facebook page and when I refresh the test page it returns to the default state. When I was trying I found that the if I like the page from facebook site in normal way and try to dislike using the below code fro test page it will work.
EDIT:
While I am still trying to find a solution I found that in explorer works sometimes while in chrome and firefox doesn't.
I am using a test.html file that is placed in htdocs of xampp to test the result.
HTML5 code tried:
<html>
<head></head>
<body>
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/FacebookDevelopers" data-width="150" data-height="100" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"></div>
</body>
</html>
XFBML Code tried:
<html xmlns:fb="http://ogp.me/ns/fb#">
<head></head>
<body>
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like-box href="http://www.facebook.com/FacebookDevelopers" width="150" height="100" colorscheme="light" show_faces="false" header="false" stream="false" show_border="false"></fb:like-box>
</body>
</html>
and the Iframe Code tried:
<html>
<head></head>
<body>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&width=150&height=62&colorscheme=light&show_faces=false&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:62px;" allowTransparency="true"></iframe>
</body>
</html>
I have created a page "Education For All" in facebook. In my website i want to provide a like button to like this page not the url and also want to show the count of the Likes received for that page in website along with Like button. I have used "Add this", but it is showing the count of number of likes for the url. Can you suggest me any plugin ?
Any help will be appreciated...
generate your facebook like button from here,
http://developers.facebook.com/docs/reference/plugins/like/
Please provide proper informations to get the proper code, or you can use the code below by following the instructions, just replace http://www.yoururl.com with the desired URL of the page which needs to be liked:-
1. Include the JavaScript SDK on your page once, ideally right after the opening tag.
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Place the code for your plugin wherever you want the plugin to appear on your page.
<div class="fb-like" data-href="http://www.yoururl.com" data-send="true" data-width="450" data-show-faces="true"></div>
Have you already tried to generate the like button through https://developers.facebook.com/docs/reference/plugins/like/ ?
It gives you this code for example:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fedforall&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=light&font&height=35&appId=225116190942635" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
I installed facebook comments on my website. My website is a dynamic website and pages are like this www.example.com/page?id=54, www.example.com/page?id=67
If I post a comment in this page: www.site.com/page?id=54, it also appears in www.example.com/page?id=67. The comments are not unique for a page, but appear in every page. Why is that ?
It seems that FB ignores the ?query part of the URL when retrieving comments.
What you could do: use some form of URl rewriting, so that your URLs are in the form http://www.example.com/page/id/54/ or similar (i.e., appearing to not use the ?id=something query part). That way, the comments should load for each page separately.
Here is a solution that worked for me.
1- Copy this SDK from Facebook. Most probably you already did that.
<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/all.js#xfbml=1&appId=114215202075258";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
2- Then this
<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="3"></div>
3- The the solution line. Paste these lines of JS at the end. Make sure you do everything in the similar order as I have. It will work, no matter you have a ? in your URL.
<script>
$(".fb-comments").attr("data-href", window.location.href);
</script>