This is driving me crazy.
I got the code from the fb own tool at:
http://developers.facebook.com/docs/reference/plugins/like/
<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/sv_SE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Also got the meta key needed.
<meta property="fb:admins" content="100002771809798"/>
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Frecept.se%2Fcontent%2Fatt-gora-honungskaka-med-mandel
Gives me 206 but it shouldnt be enough to hide the button should it?
Heres an example page(Scroll down below the article).
http://recept.se/content/att-gora-honungskaka-med-mandel
Anyone able to clear this out for me?
I got it working just by copying the code from the plugins/like page on facebook.
You probably forgot to include this code:
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
It says everything right here:
Image
As far as I am aware, there should only be one <div id="fb-root"></div> on any given page, regardless of the amount of <div id="fb-like...></div> tags. This could be many things, but it may be because there is more than one tag with the ID fb-root. After all, it appears on each individual article, but not on the main blogroll.
Related
so I've tried every solution to add a like button for my facebook page to by website (local, not published). But for some reason none of the solutions have worked. Here's the code I'm trying in a blank html file. And by blank I mean the head, title, and body are empty, other than the below code in the body section.
<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>
<div class="fb-like" data-href="http://www.facebook.com/ResumeBuildingVolunteering" data-send="false" data-width="450" data-show-faces="true"></div>
Because you're working on your local system the
//connect.facebook.net/en_US/all.js#xfbml=1
will not work. This is because the link is a "Protocol-relative URL" which takes the current protocol you're using.
So if you're working locally on a Mac, that URL will look for a file at file:///en_US/all.js#xfbml=1 which doesn't bring up anything. You will need to change the url to
http://connect.facebook.net/en_US/all.js%23xfbml=1&status=0
This script should be put at the bottom of your HTML, just before it's closing </body> tag. Reason being, when it's invoked it parses the page and renders Facebook's elements. If it's invoked prematurely, like in your case, this elements won't be found (because they don't exist yet) and therefore not rendered. Another option is to invoke the script only after the DOM is ready, using jQuery $(function(){...} or by other techniques, or use an async load of the FB page like explain here
I had the same problem. Try using the actual button div like this first:
<div class="fb-like" href="https://www.facebook.com/mypage"> </div>
Notice the s on https.
It worked for me.
I am trying to implement the Facebook Like button on my website, but am having problems customizing the look of it. I have been using the Facebook Like Button Generator and I thought changing the Layout Style to Button_Count would have solved my problem, but it didn't seem to change the appearance in any way.
Code the generator spits out:
<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>
<div class="fb-like" data-href="http://www.google.ca" data-send="true" data-width="450" data-show-faces="true"></div>
I am more concerned about the text to the right of the Like button. Currently, the text on the right is too long for my website. I am wondering if there is an alternative so I can shorten the text to just show how many likes I have?
Add the data-layout="button_count" attribute to the button element because it seems to be missing. This will render the more compact version of the button.
Source: https://developers.facebook.com/docs/reference/plugins/like/
maexculture.tumblr.com is my site.
Just installed the facebook button and first of all, it asks to confirm the likes, then after confirming and pressing "Like" it switches to count it and then goes back to zero. The "send" function works. But the Like function is not - nothing shows up on facebook and the like is not counted.
This is what I have at the top of my page:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="https://www.facebook.com/2008/fbml"
xmlns:og="http://ogp.me/ns#"
xml:lang="en"
lang="en">
And the specific buttons:
<div class="facebook-button">
<div class="fb-like" data-href="{Permalink}" data-send="true"
data-layout="button_count" data-width="450"
data-show-faces="true"></div>
</div>
I also have this code in there near the head tags
<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=271140516272162";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Let me know if you need any more information.
Couple issues:
If your code is "near the head tags" there's a good possibility that the DOM won't have been fully populated when it executes, and therefore that it will miss detecting some elements. Any script that accesses or manipulates existing DOM elements needs to come after any HTML that creates those elements (e.g. right before </body>).
fjs = d.getElementsByTagName(s)[0] is really fragile, since it depends on one particular script element being the very first one in your document. Put an ID on that script and then look it up with getElementByID()
To answer your comment, I mean something like
(in HTML)
<script id="fjs" type="text/javascript" src="..." </script>
(in processing script)
fjs=d.getElementByID('fjs');
In other words, instead of counting on a particular <script> element being the first one in your document, you stick an id label on it so you can find it no matter where it is.
Just today I noticed on our Wordpress blog that the Facebook iframe is showing up as a blank, bordered box in the middle of my page.
The problem is that when Facebook's JS injects the content, it ends up with a div:
<div id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -2000px;">
...iframes here...
</div>
</div>
That "top: -2000px" is not enough to get it off of the visible screen, so it's stuck in the middle of my page.
Is there some way to fix this? I can do something hacky like hide the #fb-root element or shove it way off the screen. That's the one div that's actually in my code -- the rest, including the offending style attribute, are injected by FB's code.
My code just looks like:
<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>
<div class="fb-like" data-href="(actual URL here)" data-send="false"
data-layout="button_count" data-width="150" data-show-faces="false"></div>
Looks like Facebook fixed the bug, because the problem has disappeared.
I noticed this bug too. But isn't fixed yet.
This bug is not related to wordpress. I see the same behaviour in magento. When the placement of the facebook iframe is at the bottom of the page and the page is longer than 2000px, this occurs. That's also the reason I didn't mention it on any page.
Has anyone an idea how to fix this? I don't want to wait for a solution from Facebook.
Last week I noticed the same problem in a vBulletin Forum, but today I checked again and the iframes completely disapeared. The empty div "fb-root" still exists.
I too had this problem. I had placed inside an element with relative position and below my blog posts. But when I moved it right after the opening tag the problem was solved.
I have installed this plugin on my word press (http://www.delicatebonds.com/office-romance-dos-and-donts/), but the font color of comments is white. Background of this box is also white. Just because of this, comments aren't visible.
I must either change the background of this box to black or i need to change the color of comments. Someone please help me. I don't know how to make changes in this plugin........
Why not using the light version of the plugin?
Just remove the colorscheme="dark" attribute from the plugin code.
Also it seems that you are using an old wordpress plugin?
Try adding the plugin code manually to your single post file and check the result:
1-Include the JavaScript SDK on your page once, ideally right after the opening tag (*replace 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=1&appId=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2-Place the code for your plugin wherever you want the plugin to appear on your page (remove the href value).
<fb:comments href="http://example.com" num_posts="50" width="500" colorscheme="dark"></fb:comments>
This is the solution I created for this. Wrap the Facebook Comments code inside a <div> and add a class to it. Like this:
<div class="fb-background-color">
<div class="fb-comments" data-href="" data-width="100%" data-numposts="5"></div>
</div>
Then, add the CSS background property to it:
.fb-background-color {
background: blue !important;
}
Hope to help you somehow!