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.
Related
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>
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
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 am unable to comment on a previous topic: Facebook Like-Button - hide count?
So I am posting a new question:
What is the optimum method to hide the facebook like count when using the new method of placing the script and div as shown here? :
namespace
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
markup
<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=APP ID NUMBER";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
with
<div class="fb-like" data-href="http://domain.com" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial"></div>
Since many of the previous solutions use a div and overflow hidden to obscure the count, I'm also interested to know how hiding the count might be achieved taking into account any language localisations for the word "like", such that the word like in a given language is not obscured.