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.
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'm working on a site for a client. The site is built in Joomla and is using a Facebook like button on each page. When a user clicks a like button it unclicks itself after a second or two.
I've seen several similar problems here but none have provided enough insight to help me figure out what to do to fix this problem.
I ran the page through the Facebook debugger:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.theartoflove.net%2Findex.php%2F9-blog%2Fmen%2F27-go-ahead-and-ask-her-out
but I don't have a clue how to figure out what that result is telling me. The URL I used as a test in the debugger is:
http://www.theartoflove.net/index.php/9-blog/men/27-go-ahead-and-ask-her-out
Anyone know what I need to do to fix this problem? It seems to happen regardless of what like box I put on the site (I've tried three different ones so far).
My sincere thanks for any help!
When I clicked the like button, a small 'CONFIRM' link appeared under the "Like" widget, i had to click the 'CONFIRM' link (which brought up a dialog box asking me to confirm that I liked the page) in order to get the "Like" to stick.
See image
Facebook sometimes makes the arbitrary determination that your page is 'spammy' and adds extra precautions like 'CONFIRM'. That may be part of what is going on.
The code is reentrant and the developer is flipping the bit instead of verifying the current state with a conditional before setting the value. (This is a common coding mistake. Too common.)
I just want to ask a simple question about facebook like box http://developers.facebook.com/docs/reference/plugins/like-box/ I just want to remove the fan page profile photo.. Is there a solution for this? Thanks!
First: It is against the facebook rules to change or hide things in the social plugins.
That being said, afaik it is not possible anymore to use custom css in the social plugins. A long time ago you could pass the absolute URL of a css file to the plugin code but it does not work anymore.
I would recommend using a simple Like button. If you really need the stream of the page too, you could just use an app to read them by yourself, in that case even with your own design.
I just thought to answer this question as someone else might need this information in the future. All you need to do is reduce the width of the facebook like box. That’s it. I have done that in my website www.bringhopes.ca.
You can add the following CSS to hide the image
img.profileimage
{
display:none;
}
I kindly ask you to advise why Facebook Comments sometimes do not appear on my site.
I use standard code generated from Facebook Developers site.
Please note that the Comments box is located under the colored frame. Usually, it appears after reloading the page. Real site examples:
http://wakemovies.com/?ND201206190204
http://wakemovies.com/?BL201206190157
If I recall correctly Facebook comments require a bit of customization to the dock-type they have special format.
You should add this line tou your dock type
xmlns:fb="http://www.facebook.com/2008/fbml"
One more thing you are overloading your page with Facebook like buttons. I think one is more than enough considering most people have sharing plugins installed int they browsers.
I solved this by adding a setTimeout with a delay of 1 second
example:
setTimeout(function() {
// Your Facebook Comments JavaScript Code Here
}, 1000);
I'm working on a Facebook (canvas) app where I'd like to show the user a FB-style dialog box. I'm trying to do this with FB.ui(), using the fbml.dialog method. My every attempt at this today has yielded a dialog box that shows loading bars, but nothing ever happens.
Subscribing to log events shows nothing.
The code below is the simplest version I've tried, and is lifted straight from Facebook's sample code, which I've seen working (http://fbrell.com/fb.ui/fbml.dialog).
function sendToFriends(){
var dialog = {
method: 'fbml.dialog',
display: 'dialog',
fbml: '<fb:header icon="false" decoration="add_border">Hello World!</fb:header><fb:profile-pic uid="5526183"></fb:profile-pic>'
};
FB.ui(dialog, function(response){alert(response);});
}
As usual, Facebook's documentation is incomplete and all over the place. I'd appreciate any help you could offer.
The answer to your question lies probably in a buggy behaviour as documented here
FB.ui dialog for apprequest hangs forever in iframe mode
Did you try the popup mode already? Maybe this temporarily fixes the issue. Hopefully there will be a fix in the facebook api soon.
This has been answered elsewhere on stackoverflow, but I can't remember where; actually I was searching for it when I found this question.
Very approximately, you need to construct your html, put it somewhere inside the JS library for facebook (I can't remember where: possibly as a user-created element of XFBML or something), and THEN call the dialog box.
It's complicated. If I find the post I was looking for, I'll link to it here.