Short version: In test app with test users, the newly-implemented "Like" button won't turn grey and is immediately clickable again. Am I using the "Like" button incorrectly so that it exhibits this behavior?
I've implemented Facebook's "Like" button on a Facebook Application I've been a part of designing and, while the button is there, clickable, and reports that test users Like the app, the button won't turn grey and is clickable again. Now the app itself is currently in sandbox mode, and we're testing the app with nothing but test users. The og tags and the iframe code for the "Like" button are contained in the html for the canvas page. The og tags read as:
<meta property="og:title" content="GameName Dev" />
<meta property="og:type" content="game" />
<meta property="og:url" content="https://apps.facebook.com/gamenamedev/" />
<meta property="og:image" content="https://image.on/server.jpg" />
<meta property="og:site_name" content="GameName Dev" />
<meta property="fb:app_id" content="MY_APP_ID" />
Thank you for any help you may be able to give.
If the app is in sandbox mode that URL is not reachable by Facebook's crawler because it operates in a logged-out context and won't work properly because the app is 'invisible' - take the app out of sandbox, run the URL through Facebook's Debug Tool to clear the cache and pick up the meta tags and it should be OK
As an aside, I don't really understand why you're pointing a Like button at the app's canvas URL, nobody liking that URL will be contactable by you, nor will you be able to obtain statistics about them - surely creating a Page for the app would be better?
Related
Open Graph tag for Whatsapp link sharing showed that I can have two or more Open Graph images, e.g. a rectangular one for Facebook and a square one for Whatsapp:
<meta property="og:image" content="https://emotionathletes.org/images/logo_1200x630_facebook_shared_image_EN.png">
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="https://emotionathletes.org/images/logo_400x400_facebook_shared_image_EN.png">
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
Facebook and Whatsapp both use the image intended for them. iMessage also works on Desktop.
iMessage on iPhone XR, though, both images are side by side with an ugly result:
For now, I have implemented a server-side check on whether the user agent is Whatsapp, in which case the meta tag uses the 400x400 image on all pages, and the facebook 1200x630 image for all others. I can revert to the previous commit in case someone wants to debug.
How can I have Open Graph image sharing tags compatible with Facebook, Whatsapp, iMessage, and other major sharing platforms, as well as different devices?
As a partial answer, the issue with iMessage seems to have disappeared. Now the same server code shows the first OpenGraph image even if two are present and have different sizes. I tested this by rearranging the images in the view.
For robustness in case of future changes, I implemented a check on the user agent. If it's Whatsapp, I share one square image, otherwise I share one landscape image.
To check for the user agent in the NodeJS controller or middleware:
whatsapp = (req.headers) && (req.headers["user-agent"]) && (req.headers["user-agent"].includes("WhatsApp/"))
To serve the OpenGraph image in the view with PUG/Jade:
if whatsapp
meta(property="og:image", content="https://emotionathletes.org/images/logo_400x400_shared_image_EN.png")
meta(property="og:image:width", content="400")
meta(property="og:image:height", content="400")
else
meta(property='og:image', content='https://emotionathletes.org/images/logo_1200x630_shared_image_EN.png')
meta(property="og:image:width", content="1200")
meta(property="og:image:height", content="630")
I have a website that triggers a warning when clicked through a link shared on Facebook. The warning says:
Possible problem with this link
We have detected that this link: http://www.example.online/ may be malicious.
To keep your account and device secure, only follow links you trust."
I ran the Facebook debug tool and I get the following error message:
Inferred Property
The og:image property should be explicitly provided, even if a value can be inferred from other tags.
I Googled this issue and I understand it is caused by some lack of meta information in the site header, but my site's code has the following in the header:
<meta http-equiv="etag" content="2efdc27c8967f14e2c829e601f7a1228"/>
<meta property="og:title" content="South Jersey Aerial Photograpahy"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.online/"/>
<meta property="og:image" content="https://static.example.com/media/56a444_9273e80a60684dc8b38e56025059f356%7Emv2_d_3200_1800_s_2.png"/>
<meta property="og:site_name" content="South Jersey Aerial Photograpahy"/>
<meta property="og:description" content="South Jersey Aerial Photography is South Jersey's premier aerial photography and aerial videography company. Fully licensed and insured. Contact us today!"/>
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
I have no idea how to fix this error message. The property metatag is clearly there.
In short, you should re-fetch your website information using this tool:
https://developers.facebook.com/tools/debug/
Paste your URL and press Debug. Then either do Fetch, or press Scrape Again.
This will refresh Facebook cache, and your html-page will be reloaded.
Some additional info: https://stackoverflow.com/a/44453472/4899346
Following the already mentioned link to the Facebook object debugger, make sure that your og tags are written RIGHT AFTER the opening <head> tag.
Not sure why this happens but I used to run into the exact same issue until I moved them right after it and then clicked once again on "Fetch new scrape information".
Hope this helps!
Check for og:url tag and see whether the url is correct or not. In my case the url was not correct and so it was causing this type of error.
Ran into the same issue today. It would appear that it's a bug on Facebook's end.
Just by refreshing the Sharing Debugger will show me different error messages after each reload, including "Image Too Big", which clearly was not the case, and "Meta Tags In Body" which also was not correct.
As long as the correct image shows up in the Link Preview, I think you're good to go.
Had same issue today
'og:image' property should be explicitly provided, even if a value can
be inferred from other tags
somehow my linter replaced "(quotation mark) to ”(right double quotation mark), therefore https://developers.facebook.com/tools/debug/sharing/ was showing issue,
cause of that, these meta properties were not visible to fb-bot. After this correction it works fine
Even if you have a proper OG tag on a page, can Facebook still ignored og:image value.
On my Magento 2 website, I use Magento 2 Facebook Open Graph by Magefan and had this issue too even all OG tags look good :-(
After I contacted them (magefan), they fixed the issue and released the module update v2.0.12
It turned out that Facebook only looks for og:image in the first 50Kbs of the page source.
So if you are using inline CSS, or some JS in the the og:image will not be seen by Facebook. That was the reason in my case.
The solution is to put OG tags as high as possible in the node.
Added the
<meta property="og:image:secure_url" content="https://abc/image.jpg" />
in order for the facebook debug to actually show my issue that the image was not 200x200. Corrected that and had to completely refresh the debug to resolve.
OG tags should be property instead of name for those of you who copy/paste from other tags like twitter, who uses name.
Eg
<meta property="og:image" content="..." />
<meta name="twitter:image" content="..." />
If you're using a plugin like W3 Total Cache, Just purge your cache and go back to Facebook object debugger page mentioned by #Alex C and then click on Fetch new scrape information.
This solved the issue for me
`<meta property="og:image" content="https://static.wixstatic.com/media/56a444_9273e80a60684dc8b38e56025059f356%7Emv2_d_3200_1800_s_2.png"/>`
<meta property="og:image:width" content="2500"/>
<meta property="og:image:height" content="1330"/>
1200 pixels x 627 pixels
The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don't exceed the 5MB size limit.
Double check your img file size.
Remember you need to add og:image:secure for "https"
2.og:image only works with "http".
Try
<meta property="og:image" content="http://example.com/image">
<meta property="og:image:secure" content="https://example.com/image">
I had og:url content as http://... when my site always redirected to https://.... Updating this fixed the issue for me.
I have had success by using https://developers.facebook.com/tools/debug/sharing/batch/ to invalidate the FB cache, then using https://developers.facebook.com/tools/debug/ to refresh it.
This seems to help if a page/post has been previously shared, say, and then an og image or other og element was added.
Sharing certain links on Skype triggers the program to show preview with image from the page. On a website I work on - there are big images on certain pages but Skype picks up the logo of the website instead. I was unable to find what meta tags would make Skype pick up the intended image and preview it.
I have a <link rel="image_src" href="http://www.example.com/path/to/img.png" /> that works for Facebook-sharing preview (img.png is used instead of the logo of the website) but doesn't work for Skype.
So how would you hint Skype which image should be used for preview?
I will need to find some source to support this, but I think that if you have defined some open graph meta data, it will pick the image specified in there. For example, I have these in one of my sites:
<meta property="og:title" content="Site Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://my.site.com" />
<meta property="og:image" content="http://my.site.com/images/thumb.png" />
<meta property="og:description" content="Site description" />
And the image displayed as the link preview on Skype is the thumb image specified in og:image (that is not available anywhere else on the page).
We are in 2021 and this Skype issue continues! :/
I communicated through Microsoft forum and several users have the same problem.
My open graph metadata is well defined, in fact the link previews fine on Facebook and Twitter, but not on Skype.
I already reported the bug to Skype, hopefully they will answer something ...
I'm using the Twitter Card Preview tool to test my Twitter Card set up.
<meta property="twitter:url" content="http://liberalgeek.com/content/why-do-atheists-celebrate-christmas" />
<meta property="twitter:card" content="summary" />
<meta property="twitter:description" content="I can't speak for all atheists, I can only speak for myself, so please leave a comment below and explain why you celebrate Christmas! When I hear someone ask, "Why do atheists celebrate Christmas?" my first thought often is: Better Question: Why do Christians celebrate Christmas?" />
<meta property="twitter:creator" content="#kennywyland" />
<meta property="twitter:title" content="Why do Atheists celebrate Christmas?" />
When I use the above meta tags, the Preview works and I get the expected results. When I try to add a twitter:image tag though, it fails. Here is an example:
<meta property="twitter:image" content="http://liberalgeek.com/sites/default/files/styles/large/public/Christmas%20Tree.jpg" />
If I include a twitter:image meta tag and I click the Preview button, it spins for a bit and then gives me the error:
Looks like something is technically wrong.
Please try again in a few minutes.
I've tried other images on that site with no success. I've tried other (non-drupal) sites hosted on the same apache server to make sure it wasn't a drupal problem:
<meta property="twitter:image" content="http://www.journalscape.com/kenny/images/acupuncture-kenny-2003-08-20-small.jpg" />
If I copy one of these images to a different machine with a different apache server, twitter sees it and it works just fine. Twitter shows it in the preview.
I have checked my robots.txt on both sites. Nothing in my robots.txt should prevent Twitterbot from fetching, but just in case I've explicitly added the code they suggested:
User-agent: Twitterbot
Disallow:
However, I am watching my apache web logs scroll by and Twitter never attempts to fetch the image. When I click the preview button, I would expect to see an entry in the access log showing twitter fetching the image... but nothing. I've tried several images to make sure it wasn't an issue of caching.
What am I doing wrong?
EDIT: I found one of the sites running on my machine (same apache) works just fine. If I use this image:
<meta property="twitter:image" content="http://www.geekqi.com/images/StylizedYinYangRedLucida.png" />
Then twitter fetches it immediately. I don't understand why one works and the other doesn't.
As it turned out, the problem was a timing one. After adding the robots.txt file, I needed to wait a couple of hours for Twitter to see the new robots.txt and then it started fetching my images just fine.
I have a problem with the og:image tag. I followed the instructions on SO about implementing the tag, which was very straight forward. It works great when someone like's the page. There is now a problem though, that when I post the link into a message I am composing on facebook, it does not show any thumbnail.
Here's my site: http://www.sunlitehardware.com.au/
So check this.
Okay jump onto facebook, and create a private message to one of your friends.
Paste in this link: http://www.sunlitehardware.com.au/blog/Power-Tools-Save-Your-Energy
Watch the thumbnail box below the post generate, and pull in some data. You'll notice it has a title, a link but no image.
The head of that particular link looks like this:
<head>
<link rel="shortcut icon" type="image/x-icon" href="http://www.sunlitehardware.com.au/site/assets/template/images/favicon.ico" />
<meta property="og:title" content="Power Tools - Save Your Energy" />
<meta property="og:image" content="http://www.sunlitehardware.com.au/site/assets/media/Bosch-1590EVSK-6.jpg"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" Sunlite Hardware stock a massive range of tools for all your hardware needs in Sydney City & Bondi Junction." />
<meta name="keywords" content=",hardware, store, city, power tools, llight bulbs, paint, sydney, bondi junction" />
<meta name="verify-v1" content="Ow6TX6iHLufi9DAwV6mWquC9SEW4Les+o/wz29uUdeY=" />
If you take a look, the link to the og:image link, you can see the link points here:
http://www.sunlitehardware.com.au/site/assets/media/Bosch-1590EVSK-6.jpg
If you were to click that, you should be able to see the image, i know I can, so the link is working.
Seems like for some reason facebook is ignoring it ..
Take a look at the facebook lint page here: http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwww.sunlitehardware.com.au%2Fblog%2FPower-Tools-Save-Your-Energy
It has the thumbnail there. It just won't work when making posts. Any ideas?
The Facebook Debugger is a handy way of checking your links and usually warns you of the problems with your OG tags.
For the og:image, try using an image that's closer to 50x50 (yours is roughly 1200x1200).