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>
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 feel completely silly for asking this question, especially after so many years of designing and building web sites. I have been researching for about a week on how to get Facebook Social Plugins working for my site and I am completely stuck. So, I have stripped away everything I can think of and just have a completely basic page here. I have done exactly what the Facebook Developer Tools have said to do and I am getting nothing. Here is my code below, any suggestions would be great!
Just to go ahead and get this out of the way, where it says 'APP_ID', I did put in my app id and I am still not getting anything coming through.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/JavaScript_v1_9_1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<link href="fonts/OpenSans/stylesheet.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</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_US/all.js#xfbml=1&appId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/DippPicks" data-send="true" data-width="450" data-show-faces="true" data-font="segoe ui"></div>
</body>
</html>
I have successfully used the FB plugins using the code shown here, which is:
<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
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// 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>
Which slightly differs from the code shown in the FB plugins page when you click the "Get Code" button, by including that FB.init block beforehand and passing in the App Id in there instead of in the js.src property.
I've included a like box plugin in my page:
<div class="fb-like" id="fb" data-href="http://www.lorem.com" data-send="false"
data-layout="button_count" data-width="60" data-show-faces="true"></div>
<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>
after click 'Like' and posted to the facebook's wall, I see that the image is weird, I mean i see it is only a small piece of my site's logo. That image on the wall looks like this
what shall I do to make that image to be looking good ?
The answer was, the minimum size of the image should be 200x200, mine was 330x40. And also, the image url should be placed in the og:image meta tag
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
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! :)