I have a facebook 'Like' button on my page and it's working fine. But when the visitor is logged in as a 'Page' at facebook it includes a photo and breaks my design. I guess this is because Pages aren't allowed to like things.
I pretty much have an iframe like this: http://developers.facebook.com/docs/reference/plugins/like-box/
Any ideas of how I get rid of this image? Any way to alter the design, disable this "feature" or check if the user is logged in as a page (to hide the whole thing)?
Thanks
Edit:
Screenshot of the issue: i.imgur.com/gLa7Q.png
In the top one I'm logged in as a regular user and the bottom I'm "Using facebook as Page"
The code I'm using: <iframe class="facebook" src="http://www.facebook.com/plugins/like.php?href=<?=urlencode('http://www.mysite.com')?>&layout=standard&show_faces=false&width=210&action=like&colorscheme=light&height=45" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
You can use the 'overflow' element in your css to stop it breaking the design. This at least keeps the like box the same size whatever somebody is logged in to Facebook as.
1) Wrap your like box in a div and give it an id (in the HTML)
<div id="mylikebox"> Facebook like Box Code in here </div>
2) Add to CSS (adjust height and width if you need to)
#mylikebox {
height: 70px;
width: 210px;
overflow: hidden;
}
Let Me Know if it works out!
I just noticed the exact same issue. Seems a bug on FB's part, as they provide an insertion code for their like button that breaks under a particular but perfectly normal condition (i.e. signed in to FB as a page.) I would love a solution too. In the meantime the bug has prompted me to remove the FB like button altogether from my blog, which unfortunately seems to be the only solution at the moment.
I found this to be true on the facebook developers like box configuration page. Definitely a facebook bug.
The answer provided by Nathaniel works for me. I have all my social icons in a line: http://www.cg-its.com
By setting a div height of 30, and adding the overflow: hidden attribute, if someone is logged in as a page rather than personal account they can see part of the red box, and the 'switch' URL allowing them to log back in as personal.
It's not perfect, but for the amount of users it will affect it is a good fix.
Related
We've had news articles sharing to facebook correctly for a long time but as of last weekend we are starting to see the wrong og:image when shared to facebook. Using the debugger tool, the first time it is fetched I get a warning "image too small" which is probably why it defaults to another image. But the image in question is not too small. Could this be some issue with headers of my images in Amazon Bucket maybe? Cannot pin point the problem yet.
Pressing scrape again 2 times then I get the correct og:image
As an attempt to fix this I have added og:image:width and og:image:height but so far to no avail.
Debugger url: https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fwww.maltatoday.com.mt%2Fnews%2Fworld%2F79568%2Fsicily_firefighters_caused_fires_for_cash
Adding Height & Width is NOT enough for everyone.
I've done the same for my websites and it didn't fixed it. It always needed a second Scraping, and then it will re-fetch the correct image.
Even after adding all of the meta OG tags didn't improve the situation.
I've noticed A LOT of other people experiencing this same issue, and adding height & width meta doesn't solve it.
In this case you'll need to add an iframe in your footer, and set it to be invisible and on page load to go to the facebook debugger, and scrape the url one more time for you automatically.
This is the solution according to Facebook. You'll need to scrape a second time (reference best practises under "Pre-caching images"). This is counter productive to be done manually, so just add the following code in your footer and you're done.
<iframe style="width:0; height:0; margin:0; padding:0; border:0; position:absolute;" src="https://developers.facebook.com/tools/debug/sharing/?q=<?php the_permalink(); ?>"></iframe>
A few notes to keep in mind:
This link leading to the debugger tool is valid in the time of writing this (August 2017). I've seen the link being different in the past, so if the link has changed in the future, just change the link in the iframe appropriately.
The part of the url right after "?q=" is the place where you place your link that you're posting to Facebook. I've used the_permalink() because it automatically checks the page's url and puts it in the link. If you'll like to do this for a single post, then just replace this with your actual link. This is for a WordPress php page. If this is not the correct code for your page, then change it into the language you're using.
I hope this helps everyone looking for an answer of this weird Facebook bug. It could have saved me ~6h of my life.
Cheers
Credit to user Dan for giving a clue on how to solve this.
Adding og:image:width and og:image:height as additional meta tags solved the issue for me. User nunsy_grey mentioned that this doesn't solve it for some user so worth looking at this alternative solution
I have added Facebook comments to my site as it is described in official guide:
https://developers.facebook.com/docs/plugins/comments#configurator
But when I try to post something captcha appears, and since the iframe is too short, it does not fit at height, so I see only the lowest part and don't see the top part, so I can't solve the captcha and post the comment.
If I try to increase height if the iframe with Chrome debugger then I see full captcha overlay and can solve it and then my post is added. But regular visitors of the site, of course will not debut it with debugger.
Is there a way to solve this? iframe's height is hardcoded with style attribute, so, I guess it's not solved with just css...
Well, OK. This seems to be the bug of Facebook itself.
But while they're fixing it, I've produced a temporal solution (using jQuery).
The point is to resize iframe if it's not high enough to contain the captcha box.
Unfortunately Facebook's script resizes its box itself once you click at it and there's no good ability to detect this. So I decided to perform the resize each 3 seconds. This is a nasty solution, but I hope Facebook will fix thi sbug soon, and this won't be needed anymore.
Here's my JavaScript temporal solution:
$(function(){
setInterval(function(){
if($('.fb_ltr').height() < 770) $('.fb_ltr').css({height:770}).parent().css({height: 770});
},3000);
});
Please comment if you have any improvements.
I am using the iframe method to get the Facebook Like Box on my website.
The website is: http://motorcyclealley.co.nz (the Like Box should be showing down the bottom to the right of the YouTube video)
However, it is always blank.
Browsing to the iframe url in my browser: http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/MotorcycleAlley&width=320&height=315&show_faces=false&colorscheme=light&stream=true&border_color&header=false&appId=397375460320824
Also produces a blank screen. The url was generated with the official generator. I am unable to figure out what is wrong because STRANGELY it works in the browser I originally did it on (Firefox 18.0.2 on Linux).
I have tried it on Chrome, Internet Explorer and Firefox/Windows and made sure that all adblocking extensions are disabled. I still get the blank screen.
Can anyone tell me whats going on?
EDIT: I should also mention that I have tried the HTML5 and FBML methods with the same result, they both worked on that ONE browser but not on any others
Ok, I just found out why. The Like Box doesnt show unless you're logged into Facebook in that browser (because it is set to have an age restriction). Apparently the following fixes it: https://stackoverflow.com/a/9310091/335227
I had the same problem.
I followed FB's instruction to add a FB like box in my web page:
<div class="fb-like"
data-href="https://www.your-domain.com/your-page.html"
data-width=""
data-layout="standard"
data-action="like"
data-size="small"
data-share="true">
</div>
But the block doesn't show like and share buttons, only white blank.
After some investigation I found it to be a bug of standard layout, if I set data-layout attribute to box_count, button_count or button, it works well.
My research
I installed the Facebook Like Box plug-in on my TypePad powered blog. It does NOT display the faces of people who Like my Facebook page. Initially it displayed only two members (the dimensions allow for six faces to be displayed). I un-installed it. Two months later I re-installed the plug-in and it displayed the face of only one member (call him "K"). When that member would update his page it would display on the Like Box. However, when new people joined my fan page, the count would increase but their face would not display in the Like Box. The only face that would display was "K". I decided to remove "K" from my members list to see what would happen. The result was the Like Box displayed ZERO faces. I uninstalled the plug in and reinstalled it again, to the same result. At present I'm gaining new members but their faces do not display on the Like Box.
Facebook isn't allowing me to completely paste in the IFrame code but here is most of it:
iframe
src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FLiving-Fit-Healthy-and-Happy%2F342390352362&width=292&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true"
scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:292px; height:290px;" allowTransparency="true">
top < then at the bottom /iframe ( <--- I had to type in that in order for Facebook to allow pasting of this code into this question box)
Regardless of the browser - whether it be Firefox or Internet Explorer - the Like Box will not display faces.
I know this is a glitch in the Like Box application, but there has been no technical support from Facebook to deal with this problem. This Like Box is installed on a Business website. The functionality of this app will help me to decide whether to use paid advertising on Facebook.
The faces aren't showing when you plug your URL in on the Like Box Plugin page either, so you've got two possibilities: It's a Facebook bug, or it's you.
Let's assume it's you for the moment. First, visit the admin panel of your page and claim a username. You've passed the likes threshold. That alone might fix your problem.
While you're in there, check that you don't have any excessive restrictions on your page.
The only other suggestion is to look at the people who've liked your page. Have any of them set the visibility to "Only Me"? If so, their photos won't show up here.
If you're confident that you've done all that correctly and it still isn't working, file a bug report
Update: The problem seems to have magically fixed itself, because I don't know what changed. If someone has an idea about how I accidentally fixed it, please post (I include myself :P).
I'm trying to use Facebook Connect on my site, but I'm having trouble with using requireSession or fb:login-button. Currently, when a user clicks the connect button, they get a popup window,but I really want to show an in-page modal. How do I do that? Currently, what I've got in pages is this HTML code:
<a href="#" onclick="FB.Connect.requireSession(on_session_ready); return false;">
Connect with Facebook
<img id="fb_login_image"
src="http://b.static.ak.fbcdn.net/images/fbconnect/login-buttons/connect_dark_small_short.gif"
alt="Connect"/>
</a>
(I'm pretty sure it on_session_ready doesn't matter for problem, because it only gets called after fb connect gets a session.)
I've also tried using the fb:login-button XFBML tag, but I also get a popup window when I do that.
What am I doing wrong?
You are not doing anything wrong. Facebook is currently split-testing modal vs popup login boxes.
They will most likely settle on popups for security reasons. But in the meantime, you have no control over which type of dialog box your users see.
PS: This is well-covered on the Facebook Developer Forums.
http://forum.developers.facebook.com/viewtopic.php?id=25808
http://forum.developers.facebook.com/viewtopic.php?pid=157799
http://forum.developers.facebook.com/viewtopic.php?id=29523