I’m trying to get the Facebook link sharing meta tags to work for my Blogger site, and though I got link previews mostly working (images, title, custom description, etc.), I cannot get the author link to display.
Here’s a screencap showing what I’m referring to:
Yet here’s a link preview for my blog, as seen using the FB Sharing Debugger:
The Facebook instructions say only to check that “Who Can Follow Me” is set to “Public” in my profile settings, and to add <meta content='<FB_profile_URL>' property='article:author'/> in my template’s <head>. I’ve done that and debugged my meta tags in the Debugger so that only a couple minor and unrelated errors/warnings remain (one about a missing fb:app_id property (I don’t have a FB app) and sometimes a warning about a post image being ignored because it’s smaller than 200×200).
Here are all my social media meta tags in my template (including tags for Twitter and Google+ in case someone points out any conflicting tags or properties I may not know about):
<!-- start social media meta tags -->
<!-- start Facebook/Open Graph meta tags -->
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/joemcken' property='article:author'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='blog' property='og:type'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-oXxCTyNh6gc/WY7QMBR_eNI/AAAAAAAAAl0/cGml_-lFF6wfpvr_gnVwuWBgAKN8Ok3awCLcBGAs/s1600/Preliator_favicon_large.png' property='og:image'/>
</b:if>
<!-- end Facebook/Open Graph meta tags -->
<!-- start Twitter card meta tags (source: https://twittercommunity.com/t/blogger-twitter-card-image-display-problem-solution/82315) -->
<meta content='summary' name='twitter:card'/>
<meta content='#joemcken' name='twitter:site'/>
<meta content='#joemcken' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-oXxCTyNh6gc/WY7QMBR_eNI/AAAAAAAAAl0/cGml_-lFF6wfpvr_gnVwuWBgAKN8Ok3awCLcBGAs/s1600/Preliator_favicon_large.png' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!-- end Twitter card meta tags -->
<!-- start Google+ meta tags -->
<b:if cond='data:blog.pageType != "index"'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<b:else/>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
</b:if>
<link href='https://plus.google.com/102494175517749861425' rel='author'/>
<link href='https://plus.google.com/102494175517749861425' rel='publisher'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-oXxCTyNh6gc/WY7QMBR_eNI/AAAAAAAAAl0/cGml_-lFF6wfpvr_gnVwuWBgAKN8Ok3awCLcBGAs/s1600/Preliator_favicon_large.png' itemprop='image'/>
</b:if>
<!-- end Google+ meta tags -->
<!-- end social media meta tags -->
Update: I was tinkering around with a test post earlier and when I previewed it on Facebook, the author tag worked. I hadn’t changed anything in the blog’s template or meta tags before – it just randomly appeared. However, upon testing again with a different test post, the author tag disappeared. I’ve tried playing with various things – post length (from 9 paragraphs to just ten words), presence of an image or no, etc. – but I can’t get the author tag to reappear, even though it was just there.
Update #2: Below are the results of further testing. (Please remove the brackets around https in the links to make them work.)
FIRST: I posted a notification that I was going to make a bunch of test posts, and when I shared the link for that post, the author tag displayed immediately.
• Sharing Debugger link: [https:]//developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fpreliator2.blogspot.com%2F2017%2F08%2F13-Tinkering-around-with-some-test-post.html
• Object Debugger link: [https:]//developers.facebook.com/tools/debug/og/object/?q=https%3A%2F%2Fpreliator2.blogspot.com%2F2017%2F08%2F13-Tinkering-around-with-some-test-post.html
SECOND: I created “Test post 2”, and the author tag displayed for that one as well. (Original post has been deleted, but the scrape information remains for now.)
• Sharing Debugger link: [https:]//developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fpreliator2.blogspot.com%2F2017%2F08%2Ftest-post.html
• Object Debugger link: [https:]//developers.facebook.com/tools/debug/og/object/?q=https%3A%2F%2Fpreliator2.blogspot.com%2F2017%2F08%2Ftest-post.html
THIRD: I then created “Test post 3”, which is identical to “Test post 2”, above, except for the slightly different title and permalink. Yet the author link never appeared for this one. The debug information, below, is also identical to “Test post 2”. (Original post has been deleted, but the scrape information remains for now.)
• Sharing Debugger link: [https:]//developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fpreliator2.blogspot.com%2F2017%2F08%2Ftest-post-3.html
• Object Debugger link: [https:]//developers.facebook.com/tools/debug/og/object/?q=https%3A%2F%2Fpreliator2.blogspot.com%2F2017%2F08%2Ftest-post-3.html
UPDATE #3: I’ve tried everything I can think of. As it stands, maybe 1 link in 10 I post to Facebook will show the author tag, and it seems entirely random which do or don’t (though possibly they appear more often on links to shorter posts, or with shorter titles/URLs/meta descriptions … can’t confirm, though).
For instance, I posted this last night and the author link displays fine (screencap link):
[https:]//image.prntscr.com/image/uwNewssrRz_GD8-z5kuPBA.jpeg
The tag remains after rescraping:
[https:]//developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fpreliator2.blogspot.com%2F2017%2F08%2F16-I-feel-Hals-pain-120.html
This happened after the introduction of Facebook Instant Articles, Only verified author/publisher name's shall appear on the Link preview.
The step required to solve the issue is as follows:
Sign up to Facebook Instant Articles, you will have the choose the page you need to associate while signing up.
After signing up, in the Configuration section, under the Tools section, you will be asked to enter the domain details (etc example.com), you must verify your website in-order to publish instant articles.
Follow the instruction for adding the meta tag, if you are using wordpress, you can see the instruction here. Hopefully assuming that you would be having other meta details such as app_id, publisher name, author link etc.
Soon you shall be receiving a notification for Linked Publication, asking for the confirmation.
Linked Publication Preview
That's it. Soon the author profile link would be appearing in the Link Preview.
I have a solution that worked for me. In this similar question someone has suggested using the FB_ID instead of your alias FB URL. I tried that, and initially didn't see any difference in the Object Debugger. After an hour or two, Facebook prompted me to confirm linked publications, and then I can see it correctly in the debugger:
So, first use your FB_ID instead of your alias, e.g.: https://facebook.com/123456789 instead of https://facebook.com/yourname
After I made this change, Facebook notified me and asked me to confirm linked publications, you have to manually enter the name of the FB page for whom you write, and then click the "Add" button, once confirmed it will look like:
Related
Alright so I have set my meta tags exactly how it says on the facebook developer page, and the scraper even shows the data that will be showed to be correct, but when using the facebook share button on my website http://www.etdigitaldesign.com/, all that it shares is the website url, it doesn't include any of the information from the meta tags, that the scraper says it should. No site name, no description, no image. just the website URL.
This is really confusing to me because the scraper says the share button should be showing the proper info, and I'm using a copy/pasted code snippet from the fb developers page, so I can't see what my error could possibly be...
here is what the scraper shows:image at http://i.imgur.com/zNIyhfg.png since I can't post images yet.
and here's my meta code:
<meta property="og:url" content="http://www.etdigitaldesign.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ET Digital Design" />
<meta property="og:description" content="Currently doing a grand opening special, making several free websites to get my name out there. Visit the site if you are interested!" />
<meta property="og:image" content="http://www.etdigitaldesign.com/images/etlogobig.png" />
All facebook's examples have self-closing meta tags, so try that and then re-scrape, if that still doesn't work add a fake parameter eg http://example.com/?20 and scape
At the moment the title and image are showing, just not the description. It shows HHTP status 206,which is partial content, but that's not a problem
I have found thousands of solutions for embedding a flash player in a Facebook wall, most of them considerably outdated and almost nothing posted after the major UI changes that FB has made relatively recently.
That being said, the most simple and (theoretically) still valid way for doing this that I've found is through posting a link that points to an HTML which presents the Open Graph tags that FB would read and interpret, as follows:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My title!</title>
<meta property="og:title" content="My title!">
<meta property="og:type" content="video.movie">
<meta property="og:url" content="http://mysite.com/url/">
<meta property="og:description" content="content description">
<meta property="og:image" content="http://mysite.com/URL_THUMBNAIL.jpeg">
<meta property="og:site_name" content="mysite.com">
<meta property="og:video" content="http://mysite.com/flash.swf?flashVar=0101">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="300">
<meta property="og:video:height" content="200">
It is important to note that the flashVar is necessary for the kind of application I am using, and I wouldn't expect that to be the problem, as it isn't pointed out as so when I use Facebook's object debugger (developers.facebook.com/tools/debug/).
Furthermore, the most intriguing problem is that this solution actually works when I post the link with an account that still uses the old Facebook interface (without Graph Search) - a little "play" button will appear [as shown on the following link] on the thumbnail and, when I click on it, the SWF starts to play on my Facebook wall.
http://das.ufsc.br/~alexandrec/SSoldFB.png
However, when I try to post the same link on my FB account (which already has the Graph Search and all the other UI changes), this play button won't appear [as shown below] and, if I try to click on the thumbnail, another window will open with the link specified on og:url
http://das.ufsc.br/~alexandrec/SSnewFB.png
I am wondering if this is a matter of having my website put on some sort of white list, but I haven't found any up-to-date documentation that mentions an actual list of this kind - and as my link works on the old UI I believe I would already be on that list.
There is another way for posting SWF files on the wall through the Graph API, making a POST request of an object with a source, a message and so on, but I find this way not so interesting as I can't specify the width and height of the embedded player and that is pretty essencial for my application.
Anyone knows why this happens? Has Facebook decided that it won't allow users to post SWFs anymore, or is this just a (hopefully temporary) Facebook bug? Is there any other way to make this work (taking into consideration my necessity for defining height and width of the embedded player)?
The problem I'm having is when I post a link to a post on my website to either Facebook or Google+ that link points to my homepage. Even in preview, the thumbnail displayed is that of the homepage.
From what I have found (which hasn't been much) it seems that the problem might be with the facebook metadata. I have tried to validate it on facebook's open graph validator and at first I was getting a 206 result when the links were working. Now I get: Facebook URLs aren't scrapable by this Debugger. Try your own. Not sure why.
Having the same issue with Google+. When I first published the website it was working fine and this happened out of nowhere.
Here is what I have in my header:
<!--Facebook Metadata /-->
<meta property="og:title" content="Website Title"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://URL.com/"/>
<meta property="og:image" content="http://URL.com/img.png"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="fb:admins" content="User_1"/>
<meta property="og:description" content="Website Descriptiom"/>
<!--Google+ Metadata /-->
<meta itemprop="name" content="Google+ ID">
<meta itemprop="description" content="Description">
<meta itemprop="image" content="Empty">
I have tried removing it and still the problem persists. I do want to point out that I have an html site with a wordpress blog that's being hosted on my server. Wondering if the issue might be with wordpress?
Should the metadata be placed on the index.html and the wordpress homepage or just the index.html? Any help would be appreciated. Thanks.
When you delete those metadata tags, specifically the og: ones (facebook's open graph meta tags) - you have to tell Facebook to pick up a new copy of your page as they cache everything. If you haven't tried this already:
Remove those tags
View the source on your live site, to confirm they are in fact removed
Go to http://developers.facebook.com/tools/debug and type in the URL of the page you are testing. This will tell Facebook to grab a new copy.
If that works (as it should), then you can play around with what tags to keep and how to make them dynamic - knowing that anytime you make a change, you will have to redo step #3 to tell FB to grab a fresh copy.
I understand this is the main facebook developer community; I wanted to as a question and see if anyone can help?
I built a wordpress photo portfolio blog - http://shutterliving.com/movember-moustache/
I have the official facebook plugin installed and I have its own LIKE button running at the top and bottom of the page.
I also have the ‘TFG social share’ plugin installed:
wordpress.org/support/plugin/twitter-facebook-google-plusone-share
I am now wondering if I have managed to set it up correctly as I am encountering some unexpected behavior.
When I preview an unpublished post, the LIKE counter (for the official plugin) is at 0, however the ‘TFG social share’ plugin shows a 12 count? Why is there a discrepancy? How can the post get a like count if it has yet to be published? When I create a new post and save it as a draft, then preview it, both LIKE counts are at 0.
When I go to the debugger tool and input my URL I get errors that I don’t really understand, but a bit of googling told me they were not serious errors. Not sure though on how to fix them? Any idea?
Also when I click on my URL link in the Fetched URL and the Canonical URL, it takes me to a ‘Page not found’ page? Is this normal? Should it not take me through to my homepage?
Response Code 200
Fetched URL shutterliving.com
Canonical URL shutterliving.com
Open Graph Warnings That Should Be Fixed
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Meta Tag <meta property="og:locale" content="en_US" />
Meta Tag <meta property="og:site_name" content="shutterLIVING" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="og:title" content="shutterLIVING" />
Meta Tag <meta property="og:description" content="Jamie A Cowan's PhotoBlog and Portfolio" />
Meta Tag <meta property="fb:app_id" content="178646462271083" />
I also associated the INSIGHTS analytics to my web page, however the information it shows is not accurate, ie it says I have only 55 LIKES on my page, however I have much more Likes that that
http://shutterliving.com/movember-moustache/
This leads me to believe I have set something up incorrectly.
Can anyone help with any issue
Jamie.
I have an H.264-encoded mp4 file that I'm trying to get embedded into a Facebook post when the page that's serving it is Liked or Shared.
My understanding is that I simply need to have the right Open Graph <meta> tags in place on the URL that's being liked/shared. However, I've tried several different sets of <meta> tags and the video is still not embedding when I paste the URL into my Status Update and Post it. It does embed the image from the og:image property, but clicking on the image just passes the user off to og:url.
When I use the the Facebook Debugger tool, here's what it displays for Raw Open Graph Document Information:
Meta Tag: <meta property="fb:app_id" content="000000000000000" />
Meta Tag: <meta property="og:url" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:title" content="Example Page" />
Meta Tag: <meta property="og:description" content="Example Description" />
Meta Tag: <meta property="og:site_name" content="Example" />
Meta Tag: <meta property="og:image" content="http://content.example.com/images/example.png" />
Meta Tag: <meta property="og:type" content="video.other" />
Meta Tag: <meta property="og:video:width" content="400" />
Meta Tag: <meta property="og:video:height" content="300" />
Meta Tag: <meta property="og:video" content="http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d" />
Meta Tag: <meta property="og:video:type" content="application/x-shockwave-flash" />
Meta Tag: <meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0" />
Meta Tag: <meta property="og:video:type" content="video/mp4" />
Meta Tag: <meta property="og:video" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:video:type" content="text/html" />
The values above have been replaced with dummy values, but they're all valid links.
Facebook seems to parse this out correctly, since it shows under Type of Share -> Video:
status: Video embedding on Facebook enabled
1: application/x-shockwave-flash
2: text/html
When I go directly to the flash player url (http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d), the video plays correctly (embedded in the flash player).
Things I've tried/considered:
Skipping the flash player
Originally I didn't even have a flash player in the og:video list and was trying to just use the mp4 file first. Facebook didn't pick it up and treated the like/share as a plain link share.
Whitelisting
At one point apps/domains had to be whitelisted before embedded video was allowed. This is no longer necessary. I haven't whitelisted my domain.
HTTPS
Some sources say that the flash player being used needs to be hosted over HTTPS. My research indicates this should only apply if the user is browsing Facebook over HTTPS, which I haven't been when testing.
I'm currently running some tests with an HTTPS-served flash player to see if anything changes.
Older tags
For the heck of it, I tried adding older Facebook <meta> and <link> tags (e.g. title, video_src) to see if it would pick them up. It did not.
Cache refresh
I passed a ?fbrefresh=1 along with the URL in the Facebook Debugger to make sure the cached version of the URL got cleared. That did result in the newest meta information getting pulled in, but still no embed.
iPad
Since I've got the video/mp4 fallback in my og:video tags, I looked at my Facebook news feed in the iPad app. Excitingly, the thumbnail image had a little play button overlayed on it. However, touching the play button resulted in a redirect to the share URL instead of playing the video inline. Safari on the iPad had the same behavior (but with no play button overlay).
Document namespaces
I added the appropriate Open Graph / Facebook namespaces to my markup:
<html xmlns:og="http://ogp.me.ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
But it didn't seem to have an effect. I don't think they're required.
Is there something that I'm missing here? I feel like a lot of resources I've found so far could be outdated since Facebook has changed their API several times, so it's possible that I've missed a newer requirement.
How can I get the video to embed and play back within the Facebook timeline?
Having a look at YouTube's og: meta tags, the only differences I can spot are:
YouTube's og:url and og:video are served from the same domain and subdomain (www.youtube.com). Mine are served from the same domain, but different subdomains (media: content.example.com, player: static.example.com). Does the subdomain have to be the sam across all of the og: meta information?
YouTube's share URL isn't a straight .swf per se, but it is flash content:
rob#uvm:~$ curl "http://www.youtube.com/v/oHg5SJYRHA0?version=3&autohide=1" > yt
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 4242 100 4242 0 0 43522 0 --:--:-- --:--:-- --:--:-- 55815
rob#uvm:~$ file yt
yt: Macromedia Flash data (compressed), version 10
Just realized that one of my URLs is actually on a different domain. I have a feeling that's the culprit. I'm moving some stuff around now to try it out. I've updated my meta tag data above. Feel a bit sheepish for not making this observation up front.
Here's what ended up working for me.
<!-- These two aren't necessary for embedding. -->
<meta property="og:site_name" content="Example">
<meta property="fb:app_id" content="000000000000000">
<!-- These are mostly needed. A few are probably still optional, but they're all good to have. -->
<meta property="og:type" content="movie">
<meta property="og:title" content="Example Page">
<meta property="og:description" content="Example Description">
<meta property="og:url" content="http://www.testdomain.com/path/to/shared/page">
<meta property="og:image" content="http://content.example.com/images/example.png">
<meta property="og:video" content="http://static.example.com/player.swf?file=http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0&autoplay=true">
<meta property="og:video:type" content="application/x-shockwave-flash">
<!-- Not necessary, but might (can't find up-to-date docs) be used for iOS fallback. -->
<meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0">
<meta property="og:video:type" content="video/mp4">
Some observations and useful information:
Flash player
I switched to using JWPlayer since its query parameter flashvars configuration was slightly simpler than FlowPlayer's. I think I could have gotten FlowPlayer to work with a bit more effort. JWPlayer also has a nice instructional page for Facebook embedding. (Note: many Flash players require a purchased license for commercial use - make sure you get one if necessary.)
Open Graph <meta> tags
Using movie worked for for og:type. I was originally using video and video.other. Those probably work as well, but using movie definitely worked for me.
The following og: properties were not necessary for embedding: fb:app_id, og:video:width, og:video:height.
Note the URLEncoded file query parameter. Needing to do this should be fairly obvious, but keep in mind to encode the parameter values separately. The ampersand (&) before autoplay=true was XMLEncoded before getting added to the page markup. The ampersand was correctly decoded when viewing it in the Facebook Debugger's "Object Properties" section.
Hosting the content and shared url on separate subdomains didn't matter. The only domain concerns that might cause problems are within the flash player itself, and can be avoided with a correctly-configured crossdomain.xml on the content server.
Facebook Debugger Tool observations
The Debugger Tool's "Type of Share" section was slightly misleading:
This is what it showed when I had both application/x-shockwave-flash and video/mp4 types. I would have expected it to have two items in this list, but it just had the second. Despite that, the flash player still embedded.
I was initially wondering if Facebook was getting caught up with the URLEncoded parameters when I saw that it was showing everything represented as unicode:
However, looks like that's not a problem. Don't let it confuse you.
HTTPS
The code above doesn't embed with https Facebook browsing. Additionally, the og:video:secure_url meta property didn't work (maybe due to this). What I ended up doing was serving both the flash player and its source mp4 file parameter over https. The resulting meta tag looked something like:
<meta property="og:video" content="https://static.example.com/player.swf?file=https%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4&autostart=true" />
The og:video was the only one that needed to be over https; og:image, og:url, etc. were okay still being served over http.
Hopefully this'll help others avoid the dead ends and red herrings that I ran into while debugging and learning about all of this.
FYI video/mp4 is currently valid here in 2014.
See the meta provided on this page (ctrl-f mp4):
Seems like facebook only accept application/x-shockwave-flash or video/mp4 not text/html.
MIME type of the video. Either application/x-shockwave-flash or video/mp4.
https://developers.facebook.com/docs/sharing/webmasters