My Facebook like box is not working for all users. Out of the 5 computers in my office it works perfectly on 3 of the computers and not on at all on the other 2, simply leaving a blank white space.
This code is used directly after the <body> tag:
<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=YourAppIdHere";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And then the following code is used to display the Like Box:
<div id="facebook">
<div class="fb-like-box" data-href="https://www.facebook.com/Group1Nissan" data-width="460" data-height="400" data-show-faces="true" data-stream="true" data-show-border="true" data-header="true"></div>
</div>
Why would it not display for some users, tested in the same browser and being logged in or out of facebook doesn't effect it.
Thanks in advance
Willem
This problem is only happened with (HTTPS) SSL certificate errors. I'm also faced this problem.
Possible reasons:
Please check time settings on your computer.
Check https://www.facebook.com/ link for SSL connection errors by browser (what problem
makes)
I have encounter this same issue multiple times. For your situation I would first check if the browser you're using is fully updated on all five computers to ensure consistency. Then once that is done, clear the cache and make sure no one is logged into Facebook before going to your site where the social plugin is located. If all five are broke it's a problem with that which is most of the time my issue when it shows up. If they all work your HTML5 was out of date on the computer where it didn't show before.
If you still have the same issue after that try using the iframe version of the like box.
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&width&height=590&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:590px;" allowTransparency="true"></iframe>
Let me know how it goes.
Some times Facebook JS source link get problems.
You need to add http: in line 6 of the head script like this...
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=YourAppIdHere";
First, in your code do you replace "YourAppIdHere" with your actual app id?
That is found here: js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YourAppIdHere";
I assume that you probably changed that for posting here, but you should change that line to read:
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=YourAppIdHere";
Another potential issue is restrictions on your Facebook page such as age or location. If a person is not logged into Facebook and there are restrictions, FB will opt not to show the box because it can't determine a location or age.
Related
I have this code to make Facebook share, but this doesn't read my og meta tags. Putting in the Facebook debugger it reads fine.
<h2 class="caixacsstitulo"><%# Eval("titulo") %>
<div class="fb-share-button" data-href="http://www.novaonda.no-ip.info:8080/detalhe_noticia.aspx?id=<%# Eval("id") %>" data-type="box_count">
</div>
<asp:Image ID="Image3" runat="server" Width="32px" ImageUrl='<%# Eval("destaque") %>' Height="32px" ImageAlign="Right" /></h2>
You can access it here
Facebook officially deprecated the share button in favor of the like button earlier this year. A few days ago, I realized that the share button no longer displays on sites I manage. Trying to figure out what could be wrong, I checked those sites using a different browser and it was the same. Still in doubt, I used a different PC and even checked other websites just to be sure.
Across the web, a certain version of Facebook share button stopped working. The Share Button has been deprecated already a while ago but not yet completely dead. If it stops working on your website or blog, you only need to update your code.
Facebook deprecated the Share button on February 28, which means they no longer recommend its use in applications or on external web sites. Also, a certain version of Facebook share button was deprecated several years ago, and Facebook switched to serving the new JS SDK in its place on Monday, July 16. Perhaps the old one will be brought back to life later, but then I guess it’s time to upgrade to the new version. Support has already been dropped for it so there’s no point complaining to Facebook.
How to fix your share button
I prefer using the share button because it lets me share to my fan pages, unlike the like button which Facebook now favors. I found three fixes to this which I think should do the trick.
1. Using the official JD SDK version
Search for http://ogp.me/ns/fb#” just after it. The resulting code should lok like this:
"
If this is already there, you don’t need to do it again.
- In the body of your website where you want the code to display, paste this:
<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"; // appId must be valid
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:share-button type="box_count">
</fb:share-button>
Hey, make sure you change these parameters for the code to work:
* YOUR_APP_ID – You must create a facebook application for this code to work. Don’t know how? I explained it on steps 1 and 2 of this post.
* You can change box_count to button_count if you want a smaller button instead of the large one with counter.
Those who have copied the code and pasted on the web page we need to add the class attribute "class="fb-share-button" " to the div that will show the Share button. The automatically generated code from the Facebook is missing this attribute, and that is it does not display the facebook button.
Also, the button appears when the page is loaded or viewed from a web server. If you preview web page on the local computer the while designing it does not show up.
Third thing that you need to check is that there are no errors in loading the js "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"//
I'm using bellow code, works well for me
<script src="//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.8"></script>
using above code instead of Facebook share-button step 2:
<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/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I have added basic Facebook "Like/Share" buttons to a webpage, using code copied directly from the Facebook Developers page. There are 2 parts to the code: a javascript block and a div tag with a class of "fb-like" Heres the javascript:
<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>
And here's the div tag for where I want the buttons to appear:
<div class="fb-like" data-href="http://www.bethcake.com" data-width="90" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
Here are the problems I'm encountering:
When the webpage loads, I get 2 javascript warnings. The warnings refer to the connect.facebook.net source code, line 233, not any code I've written. They are:
Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
Also on page load, I get a php error (like.php.1:948):
Blocked a frame with origin "http://www.facebook.com" from accessing a frame with origin "http://www.bethcake.com". Protocols, domains, and ports must match.
This error is puzzling. First of all, I'm not using frames. Second, the protocols do match and there is nothing here about ports. Of course the domains don't match: I'm not trying to collect "Likes" for a Facebook page; I want to get "Likes" for an external website page. Am I missing something?
I ran the URL through the Facebook Open Graph Object Debugger. It brought up a number of warnings I don't understand. They are:
fb:admins and fb:app_id tags are missing.
og:title, og:type, and og:image are missing.
og:url, go:title, go:description, and go:image properties should be explicitly provided
Okay, fine. But where and how am I supposed to add these? I've looked through the Facebook documentation and searched stackoverflow, without success. If these are supposed to be added to the data-href string in the div tag, please give me an example.
I was getting the same javascript warnings as you mention in your first issue and adding an appId parameter to the URL in facebook code resolved both of them. So just change this line:
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
to
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1234567891234567";
To get a facebook appId, go to:
https://developers.facebook.com/apps
Hope you have already solved this problem.
But if this is help for someone, this answer helps about the "FB.getLoginStatus()" called before calling FB.init()" -> https://stackoverflow.com/a/16593474
As #smohajer pointed above you need to add the appId but with the new SDK you need to do some small changes otherwise you'll see some errors or warnings:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1234567891234567&version=v2.2";
You'll have to upgrade before April 30, 2015:
https://developers.facebook.com/docs/apps/upgrading
Here is what worked for me (found my answer here http://developwithguru.com/solve-invalid-app-id-must-be-a-number-or-numeric-string-representing-the-application-id/)
Basically,
1)go to developer page
2)create new app
3)get id
4)apply id to your code..e.g(js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=16digIdHere";)
I'm trying get the Facebook Like box to show up on my site. So far, I haven't found anyone describe a problem quite like mine here. There appears to be some kind of pattern, but I can't figure out what it is. Here's what I have observed:
It does not matter if FB user is logged in or not. The box sometimes loads when logged in and sometimes when not and visa versa. There are no special demographics set for the page.
The browser does not matter, though Safari gets way more consistently working results than Chrome. Chrome, however, works almost every time so long as it's in Incognito.
It doesn't matter whether I use HTML5 or XFBML. Both produce the same results. And the IFRAME doesn't work at all--it only shows a little like button.
I've tried all the solutions I could find for problems like mine, but none of the solutions have made any impact on this.
This is what I've added immediately after opening the body tag:
<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=408273115919487";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
This was added immediately after opening the head tag:
<html xmlns:fb="http://ogp.me/ns/fb#">
This is what I placed to show the like box:
<fb:like-box href="https://www.facebook.com/petruzzophotography" width="292" height="200" colorscheme="light" show_faces="true" header="false" stream="false" show_border="false"></fb:like-box>
This is working in a Wordpress environment, so it's possible that I've got some conflicting plugins or something. I've already disabled non-essentials without any success.
Can anyone recommend what to do next?
I find Facebook Like Box to be very glitchy and I stopped using it. I started using:
Facebook Members Widget - http://wordpress.org/plugins/facebook-members/
I hope this helps!
I am trying to add the facebook like button to an ASP.NET page. I have generated the code with the Get Like Button Code Widget and copied it into my master page. The like button works fine most of the time but for some random pages it doesn't. I have checked for javascript errors using the developer tools javascript console in Chrome but there doesn't seem to be any (I get the same problem in FF and IE as well).
Even more bizarly I can browse to a url such as mysite.com/category/12345/some-descriptive-name and see the problem. But knock a couple of letters off the end of the url (e.g. mysite.com/category/12345/some-descriptive-na) and the problem dissapears [I am using url redirection so as long as the id is the same, the same page is served up].
My best idea was that I was hitting some maximum url length, but that doesn't seem to be the problem as simply changing the Id in the url above works as expected as well.
I have tried both the HTML5 and the XBFML versions of the like button, both with the same problem.
The only other thing I could come up with is generating an appId in the hope that that would make it more reliable.
I am unable to point you to a publicly available site at this time, but the code is below:
...
<body class="clearfix">
<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>
...
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="segoe ui"></div>
This SO answer pointed me in the right direction. Using that tool on a link that worked actually caused the like button to stop working on that link further. Looking deeper into the results, there was a redirect section and FB was being redirected to my login page.
This problem was identified on a test site which is locked down. Removing forms authentication temporarily and then running the link through lint resolved the problem.
I have been fighting this for a while, and I just cannot make a facebook 'like' button appear reliably. It appears about 2/3 or 3/4 of the time for me, in any browser, on any page on my site, such as this one: https://www.liveset.com/events/142-blindpilot-new-orleans-live
I'm using the following code:
<div class='fb-like' data-href='https://www.liveset.com/events/142-blindpilot-new-orleans-live' data-layout='button_count' data-send='false' data-show-faces='false'></div>
.
.
.
<div id='fb-root'></div>
<script>
//<![CDATA[
(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>
We've replicated this across numerous browsers and OSs with all extensions disabled. There's only one like button on the page. Our OpenGraph tags are valid, and if they weren't, why would it only fail part of the time?
There are no Javascript errors. all.js loads correctly, and has content. The fb-like div is simply not filled out with an iframe; it remains exactly as it is in the page source. Simply nothing happens.
The problem is easily replicated by visiting the site above and reloading a few times.
I couldnt replicate the issue with 15 reloads, but I have seen this issue quite a few times on sites with alot of dynamic content, or dynamic loading content. Notice how the last thing on your site to load is the facebook button? Likely it is on their end, timing out. I tend to have this issue when other things must load, they take awhile and then facebook cant complete in time for the browser to load it.
* On a side note, trying removing google analytics and quantcast(if you use it) and see if you can replicate the issue then. Let me know.
Try moving your FB script out of your <div id="main"> and into the area below your <div id="footer"> with your other scripts.
It may be because you are dynamically populating content into this div with your Twitter comments wizard, something here is messing up the ability for a browser to parse your Facebook Like button script.