I've been trying for the past couple days to get a small swf game working via a feed post to my wall (per the instructions at the Facebook Developers site). So far, I've had no success, despite having everything appear correctly in the OG Debugger. The metadata I'm using to generate the feed post is the following:
<head prefix="og: http://ogp.me/ns fb: http://ogp.me/ns/fb">
<meta property="fb:app_id" content="157726317622339" />
<meta property="og:type" content="game" />
<meta property="og:url" content="http://devapplatform.com:3557/site/feed_game/" />
<meta property="og:title" content="It Or Miss Mini Game" />
<meta property="og:description" content="Sebastian submitted to It or Miss, Come vote for them here!" />
<meta property="og:image" content="http://devapplatform.com:3558/images/catSurprise.jpg" />
<meta property="og:video" content="http://devapplatform.com:3558/images/catTest.swf" />
<meta property="og:video:width" content="398" />
<meta property="og:video:height" content="299" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
</head>
This code is stored on the following web page:
http://devapplatform.com:3557/site/feed_game/
If you want to test this code to see exactly what it's posting, you can simply launch my test app (make sure HTTPS is turned off for your account - I can't have HTTPS enabled on this app due to technical limitations of my environment. Rest assured HTTPS IS enabled on the production version of this app). The feed dialog should appear immediately after launch, during the loading process:
http://apps.facebook.com/itgirlsb/
DISCLAIMER: These links aren't guaranteed to always be available, due to them being hosted on a local test environment which gets powered off in the evenings PSD.
I can't see page or the image / SWF to test, but try these:
Your images should be at least 90x90px, otherwise we won't show the image, so there's nothing to click. Ideally make them 200x200px or more.
If you want the embed to work for anyone who is using secure browsing (https://www.facebook.com) then you need to host your SWF on a secure host. If it's on an http host, we can only embed it for users who have secure browsing disabled; otherwise the browser would throw mixed content warnings.
Related
I'm building an image on the fly to attach to page to be shared on facebook. Everything seems to be going great until it hits the share dialog. Facebook doesn't seem to be scraping, because the image isn't showing up. If I refresh that dialog page, it does load the image (having crawled it from the first go?).
I've read several pages that say I need only specify og:image:width and og:image:height to allow for immediate rendering, but that doesn’t seem to be working. Here are my meta tags:
<meta property="fb:app_id" content="###"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="###" />
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="My Page Description" />
<meta property="og:image" content="http://the-domain/the-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
Am I missing something here?
For these kinds of issues, I recommend checking out the debugging tool that Facebook provides. It's great for quick identification of show stopping errors like you're receiving.
https://developers.facebook.com/tools/debug/
Just a couple of things to keep in mind, sometimes the image or page will time out if Facebook finds that it's taking longer than 1s to fetch the data. I've also found issues with my own implementations if the og:url is different than the page you're expecting Facebook to fetch. The two values must match, because ultimately it's the og:url value that facebook is trying to scrape.
On my website, I use JWPlayer to play video content. I would love to embed a player hosted on my website into a Facebook post that plays in the post and not link to another website. When I use JWPlayer's embed wizard on their website, it creates a page on their server with the player and gives some iframe code that I can paste into Facebook. This works completely fine. However, I really need to be able to make an automated process that creates embed pages on my own site independent of JWPlayer's website.
I took the source code and modified it to fit my website, but unfortunately Facebook does not allow it to play inline. It shows the splash image, title, and description but does not have a play button. When I click the image, it takes me to my website rather than playing the video within the post.
When researching the issue on Facebook's dev reference, I saw that you need a secure URL. My website has an SSL certificate. However, it does not have an EV certificate like JWPlayer's website. Could this be the issue? I don't want to spend the money on it unless I know it will work.
Here is my html heading if it helps at all. And I am using JWPlayer 7. Any help will be much appreciated.
<head prefix="og:http://ogp.me/ns#">
<title>HTTP test video</title>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta property="og:url" content="https://www.examplewebsite.com/embed/player.html">
<meta property="og:title" content="HTTPS test video">
<meta property="og:image" content="http://www.examplewebsite.com/embed/og_image.jpg">
<meta property="og:description" content="This is a test.">
<meta property="og:type" content="video">
<meta property="og:video:url" content="https://examplewebsite.com/embed/jwplayer.flash.swf">
<meta property="og:video:secure_url" content="https://examplewebsite.com/embed/jwplayer.flash.swf">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="480">
<meta property="og:video:height" content="270">
</head>
Alright, I figured out the problem. For some reason, the og:url tag was messing the whole thing up. I removed that tag and everything works fine as far as displaying inline. I do not know why that fixes it, but it works. However, I believe JWPlayer 6 and 7 don't support Facebook embed... But that is a different issue.
I'm running a Joomla 3.4 CMS for my website and I recently enabled gzip and caching in order to speed it up, but now when I post a link to any page on my site from Facebook, it doesn't grab any of the information I'd like to see there (photo, page title, text/description/meta). After doing a bit of research I learned that gzip is known for causing problems with Facebook's bot, so disabled gzip and retested, but it didn't seem to make a difference. I found a plugin (https://github.com/dgt41/facebookfix) and installed it, but that hasn't helped either. I'm at a loss at this point. I'm wondering if maybe something else is going on, but I can't see it. My website is here.
These are all OpenGraph Social Meta Tag settings you have to do. Try these inside the <head> section of every page. You can use other extension also to do this automatically for you.
<meta property="og:site_name" content="My Website Name"/>
<meta property="og:title" content="Your Title Here"/>
<meta property="og:description" content="Your Description Here" />
<meta property="og:image" content="http://www.example.com/images/image.png" />
<meta property="og:locale" content="en_US"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.example.com/blog/article-name"/>
I have been struggling with this for many hours now and have not gotten anywhere.
I have the following metatags:
<meta property="og:type" content="website" />
<meta property="og:title" content="I'm going to see Speaker name" />
<meta property="og:description" content="This is the description of the speaker" />
<meta property="og:url" content="http://example.com/Speakers.aspx?speaker=35" />
<meta property="og:image" content="http://example.com/test.jpg" />
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="315">
After running this URL through the Facebook debug tool, I was given the following error message:
Object at URL 'http://example.com/Speakers.aspx?speaker=35' of type 'website' is invalid because a required property 'og:image:url' of type 'url' was not provided.
According to Open Graph protocol (http://ogp.me/#structured), the og:image & og:image:url are identical, but I tried to add it anyways:
<meta property="og:image:url" content="http://example.com/RGDDT/images/test.jpg" />
<meta property="og:image:type" content="image/jpeg" />
However the first 7 images on the page are still being scraped instead of the one I want to use.
Any insights would be greatly appreciated!
This is probably the best article on which metatags you need. Facebook requires you to have an id, in order to use even a Like button now a days. I don't see those metatags in your snippet. Try adding:
<meta property="fb:app_id" content="1111111111111111" />
<meta property="fb:admins" content="2222222222" />
The first is your app_id number, it seems you need to turn even your blog into an app to make Facebook happy. The second is your personal id number, you can also use your Fan Page if you have one. Including these things seems to make Facebook happy and I think you get Analytics for your troubles.
So I've finally solved this problem.
Problem #1: I was using 'permanent' URLs (/getmedia/3c87abee-1cd0-4ca3-a07d-b7d8fde8ec4b/irma1.jpg.aspx?width=437&height=434&ext=.jpg) instead of 'direct' URLs (/RGDDT/media/RGDDT/Speakers/facebook-share/irma-boom.jpg?width=600&height=315&ext=.jpg). This was a setting I was able to configure in Kentico (the CMS we have used to build this site)
Problem #2: I was getting the results I wanted in the Facebook debug tool, but they were being cached when I tried to share from the live site. Thanks to this article I was able to solve that problem by adding '&v=1' (or '?v=1' if you don't already have a query string at the end of your URL), so Facebook considered this a new page request and didn't cache the description I had hardcoded in as of this morning.
I have a website at http://predictstat.com/. It's powered by Django. I would like to make sure that when a user posts a link from this website onto Facebook, a nice preview image, title and description show up there. This website can also be accessed by using a different domain name: http://percephany.com/. However, I don't really want to use that. I want it to be known to the world as predictstat.com.
To test the Facebook linking/previewing, I have been using the Facebook Debugger Tool. These are the meta-tags that are in my index.html page:
<meta charset="utf-8" />
<meta property="og:url" content="http://predictstat.com/" />
<meta property="og:image" content="http://predictstat.com/static/images/predictStatLogo.png" />
<meta property="og:title" content="predictStat" />
<meta property="og:description" content="Online prediction logging and tracking" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
When I ask the Facebook debugger tool to scrape http://predictstat.com/, It gives me the following error:
Error Parsing URL: Error parsing input URL, no data was scraped.
However, when I change the meta tags to refer to percephany.com instead of predictstat.com, and then ask the Facebook Debugger tool to scrape http://percephany.com/, it works perfectly fine.
Why is this the case? Why does the Facebook Debugger tool like the domain name http://percephany.com/, but dislike the domain name http://predictstat.com/ when they both point to the same underlying website?