Following the instructions given by google folks, I added https support to our blog.
Nginx, behind the scene redirect everything non http to https, proxied to a ruby on rails app.
Everything seems to work quite well but facebook counters appears now buggy.
If you look the source of this page : https://milesandlove.com/argentine/le-fitz-roy
I added a lot of og meta tags :
<meta property="og:url" content="https://milesandlove.com/argentine/le-fitz-roy"/>
<link rel="canonical" href="https://milesandlove.com/argentine/le-fitz-roy"/>
And the share button :
<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:href="https://milesandlove.com/argentine/le-fitz-roy"></a>
Note that even if its a add_this button, it would be exactly the same result with the official facebook one.
The weird thingis since nobody like the page, it kept showing the old count . Since a new person came and like the page, it suddenly reset the counter to 0 !
Is the count definately lost ?
Why Facebook is protocol aware ?
I read that a tricky solution whould be to serve a http:// page to the facebook
crawler. Is it the only solution ?
Essentially you've changed your URL - you might have to contact Facebook in order to "migrate" your likes (if that is even possible).
It is 100% possible to serve totally different content on the same domain with different protocols just like http differs from ftp, http can differ from https. I would say that this is expected behavior.
I don't think that this is a "tricky" solution. There are many cases in which you would want a crawler to see slightly different content from a regular user in a browser. You could set this up to only respond to Facebook by using their specified IP addresses mentioned on this page.
Facebook will reset the likes count on your ages when you move to https:// and there's no way around this. I have a 301 redirect on the old URL and Facebook doesn't follow it. It will not keep the old likes and it will treat https:// domain as a separate page. Which is bs really! I don't know of a single site that serves different content on http:// and https://. So, there's no solution to this issue at this stage.
Related
I just moved my blog to https and, of course, all the facebook shares counters are now reset to 0.
I've spent several hours reading stuff online and I got the solution to point the og:url tag to the old urls (with http instead of https).
It worked for a day but now all the counters are back to 0.
The strange thing is that if I check the urls (both with https and http) with the open graph debugger it returns me 0 shares for both the urls!
I really don't know what to do! Is there a way to have back the counters of the http-version of the urls? Or, as an alternative, is there a way to sum the two counters?
p.s. I already activated the 301 redirect for the whole blog in my .htaccess file.
Facebook treats HTTP and HTTPS as two different URLs and therefor two different Open Graph objects, even if the rest of it is the same.
p.s. I already activated the 301 redirect for the whole blog in my .htaccess file.
And that's your mistake ... You need to keep the old HTTP URLs available for the FB scraper to read the OG meta data from; if you redirect the scraper to the HTTPS version as well, then it concludes that the HTTPS versions was the actual correct URL for this piece of content - and therefor you have just undone what you tried to do by having og:url point to the old HTTP address.
See https://developers.facebook.com/docs/plugins/faqs#faq_1149655968420144 for more details.
The scraper can be recognized by the User-Agent request header it sends - see https://developers.facebook.com/docs/sharing/webmasters/crawler
(How to exclude clients that send a certain user agent from redirection via .htaccess is something that should be easy enough to research.)
I am trying to get my website validated with the Facebook object debugger and I'm running into the following error:
Object at URL 'http://www.example.com/latest' of type
'smallteaser:teaser' is invalid because the domain
'www.example.com' is not allowed for the specified application id
'597566643589666'.
This error makes perfect sense since I haven't allowed the example.com domain specific access to the Facebook app. But do I really have to?
What I would like to achieve is similar to how Tumblr works when a custom domain is used.
Say, for example, the website www.davidslog.com: it has the following meta tags:
<meta property="fb:app_id" content="48119224995" />
--> This is the Tumblr app ID
<meta property="og:url" content="http://www.davidslog.com/?og=1" />
--> This is a custom domain which points to a Tumblr blog
<meta property="og:type" content="tumblr-feed:tumblelog" />
--> This is a custom Tumblr object type (in namespace tumblr-feed)
And if you then compare this with, for instance, the domain theartofnotwriting.tumblr.com, which has the following metadata:
<meta property="fb:app_id" content="48119224995">
--> This is the same Tumblr app ID
<meta property="og:url" content="http://theartofnotwriting.tumblr.com/?og=1">
--> This is a different domain
<meta property="og:type" content="tumblr-feed:tumblelog">
You can clearly see that the same Tumblr app has multiple URLs and everything validates correctly.
So why is it that this Tumblr page validates correctly and mine doesn't? How can a Facebook app be configured to allow being used on multiple domains?
I ran into this same issue. I figured that Tumblr must have some sort of partnership in place with Facebook to get this special treatment ( ip whitelist? special api? ) -- so I contacted my former Partnerships Rep at Facebook to enquire.
I got to speak with a platform engineer at Facebook about this, and I was totally wrong. There is nothing special going on.
The reason why all the domains running on Tumblr are validating fine with a single app_id, is that the facebook debug tool only checks the validity of the og_tag's structure (at least when it comes to the app_id). It does not validate if the app_id is properly associated with the given domain.
You can test this by putting up a test page with the your app_id on two different domains -- they'll both validate as fine in the debug tool.
When it comes to actual Facebook API access, Tumblr does everything on their domain. When people do use Facebook buttons/etc on Tumblr, it is often through a third party proxy tool (like ShareThis) or with a non-api button embed. I couldn't find a single custom-domain running on Tumblr that used the Facebook API or app_id related buttons. If you can, I'd love to see it.
It's the not answer you want (or I want) -- but that is what is happening. Tumblr's app_id appears on all the domains, but only actually works on ".tumblr.com"; The Facebook debug tool doesn't actually validate the app_id.
How can a Facebook app be configured to allow being used on multiple
domains?
If you try to add more than one domain in the app settings, you get an error that looks like this:
example.com must be derived from one of: Site URL, Mobile Site URL,
Canvas URL, Secure Canvas URL, Page Tab URL or Secure Page Tab URL.
example.org must be derived from one of: Site URL, Mobile Site URL,
Canvas URL, Secure Canvas URL, Page Tab URL or Secure Page Tab URL.
One solution is to set the "Page Tab URL" to a fake URL on example.org like so:
example.org/myfakepage
You don’t actually have to use the page tab for anything. This just allows you to add a second domain.
How can a facebook app be configured to allow being used on multiple domains?
It can’t. Facebook apps are tied to one domain (and subdomains thereof).
Imagine what would happen otherwise – someone could add lots of (big) websites to one single app, and then f.e. embed the JS SDK on each of them, and recognize a user that is connected to that app over “half the internet” … and thereby track their (almost) every step.
Facebook of course does not want this¹ – because they want to make money of the data they collect about users and their movements through the web (they can in theory track you on every single website that uses a simple like button) – they would be stupid if they gave that same ability to every app developer.
¹ OK, that’s my own assumption.
You cannot add multiple domains, unless the domains differ only by extension or subdomain.
In the example below, cuponeados differs only by domain extension (.com vs .com.ar), so both cuponeados.com.ar and cuponeados.com are allowed:
See this answer here: Need to add multiple domains in a single Facebook Application
The way Tumbler does this is to allow sub domains under their domain using *.example.com. This will permit all the sub-domains to work with their app (like odisharkins.example.com, facebook.example.com). There are certain aspects to adding several domains: look at the Facebook Blog.
Further domains must be derived from one of: Site URL, Mobile Site URL, Canvas URL, Secure Canvas URL, Page Tab URL or Secure Page Tab URL.
odisharkins.tumbler.com would not be an issue: it would work fine!
However, harkinstech.com or odisharkins.com will not work.
Worked for me: "The trick is to specify multiple app domains and use a comma separated list of valid URL's for the website URL configuration."
https://www.sitepoint.com/community/t/single-facebook-app-with-multiple-domains/99834/4
Go to developers.facebook.com.
Click on your application and edit the settings.
Add domains to that in the following form: example.com, example.org, subdomain.example.com (no http).
Save.
That’s the only way to do it, at east for the present time. You either add domains (and subdomains) manually or you can’t proceed.
In trying to create an "object" page for my first facebook app, I've run into some difficulty. I followed Facebook's Open Graph Tutorial nearly exactly.
After creating an "object" html page with the appropriate <meta property="og:... tags I tried running the URL through the Debugger Tool as suggested in the tutorial but I'm given the following error:
"Facebook URLs aren't scrapable by this Debugger. Try your own."
This page is in the same directory on my company's linux box as the canvas page, and is certainly not a "Facebook URL". If it matters, I'm using an IP instead of a domain name: xx.x.x.xxx/app/obj.html
...
I continued the tutorial anyway, but ultimately it does not seem to want to post a new action/object (is this even right?). I did however manage to get something to work, as in the app timeline view I apparently actioned one of those objects a couple hours ago. I assume this happened when I was pasting curl POST commands into the terminal.
I'm pretty new to the whole open graph, and facebook APIs, etc., so I'm probably operating under false assumptions of some sort, and I've been all over trying different things, but this error seems pretty bizarre to me and I can't seem to resolve it.
UPDATE
I just took the object page and put it on my own personal shared hosting acct. The debugger worked (inexplicably) fine on it, but I couldn't go too far since it's a different domain than the one authorized by my app.
Make sure og:url inside your html page does not point to facebook.
Also, make sure to look at the open graph protocol page (to see you formatted the og tags correctly.
Also, make sure the page is accessible to everyone, not just yourself.
Without knowing the URL it's hard to be sure, but it's most likely that your URL is either including a og:url tag pointing to a facebook.com address, or a HTTP 301/302 redirect to Facebook instead
I've been at this for almost 3 days straight and now I can't even think clearly anymore.
All I'm trying to do is to get my featured image thumbnail to appear when I paste the link in Facebook.
I'm using the Wordpress Facebook Open Graph protocol plugin which generates all the correct og meta properties.
My thumbnail images are 240x200px which respects the minimum requirements and also respects the 3:1 ratio
I've made sure there's no trailing slash at the end of my post URLs
When I use the Facebook Object Debugger, the only warning is in regards to my locale, but that shouldn't affect it.
Facebook appears to be pulling the right image, at least the URL is correct, but the image appears as a blank square
I've gone through pretty much every thread I could find in forums, but all the information available is about using the correct og tags, which I believe I'm already doing.
Thank you very very much for any help, I'm desperate!! :)
You can troubleshoot the OpenGraph meta tags with the Debugger https://developers.facebook.com/tools/debug - this can at least show if you're using the meta tags properly and if Facebook can 'read' the image.
I finally figured out that the root of my issue was the fact that I was using an addon domain (which is really a subdomain being redirected to the top level domain) and I read on eHow (of all places :) ) that Facebook has trouble pulling data from redirected domains.
Not sure if there was another way around it, but I simply ended up creating a seperate hosting account and everything is loading properly now.
one problem youre going to run into testing is that often the first time your page or post gets liked, fb keeps whatever img it finds in your meta tags or by searching your page. so, you'll keep changing your img meta tag and still it wont show the right pic. it's very anoying. One way to get around it is to change the slug of your post. now, it has a different url and to fb, it's a different page. The downside is you lose all the likes that go with your orig url. Not a problem with a new site.
I ended here googling another problem. Maybe this might help someone:
Please bear in mind that the facebook scraper works asynchronously and will need some time (during my tests around 10 minutes) to be able to display an image after seeing it for the first time.
For more information, here's a more thorough answer on a similar problem.
Indeed, as Andy Wibbels points out the FB debugger is a really handy tool.
I faced a similar issue with a server's og:image tag pointing to a secure subdomain which actually mirrors a CDN server,
<meta property="og:image" content="https://subdomain.pathToImage.jpg" />
<meta property="og:image_secure" content="https://subdomain.pathToImage.jpg" />
The FB debugging tool allows you to see the errors that FB encounters when trying to pull the image.
In my case the subdomain was not registered under the SSL certificate used by the HTTPS protocol. Hence FB was getting the following error,
Curl Error : SSL_CACERT SSL certificate problem: unable to get local issuer certificate
When someone posts a link on facebook, a script usually scans that link for any images, and displays a quick thumbnail next to the post. For certain URLs though (including mine), FB doesn't seem to pick up anything, despite their being a number of images on that page.
I read up that FB prefers the "image_src" rel tag for the image the user wishes to specify, but this does not generate that thumbnail either for my site.
My url goes directly to the DNS, and is not forwarded, so I don't imagine that could be the problem either.
Does anyone have an idea as to why FB can't generate any thumbnails from my site?
The easiest way is just a link tag:
<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />
But there are some other things you can add to your site to make it more Social media friendly:
Open Graph Tags
Open Graph tags are tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
An Open Graph tag looks like this:
<meta property="og:tag name" content="tag value"/>
If you use Open Graph tags, the following six are required:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation.
http://developers.facebook.com/docs/reference/plugins/like
I know this question is old, but I recently dealt with the exact same problem and went round and round on it for a couple weeks. Multiple searches on Google turned up a lot of useful information, but most of it was focused on Open Graph tags, which I wasn't interested in using. Turns out my site had multiple issues, but here are some of the basics.
As EightyEight said, make sure your HTML is valid - and the same goes for your javascript and server-side code (PHP, ASP, etc.). I had a small PHP error in a piece of code that was executing as a separate call to the server from the main page. Due to a number of bizarre coincidences, that code was generating a 500 error - but ONLY for IE6 and strict parsing engines like the W3C validator and the Facebook page crawler. The problem didn't appear in modern browsers (Chrome 4, FF 3.5, IE 8, etc) so I didn't see it right away, but older/stricter clients were showing the 500 every time and that was the main reason FB wasn't crawling our page (when everything else seemed to be correct).
Regarding Randy's response, he's correct that Facebook will keep an old cached copy of your page long after you've updated it. FB claims it's only held for 24 hours, but I experienced much longer times than that. FORTUNATELY, FB has released their "URL Linter" tool that will show you a preview of how your page will appear when being shared on FB, and it will force FB to instantly update its cache of your page. This was a lifesaving tool. You can find it at http://developers.facebook.com/tools/lint/
Regarding the URL Linter tool, be aware that each variation of a URL is cached separately on Facebook, so "www.example.com" is not the same as "example.com". Also, unique capitalization is stored as well, so "ExampleOne.com" is not the same as "exampleone.com". (This led to a lot of confusion between my client and myself when it appeared to me that the cache had been updated just fine and the client claimed they weren't seeing the updates. Turns out I was looking at exampleone.com and had used Linter to update the cache, but they were looking at exampleOne.com which I hadn't submitted to Linter. As a result, I ended up submitting quite a few variations of the URL to Linter just to cover the bases.)
WyrdNEXUS's advice to use the image_src link tag is spot-on. This allows you to be sure that FB is scraping the best possible image for your page. There are some varying guidelines out there about what specs the image file should have, but I've successfully used a 128px square image and have seen a 130x97 image make it through as well. Here is Facebook's official documentation from http://developers.facebook.com/docs/reference/plugins/like/:
Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
Obviously, FB will resize a large image for you, but you'll almost always get better results if you resize it yourself beforehand.
Regarding Mike Cooper's link to the eHow article, avoid using step #1 in that article. It was valid advice when the article was written and when Mike posted the link, but it's now better to use the URL Linter tool for previewing how your page will appear when being shared. By using Linter, you won't cause FB to cache a (potentially) bad copy of the page before you get a chance to tweak it.
Use the facebook lintter available here. http://developers.facebook.com/tools/lint/
This will check your link and re fetch any images. this also clears any old cache.
Or try this - https://developers.facebook.com/tools/debug
To change Title, Description and Image, we need to add some meta tags under head tag.
STEP 1 :
Add meta tags under head tag
<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
NEXT STEP :
Click on below link
https://developers.facebook.com/tools/debug
Add your URL in text box (e.g http://www.test.com/) where you mentioned the tags. Click on DEBUG button.
Its done.
You can verify here https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/
In above url, u = your website link
ENJOY !!!!
try this: http://www.ehow.com/how_4938148_thumbnail-show-up-facebook-share.html
Is the site's HTML valid? Run it through w3c validation service.
Actually, if you've already tried linking that page on Facebook BEFORE adding the "image_src" link, Facebook will keep using the old cached copy and not even see your changes. Try modifying the URL by removing or adding the 'www', or duplicate your page to test it.
I've noticed that Facebook does not take thumbnails from websites if they start with https, is that maybe your case?
had the same problem and figured out that my head closing tag was in the wrong place
Old question but recently I seemed to be running into same issue with thumbnail images from my link not showing in status updates on Facebook. I post for many clients and this is relatively new.
FB doesn't seem to like long URLs anymore — if you use a URL shortener such as goo.gl or bitly.com, the thumbnail from your link/post will appear in your FB update.
Try using something like this:
<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`
Seems to work just fine on Firefox as long as you use a full path to your image.
Trouble is it get vertically offset downward for some reason. Image is 200 x 200 as recommended somewhere I read.
If you used any plugin for seo then Check 1st your seo plugin settings.Then find out Noindex setting if Enable Media for Noindex then disable it.