Case 1:
I use this code:
(from http://www.mybloggertricks.com/2011/06/add-facebook-like-button-below-post.html)
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>
When I click "like", a confirm button comes and when I click like in the new popup window that comes up, I am redirected to https://www.facebook.com/plugins/error/like/confirm
Case 2. I use an iframe from facebook developers,
<iframe src="//www.facebook.com/plugins/like.php?href=data:post.url&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80&appId=324750880918583" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
the "data:post.url" used under href does not give me the url of the blog, but the string itself.
Case 3. So I tried the XFBML version from the link in Case 2, part of the code of which 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=324750880918583";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
This is the error that blogger shows when I try to save the template.
Error parsing XML, line 1201, column 68: The reference to entity
"appId" must end with the ';' delimiter.
Fixing any one of the above would help me greatly.
You have to cut this script from the 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_GB/all.js#xfbml=1&appId=324750880918583";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
then go to Blogger Layout, Add a Gadget, HTML/JavaScript, then past the script there.
This should work! :)
Related
I am using FB like button on my webpage, sometimes it render and sometimes its not, When I see console for Error Log it showing error
The "fb-root" div has not been created, auto-creating
in all.js
I am using this 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/all.js#xfbml=1&appId=105911812857824";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-send="false" data-width="450" data-show-faces="true">
</div>
Use this following 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&appId=694586437259261&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and also put this code also
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>
You have to provide data-href="your link for like" that will work for you.
There's a newer way to initialize the API.
You can put the appId in the init method instead of embedded in the URL.
They don't even suggest you use fb-root anymore. In fact I don't really see why you ever needed to. You'll still get a warning in the console but I don't see any reason to worry about putting it in manually.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.3'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I get the like button code from https://developers.facebook.com/docs/reference/plugins/like/, and on my page, the like button is rendered correctly...at least it looks like so :P
But when I click on the like button, the comment dialog appear and disappear immediately, and the button becomes a Confirm link; then I click on the like, a popup window ask me to confirm to like it...then, when I back to my page, I can see the comment dialog. But whatever I input, after I clicked on the Post button, the dialog will not close.
In my Chrome console, I see when I click on the Post button, a request is make to https://www.facebook.com/plugins/like/comment, and the return result is:
for (;;);{"__ar":1,"payload":null}
I compared this behavior on other sites, and it is clear the return is different. But I have no idea why.
Usually that problem can be fixed by using an app id in the init 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/de_DE/all.js#xfbml=1&appId=xxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
That´s Facebooks spam protection...
actually what luschn is right. you should create appID. facebook needs to count the LIKES when one clicks on it. you know, it's so simple. perhaps there's something you need to grab from the button :p
Try this stuff:
<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/de_DE/all.js#xfbml=1&appId=null";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<span class="fb-like" data-href="https://www.facebook.com/fb-name" data-layout="button" data-action="like"></span>
appID set into null. This works, but it's spamming. This is just for experiments only.
Here's the sample page:
http://developer.appacyber.net/feed/test.php
It also works on localhost :D
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
I am trying to add facebook like to my mediawiki skin.
I have the code:
<html xmlns:fb="http://ogp.me/ns/fb#">
<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 href=' . urlencode($wgTitle->getFullURL()) . ' send="true" width="450" show_faces="false"></fb:like>
On the pages where facebook like shows up I get the error FB.Type.createClass2 is not a function in firebugs and on other pages it simply doesn't show up and there is no error.
How do I get it to show up on every page?
Embed the Like button like this:
<div class="fb-like" data-href=" . urlencode($wgTitle->getFullURL()) . " data-send="true" data-width="450" data-show-faces="false"></div>
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>