Need help understanding how opengraph works and how it relates to the "FB Like" button.
We do have opengraph meta tags deployed on all of the pages for our content. However
it looks like the only way to get "FB Like" button to work, is to run the URL thru the facebook linter.
If a user attempts to "Like" the page, that was never liked before, only the URL will be posted to the wall.
If the url is ran thru the linter, all the consecutive likes will work properly, by image, title and description will be pulled.
is it possible that the app_id is not linking properly with the pages?
having our FB Admin go and like all the content that is produced is not an option
http://www.nydailynews.com/life-style/travel/underwater-photos-amazing-shots-sea-gallery-1.1078782
<meta property="fb:app_id" content="366487756153">
<meta property="fb:admins" content="1594068001">
<meta property="og:site_name" content="NY Daily News">
<meta property="og:title" content="Mark Tipple's Underwater Project - Underwater photos: Amazing shots from under the sea">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.nydailynews.com/life-style/travel/underwater-photos-amazing-shots-sea-gallery-1.1078782">
<meta property="og:image" content="http://assets.nydailynews.com/polopoly_fs/1.1078770!/img/httpImage/image.jpg_gen/derivatives/searchthumbnail_75/image.jpg">
<meta property="og:description" content="Talented underwater photographer Mark Tipple, from Sydney, Australia, lies in wait for unsuspecting swimmers and surfers before snapping a perfect picture of them from beneath the waves.">
http://www.nydailynews.com/gossip/john-travolta-experienced-bed-passionate-hotel-romp-claims-masseur-luis-gonzalez-article-1.1079272
<meta property="fb:app_id" content="366487756153">
<meta property="fb:admins" content="1594068001">
<meta property="og:site_name" content="NY Daily News">
<meta property="og:title" content="John Travolta was 'a great kisser' and ‘very experienced’ in bed during passionate hotel romp, claims masseur Luis Gonzalez ">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.nydailynews.com/gossip/john-travolta-experienced-bed-passionate-hotel-romp-claims-masseur-luis-gonzalez-article-1.1079272">
<meta property="og:image" content="http://assets.nydailynews.com/polopoly_fs/1.1079279!/img/httpImage/image.jpg_gen/derivatives/searchthumbnail_75/image.jpg">
<meta property="og:description" content="Another hotel masseur is claiming sexual shenanigans on the part of John Travolta -- only this accuser says he welcomed the actor's horny horseplay and found him "very experienced" in bed.">
In order to get your page recognized as a custom open graph object you'll need to follow these steps.
Create a facebook app
Setup site domain, namespace etc...
Create a custom action and a custom object under app settings >> Open Graph: Getting Started (see this link for help)
After creating it, you'll see your object under object types in Open Graph Settings
Click on "Get Code" button to get the html tags
Update your page to show up the same html head & meta tags
Go to http://developers.facebook.com/tools/debug to test if you have setup everything right
P.S. Don't forget to hit correct answer if it works, or PM me for more help
Your URL isn't set to the application as noted in the linter,
Object at URL 'http://www.nydailynews.com/life-style/travel/underwater-photos-amazing-shots-sea-gallery-1.1078782' of type 'article' is invalid because the domain 'www.nydailynews.com' is not allowed for the specified application id '366487756153'. You can verify your configured 'App Domain' at https://developers.facebook.com/apps/366487756153.
Add the proper domain to your settings and it should work.
Related
Is it possible to add OG:video data to the head of a website so that whatsapp and facebook can play the video inline?
I have currently only seen this working with youtube and instagram links.
Whenever I copy the whole meta data from a working instagram post and paste it into my document the facebook debugger picks up on all the data.
However whatsapp only shows the thumbnail and not the inline video.
Is this feature only for whitelisted domains like youtube or is this something anyone can do?
I noticed that Vimeo also can't play inline video in whatsapp.
This is the meta data and url from Instagram that plays online video in whatsapp.
https://www.instagram.com/p/BtJnyR3lb6o/?utm_source=ig_web_button_share_sheet
<link rel="canonical" href="https://www.instagram.com/superjumpbelgium/p/BtJnyR3lb6o/">
<meta content="112 Likes, 5 Comments - SuperJump (#superjumpbelgium) on Instagram: “How #cool is this 🤩👌🤘👊👊👊👊💫🌟🤩🤸♀️ #flip #salto #superjump”" name="description">
<meta property="og:site_name" content="Instagram">
<meta property="og:title" content="SuperJump on Instagram: “How #cool is this 🤩👌🤘👊👊👊👊💫🌟🤩🤸♀️ #flip #salto #superjump”">
<meta property="og:image" content="https://scontent-bru2-1.cdninstagram.com/vp/c29fb33d61be461420ca3c97c62c3c63/5C53739C/t51.2885-15/e15/50160334_111325143309745_7951846762696340671_n.jpg?_nc_ht=scontent-bru2-1.cdninstagram.com">
<meta property="og:description" content="112 Likes, 5 Comments - SuperJump (#superjumpbelgium) on Instagram: “How #cool is this 🤩👌🤘👊👊👊👊💫🌟🤩🤸♀️ #flip #salto #superjump”">
<meta property="fb:app_id" content="124024574287414">
<meta property="og:url" content="https://www.instagram.com/p/BtJnyR3lb6o/">
<meta property="instapp:owner_user_id" content="5841998081">
<meta property="al:ios:app_name" content="Instagram">
<meta property="al:ios:app_store_id" content="389801252">
<meta property="al:ios:url" content="instagram://media?id=1966277691297873576">
<meta property="al:android:app_name" content="Instagram">
<meta property="al:android:package" content="com.instagram.android">
<meta property="al:android:url" content="https://www.instagram.com/p/BtJnyR3lb6o/">
<meta name="medium" content="video">
<meta property="og:type" content="video">
<meta property="og:video" content="https://scontent-bru2-1.cdninstagram.com/vp/46df451cb72839072bc7ab6078dc3d0f/5C52A4BB/t50.2886-16/51464036_412254452675177_32285228113
11104851_n.mp4?_nc_ht=scontent-bru2-1.cdninstagram.com">
This is the correct way to embed a video via OG meta data, but … https://developers.facebook.com/docs/sharing/webmasters#media:
Note that your video is not guaranteed to play in-line based on a variety of factors.
A couple of month ago, I heard that Facebook is reducing the number of videos they actually play inline in the news feed. While that note probably refers primarily to that as well, it might be applicable in other apps owned by Facebook, too.
You can’t do more than implement this as outlined in the docs, maybe send it through the Facebook debug tool, too, to make sure there aren’t any errors … but whether it will actually play inline, is out of your hands.
I don't know why Facebook Share not getting value of og:image, og:title of my website while I inspect element I see everything correct.
This is facebook debug:
Attributes are inferred: The og:image attribute must be explicitly provided, even if it is possible to derive value from other tags.
Lack of assets
The following required assets are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id.
Bad response code
URL returned a bad response response code
These are elements on my website
<meta property="og:url" content="http://vnlovepet.com/blog/huan-luyen-cho-alaska-nhu-the-nao-cho-dung-58">
<meta property="og:type" content="article" />
<meta property="og:title" content="Huấn luyện chó Alaska như thế nào cho đúng?">
<meta property="og:description" content="Huấn luyện chó Alasla là một trong những sở thích của nhiều người, nhưng họ lại chưa biết cách huấn luyện thế nào cho đúng.">
Have a look, how exactly Facebook's scraper sees your URL: https://developers.facebook.com/tools/debug/echo/?q=http%3A%2F%2Fvnlovepet.com%2Fblog%2Fhuan-luyen-cho-alaska-nhu-the-nao-cho-dung-58
There are errors dumped into HTML and that's the reason of your issue.
Are there any best practices for offering like buttons within canvas applications? We've got an app which has lots of content, when I specify the OG:URL of some piece of content as a page within apps.facebook.com/myapp, the "like" share shows up as pointing at apps.facebook.com. Is this the best way to do this, or how are other people handling this? Thanks!
The OG tags for my content look roughly something like this:
<meta property="og:title" content="some cool title" />
<meta property="og:image" content="some cool image"/>
<meta property="og:site_name" content="my site name" />
<meta property="fb:admins" content="my id" />
<meta property="og:description" content="Hey neat wow this is content."/>
<meta property="og:url" content="http://apps.facebook.com/myapp/somecontent.aspx">
<meta property="fb:app_id" content="my_appid" />
Short answer: Common practice seems to be that the og:url property points to the content's address on your server (not the Facebook Canvas iFrame wrapper's URL at apps.facebook.com), and in most cases this URL immediately redirects to apps.facebook.com/your-game.
You can see how many of the top games are doing this by just playing the games enough to earn an achievement or fire off an OG action, then viewing your Activity Log for some such story, right-clicking a link to an object (like an achievement), and pasting it into Facebook's Object Debugger. Here are some URLs of objects from some top games:
Words with Friends:
https://wwf-fb.zyngawithfriends.com/opengraph/word.php?word=sheet
SongPop:
https://wam-mobile.appspot.com/facebook/canvas/opengraph/achievement/sweetStreak1/
Candy Crush Saga:
http://candycrush.king.com/FacebookServlet/opengraph/candycrush:level?episode=http%3A%2F%2Fcandycrush.king.com%2FFacebookServ...etc.
For reference, the Facebook Object Debugger is here: http://developers.facebook.com/tools/debug
According to user Igy:
There's no limitation on pointing to the apps.facebook.com url instead
- the request is rewritten to silently be a request to your app's callback URL, plus the same path supplied to the apps.facebook.com URL
- one reason not to do this is that this behaviour leaves some of your app's functionality out of your direct control,
... for example if a bug goes live on FB which causes all such URLs failed to parse correctly (which has happened recently).
We've been trying to get the Like button to work with og:type = article since we are sharing photos. So far, if we use article, the post appears on the wall but the counts do not increment correctly.
If the user clicks like, before the comment box appears, the like count out at
https://api.facebook.com/method/fql.query?query=select+url,total_count,like_count,comment_count,share_count,click_count+from+link_stat+where+url=%27http%3A%2F%2Ftestenv.snap2twitter.com%2Fphotos%2F1829074%27&format=json
shows the like count incremented by one.
If the user enters a comment, however, the count is reset to 0!
If we change the og:type to "website", the counts work but ONLY if a user enters a comment (reverse problem). If they don't, nothing appears on the Wall or in the timeline but the Activity log shows the user Shared a link.
Our headers (for og:type=article) are:
<html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
The og:tags are
<meta content="Love My Yellow Ferarri - Snap MyLife" property="og:title">
<meta content="Snap MyLife" property="og:site_name">
<meta content="article" property="og:type">
<meta content="<my app id>" property="fb:app_id">
<meta content="http://files-testenv.mobicious.com/files/2012/02/28/164634/1829078/new_large.jpg" property="og:image">
<meta content="http://testenv.snap2twitter.com/photos/1829078" property="og:url">
<meta content="Love My Yellow Ferarri" property="og:description">
Anyone have any ideas? Does anyone have the Like button working correctly with og:type=article?
TIA
hope this help you
News things about og:type = article
Live Example
I'm trying to learn and test out the new open graph beta that allows you to define actions, objects, and publish them. I believe I'm following the tutorial and doing exactly what it says, but the defined actions are not publishing. I would greatly appreciate it if someone could help me discover what I'm doing wrong. Here's the details:
For the object, here's what I get when I click get code: (I'm changing header links since I can't post more than 2 links on my account)
<head prefix="og: htp://ogp.me/ns# fb: http://ogp.me/ns/fb# bible_app:
http://ogp.me/ns/fb/bible_app#">
<meta property="fb:app_id" content="223527597700292">
<meta property="og:type" content="bible_app:verse">
<meta property="og:url" content="Put Your Own URL Here">
<meta property="og:title" content="Sample Verse">
<meta property="og:description" content="Some Arbitrary String">
<meta property="og:image" content="https://s-
static.ak.fbcdn.net/images/devsite/attachment_blank.png">
For og:url, I have tried the actual page where I have the object: bibleverses4.me/app/learn.html and I've also tried the sample url samples.ogp.me/225426837510368.
For the action, I just modified the tutorial:
`FB.api('/me/bible_app:learn' +
'?learn=http://bibleverse4.me/app/learn.html','post',
function(response)`
For the url in the action, I have tried both the above url and the sample FB gives.
The end result and problem: everything shows up, but when I click the "Learn" button, it says
The page at Bibleverses4.me says:
Error occured
So, I'm guessing I'm doing something wrong here, but I'm trying to learn and would greatly appreciate any help that could be offered.
Thanks.
I think that it should be:
FB.api('/me/bible_app:learn' +
'?verse=http://bibleverse4.me/app/learn.html','post',
function(response)
Where the /me/bible_app:learn is your action and verse is your object...