Im having problems using the Facebook social plugins. If its important, I use GWT to display the code inside an HTML widjet
I put this in my html
<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>
<fb:comments width="600" num_posts="2" href="http://www.woojah.com"></fb:comments>
And nothing is displayed. However, if I open the source code with firebug, and I cut that code and paste it again, it is displayed. It is as if that code needs a special "refreshing" or "reloading". By the way, I got that code from the developers.facebook.com page. It's the social plugin comment code.
Also my html tag is <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">
So my question is: Does anyone know why the comment plugin is not displayed and why, when I cut and paste the exact same code with firebug it is displayed.
You may want to look into using the FB.XFBML.parse() command to have the SDK reparse the page after you use GWT to insert the code inside your widget.
Related
I'm creating a Facebook page plugin using the tool here, and I was lead to believe I would have the option of selecting HTML5 from a drop down box.
However, there are no options to select from.
I only see:
Include the JavaScript SDK on your page once, ideally right after the opening <body> 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_GB/sdk.js#xfbml=1&version=v2.5&appId=171705736232531";
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-page" data-href="https://www.facebook.com/example.com" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/example.com">Example</blockquote></div></div>
Is this code HTML5 by default?
Is this code HTML5 by default?
Yes, HTML5 would seem to be the default (and only) option these days.
Previously, there were additional options for "XFBML", "IFRAME" and "URL". But these would have resulted in very different plugin code to copy 'n' paste.
I have followed the exact steps given on facebook developer website, which is to add JS sdk after opening body tag(ideally) and placing the div at the desired place where button should appear.
<body>
<!-- Facebook like button js -->
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Add this where you want the button to appear -->
<div class="fb-like" data-href="https://www.facebook.com/myWebsite" data-width="400" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</body>
After doing this, it would still not show up.
If you don´t run this code on a server (localhost or remote), you need to change the following line:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
..to this one:
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
I highly suggest NOT doing that though, and using a server on localhost for testing/development.
If that code change does not work, upload it to a real server (without the code change). I just tested it and it works perfectly fine. You should really consider using a real server (or a local one) for development.
Use an editor like Brackets or Webstorm, they all include a server. For example, Brackets is pretty easy for "live editing".
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>
I'm trying to add a facebook like button to my extension.
I've already added a google +1 button but I seem to be having some trouble with the facebook button.
This is the code generated by https://developers.facebook.com/docs/reference/plugins/like/
(Modified the source of the all.js file to be local instead)
<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 = "all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://chrome.google.com/webstore/detail/bkonffiagffjhnihbboojciggcplmobc" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
It doesn't show up at all on my extension, and I'm not exactly sure why.
Any tips would be great!
Thanks
The original src value for my like button was something like //connect.facebook.net/en_US/all.js#appId=<number>&xfbml=1. In a chrome extension, this url is extended to chrome-extension://connect.facebook.net/en_US/all.js#appId=<number>&xfbml=1, which will 404. The simple fix is to prepend the original src value with the http protocol, http://connect.facebook.net/en_US/all.js#appId=<number>xfbml=1.
I do not know the specifics of all.js, I can't say if embedding it in your extension will be useful.
(I ran into this same issue and thought I would leave my answer here for others.)
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>