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.
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.
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.
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!
I added the following Facebook Like code in my blog.
But when I clicked on the button, it showed up a small dialogue window which looks like this:
http://www.badongo.com/pic/13928565
I don't want this dialog window. I simply want the count of like button to increase.
Someone please help me, thanks!
<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/zh_TW/all.js#appId=189257097820759&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="imobile.tw" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
In your CSS:
.fb_edge_comment_widget.fb_iframe_widget { display: none !important }
None of these CSS workarounds seem to be working as of now (December 2012), so I advise you to use a more reliable solution: Simply place the fb:like into a div with overflow: hidden. If the div will be small enough (just to display the Like button), it will work.
Put this into your html file:
<div id="fbLikeContainer">
<fb:like send="false" layout="button_count" width="70" show_faces="false"></fb:like>
</div>
And this into your CSS file:
#fbLikeContainer {
overflow: hidden;
}
If you check the official Like button reference on Facebook developers, particularly the section When I click the Like button, the popup window (or "flyout") doesn't show. Why?, you'll see that that's what Facebook suggests you to do (though unintentionally)
After reading the Facebook developer page, I think the new style of a URL "Like" includes the flyout / dialog. You could possibly hide the flyout with a div around the Like button set to the correct size and with the overflow: hidden CSS property assigned to it. The other option is to use the Like button with Facebook pages. This is called the Like Box, but again, only works with Facebook pages / URLs. Perhaps you could create a Facebook page for your site and have all the Like buttons link to that?
Here is the Facebook Like Box generator, which you can turn off most of the features to get just the Like button and not all the extra stuff:
http://developers.facebook.com/docs/reference/plugins/like-box/
Here is the Facebook Like Button generator, that has a flyout also, and they mention the flyout might get hidden although don't talk about it as though you might want to hide it:
http://developers.facebook.com/docs/reference/plugins/like/
I have a like button on each page in a wallpaper site. There is an option to edit the title of the wallpaper. Hence, the URL of the page changes as well, like it happens in Stack Overflow. In Stack Overflow, when the title of the question changes, the old URL is redirected permanently to the new URL. The same logic is implemented in my site.
The problem is, say if there are 10 likes for a wallpaper page
http://www.example.com/1/old-title-wallpaper
If the title is changed slightly to 'new title', the URL changes to
http://www.example.com/1/new-title-wallpaper
In the new page, the like count becomes 0. Is there a way to make the Like button detect 301 redirection.
The like button uses the og:url tag. On your new page you need to keep the old og:url value.
This means you are not giving an explicit url for the like button code..
Hence the FB server picks the current url of the page where the like button is placed..
Check the iFrame of like button and see that you mention the data-href there ..
Sample 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#appId=xxxx0&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://xxx.com" data-send="true" data-width="450" data-show-faces="true">
</div>
Link to Like Pluggin
http://developers.facebook.com/docs/reference/plugins/like/
Also, you can use Metadata tags to explicitly make the FB server pick the url as desired by you .. Use Open Graph tag og:url for that
See http://developers.facebook.com/docs/opengraph/