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.
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/
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.
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 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/