Facebook page shifts when FB is added to Chrome Extension manifest - facebook

In the manifest.json of my Chrome Extension, I've added Facebook to the content script. For some reason, I'm not sure if this is a bug in my code or something to do with Facebook, when the extension runs with Facebook in the content script's matches, the entire Facebook page becomes shifted.
Here's an image of the bug.I'm not sure what's happening nor what's causing this to happen. My other friends have experienced the same issue when I ask them to include Facebook into the manifest.
The relevant code looks like this:
"content_scripts": [{
"matches": [
"http://*.facebook.com/*",
"https://*.facebook.com/*",
"https://*.twitter.com/**",
"https://*.reddit.com/**"
],
"css": ["bootstrap.min.css","content.css","twitter.css"],
"js": ["reddit.js", "content.js","twitter.js"],
"run_at": "document_end"
}],
My extension works great on Reddit and Twitter. I've isolated the Facebook issue to here. Does anyone have a fix for this?

Related

Facebook graph-api and js-sdk issue with internet explorer 9-11

I'm having some issue in making social feeds work under ie9.
in this page http://www.axo.com/us/news/ there are the standard Facebook and twitter feeds widget and in ie9 are both not working.
At this other page: http://www.axo.com/us/fbfeed I'm developing a custom Facebook feed following this tutorial http://tutorialzine.com/2011/03/custom-facebook-wall-jquery-graph and I get a white page under ie9
this jQuery plugin use the direct call to 'https://graph.facebook.com/pageId/posts/?access_token=XXXXXXX&callback=?&date_format=U&limit=15
I've read some post that sudgest to use the javascript SDK instead of calling graph.facebook.com. I've made a try
jQuery.getScript('//connect.facebook.net/en_UK/all.js', function(){
FB.init({
appId: 'xxxxxx',
});
var pageAccessToken = 'xxxxxx';
FB.api('/axoracing/feed', {
access_token : pageAccessToken
}, function(response) {
alert("FB.api response")
});
});
but under ie9 the alert doesn't show... so I imagine the call to /axoracing/feed is not getting an answer.
even more strange: if I try to console.log() something it doesn't work in any browser (firefox, safari, chrome, ie, ...). It is really odd and it will be a mess to use the responded object if I can't log it!
I'll really appreciate any help.
Thanks
Daniele
IMPORTANT UPDATE:
For debug purpose I made a test page that call the graph api, the sdk api and the Instagram api. Instagram and graph.facebook calls work in the same way so I inserted the instagram call to check if the issue is in the capability of IE to understand the responded json (I've read this in some answare here in stackoverflow) or if it is an issue only related to facebook.
http://www.axo.com/prova.html
If I look at this page with chorme, firefox, safari and even ie7 it works fine. If I load the page with ie9 or ie11 I get only the instagram feed... no response at all from facebook!
I haven't tested ie8 or ie10 yet.
Do you have any idea? I can't believe it is a facebook incompatibility with ie... I'm sure I'm making something in the wrong way, but what?
Thank for the help
Daniele

og:title and og:description ignored in Facebook Like button

I'm trying to implement the 'Like' Facebook button on my webpage. I've followed the instructions on FB Like Button Reference, and the main functionalities seem to be working Ok.
However, there are a couple of things that I couldn't make them work: the og:title and og:description meta tags. It looks like they are simply ignored when I post to Facebook.
This is the list of key information that may be helpful:
My Facebook web page: www.facebook.com/zuzsso, and I've configured it as follows:
My webpage is www.zuzsso.com
The header source code of my webpage looks like this, where I've set the tags og:title and og:description
The FB scraper shows this information when debugging the URL http://www.zuzsso.com:
Also, this is how the scraper sees my page:
However
When I log in Facebook as someone else and go to my webpage and like it, this is what I see:
Given all this info, shall I assume that I misunderstood how the Like button works or is it there definitely a problem with FB or my own configurations?
Thanks a lot for your time hand help.
N

Trouble with Facebook open graph

I have a unique and different problem on my wordpress site with facebook open graph
The site's home page is perfectly understood by the facebook open graph debugger (link for reference).
But article page of the site, show error on the facebook's open graph debugger (link for reference).
Following error is observed when a article link of my site is posted to facebook object debugger:
Can't Download: Could not retrieve data from URL.
Graph API:
{
"error": {
"message": "An unknown error has occurred.",
"type": "OAuthException",
"code": 1
}
}
and the scraper is unable to load any data i.e. blank page.
Anyone who can, please help me with this matter, I have a strong suspicion that it is some plugin that messes things up on the articles and not on the home page.
SOLVED:
I had a problem with a wordpress plugin (SEO ALRP PLUGIN) that I was using at that time. Be very cautious while checking the options given to you by Open Graph Protocol Wordpress plugins.
I had this problem last week in Chrome and FF. It resolved itself on its own after ~24 hours. I'd say work on something else today and try it again tomorrow.
I think the FB engineers are tweaking the dev tools and occasionally breaking stuff along the way.
If you really need to work on it today, you could try the beta stack and see if that works better for you: https://developers.beta.facebook.com/

Links in iFrame tabs won't work in Facebook application in Timeline

I had links that worked before timeline, and since we moved to timeline, they don't. We are using the Facebook iFrame for our content.
What is going on? When we click on the link, it seems like something is blocking the browser from changing the page.
http://www.facebook.com/Activis?v=app_179997328701001
Edit : I'm still investigating that problem; One thing I should mention is that only links that go to another Facebook App don't work. The ones that go to something else than Facebook (A blog, Twitter and Linkedin) work fine.
TommyBs Wrote:
Is the target of the links the same frame? I find sometimes that facebook doesn't let you redirect to an iframe of facebook. E.g - Make sure you either set the link to target="_top" or make sure it is a full url of an app and not the app on facebook. Otherwise you're basically loading an iframe of facebook, with an iframe of your app within the existing iframe
Yup, putting a target="_top" on my links worked. Thanks!

facebook like button flashing on then off

I cannot get the Like button to work on one site. http://www.room13canada.ca/test.html
When the button is clicked it fires off to facebook but the callback then undoes the call? I have stripped all code to make sure there is no js or css or whatever breaking the button.
please look at the pagesource - it makes no sense why it doesn't work.
if I change
<fb:like href="www.room13canada.ca"
to
<fb:like href="www.cnn.com"
it works like a charm??
any help would be great
Have you considered trying with the iframe method?
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.room13canada.ca%2Ftest.html&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
Well, I was also having problems with the facebook like plugins and also heard from people that it is a facebook bug. After searching a lot on gOOgle .... I found a good result and don't think that this is a fb bug.
You will have to add this file into the header of your website:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Property of Meta Tags (facebook likes Meta Tags) ==> og:image - An image URL which should represent your object within the graph.
Replace "http://ia.media-imdb.com/images/rock.jpg" with real path to image.
For Wordpress Users:
Add the following code in the head of your header file ==>
<?php $img= get_post_meta($post->ID, 'image', true); if ($img): ?>
<meta property="og:image" content="<?=$img ?>"/>
<? endif; ?>
That's all... Hope this will work for you all !! Share your experience ...
First, I'll give my hypothesis: If the Facebook URL Scraper has tried to scrape your page, and was unable to access it (e.g., if it was pending moderation and the Facebook Scraper bot got redirected to a "login" page), Social Plugins like the Like button and Comments won't work because Facebook thinks the URL is "inaccessible." It takes 24 hours for Facebook to try scraping the page again--until then, Facebook will assume it's still inaccessible.
Here's what Facebook says about how often pages are scraped and how to force a scrape:
Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Linter. Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours.
Note that the Facebook URL Linter has been renamed the Facebook Object Debugger.
I could be wrong about the underlying issue. I'll give you my experiences, and you can decide.
Our site is a collection of blogs, and all blog posts have a "like" button, generated with identical code (except for the URL being liked). By default, all blog posts are saved to a "draft" state, and not available unless you are logged in. If an anonymous user attempts to visit a "draft" blog post, he will be redirected to the login page.
Months ago, we experienced a "Like" button problem, although the error manifested slightly differently: we got "URL inaccessible" when clicking the Like button. This only happened on posts that had "Like" buttons and also were not immediately published (e.g., they were saved to a "Draft" state). I thought this was fixed when I changed the "Draft" view to not display Facebook social plugins.
However, I've noticed that, from time to time, if you click the "Like" button on a particular post, the "Like" flyout flashes on the screen for a moment and then disappears, with no "like" action taking place. Different behavior, same problem: "Like" button doesn't work.
At the same time, the "Like" buttons on every other post worked just fine! I tested this, and then came back to the one post I couldn't "Like". Same behavior: flyout appears and disappears, no "Like" happens.
I used Chrome's developer tools to see what HTTP requests were being made, comparing the request/response for a working "like" to the "like" that wasn't working. The "Like" button JavaScript makes an HTTP POST request to http://www.facebook.com/plugins/like/connect and gets some JavaScript back. As best I could tell, the HTTP POST request was identical between the working and non-working like buttons, but the response was different. Below is the JavaScript response for a working like, followed by the JavaScript response for a like that wasn’t working:
for (;;);{"__ar":1,"payload":null,"jsmods":{"require":[["Plugin","connect",[],["http:\/\/www.hslda.org\/cms\/?q=blog\u00252Fpeeking-through-fence","10151028997762924"]]]}}
for (;;);{"__ar":1,"payload":null,"jsmods":{"require":[["Plugin","disconnect",[],["http:\/\/www.hslda.org\/cms\/?q=blog\u00252Fpoem-just-you"]]]}}
I note two distinctions: the working version “connect” whereas the non-working version has “disconnect”, and the working version has an additional parameter that looks like an ID. I’m guessing it’s the ID of this particular “like” event.
I did some Googling and couldn’t find a definitive answer. Trying to debug this, I used the Facebook Object Debugger. It found some “Like Button Warnings” and “Open Graph Warnings” that are worth fixing, but I don’t think they are the problem—because they were the same for URLs with working like buttons and for the URL with the like button that wasn’t working.
So then I decided to go to the Facebook Social Plugin page for the Like Button. I dropped in the URL of the non-likeable blog post, and tried liking it. It worked. I wondered, “is the like button on the page still broken?” I couldn’t like it because I’d already liked it. So I asked a coworker try and like the post, and it worked for him. I then had my coworker unlike the post, I unliked it (so we were back to no likes), and then I tried liking it again, using the like button on the blog post. It worked.
So, it seems like once I "forced" the page to be scraped again, it started working. But it's also possible that "forcing" a like through the Like button page broke something loose as well... not sure.