Images loaded via <img> or background-image CSS URL from Contentful CMS don't show in Facebook's in-app browser e.g:
"//images.ctfassets.net/yadj1kx9rmg0/wtrHxeu3zEoEce2MokCSi/cf6f68efdcf625fdc060607df0f3baef/quwowooybuqbl6ntboz3.jpg"
...with Https hosting, and load in all other modern browsers, but not FB in app browser
I'm thinking it's a mixed content problem, but don't see how?
You just need to programatically add https: to the beginning of the image URL. It is called a protocol relative URL and it'll work with most websites by automatically taking the protocol of the page that contains it but I guess it doesn't work for Facebook
Related
Let's say I host a website: http://www.example.com
And I load ads on my website using DFP. And everything works out perfectly.
Now lets assume another site: http://www.anothersite.com is loading our site in an iframe.
My question is, does DFP load in that iframe ? Does it depend on DFP settings such as 'Serve in Safeframe' option?
Thanks
Yes it will, DFP doesn't know anything about the outer iframe.
Safeframe controls how the inner frame in which your ads are shown is rendered and it has nothing to do with any outer frames.
SafeFrame is a cross-domain iframe that enables transparent and rich
interactions between page content and ads, while preventing ads from
accessing publisher data
I'd like to find out how Tumblr retrieves video thumbnails.
Normal video posts (not using API) when viewed from the dashboard or /tagged/ filters, some sites's video shows thumbnails, some doesn't show up.
Works for http://www.youtube.com and http://www.vimeo.com.
However, http://www.ted.com and http://www.slideshare.net thumbnails doesn't show up.
I was wondering if any of the Tumblr devs can enlighten me on the process how and where they get the thumbnail data from.
Is there a general method for retrieval that by that I can conform a document structure to?
It would also be great if the API allows you to set thumbnail url too, sort of like facebook's opengraph image meta data.
Tumblr Video Thumbnails
My understanding of {VideoThumbnailURL} is as follows:
This variable will include any related thumbnails to a video, served directly from the provider of the video.
Tumblr itself isn't generating the thumbnails. Below is the returned URL from a test, using {VideoThumbnailURL} and the video: http://www.youtube.com/watch?v=i0y4G1tNb1M
http://img.youtube.com/vi/i0y4G1tNb1M/hqdefault.jpg
To answer your question, the provider of the video would have to generate the thumbnails and Tumblr would need to support / integrate these on the Dashboard.
Easy way to test if a provider is supported, create a video post and add your embed code. If the message preview not available appears, the provider doesn't support thumbnails and / or Tumblr doesn't support this provider.
Providers with Thumbnail Support
http://blip.tv/
http://www.dailymotion.com/
http://www.metacafe.com/
http://www.youtube.com
http://www.vimeo.com
Providers without Thumbnail Support
https://vine.co
http://www.ted.com
http://www.slideshare.net
http://www.veoh.com/
http://www.twitch.tv/
Hi mikedidthis have write accurately..
As per tumbler's image thumbnail api, tumbler do not provide any inbuilt function like facebook to retrieve images like in facebook or youtube.
Please see this documentation:
http://www.tumblr.com/docs/en/custom_themes
You must use Fully SSL iframes and never display intrusive or invasive ads/popups in the video (safer to serve NO ADS/POPUPS, or you may be blocked from loading inline permanently).
You must be desktop and mobile compatible, and declare meta tags such as the thumbnail and the url to load the video using various methods (study the iframe content of those who already load inline, ex: og:video).
WHY:
Since Tumblr uses SSL in the dashboard and on many blogs, all iframes or videos must be SSL too. If you load any non-ssl content (HTTP), on a page that is using SSL (HTTPS), the content will not load, and usually just appears blank, or incomplete. This is why tumblr links in a new window, when videos aren't being pull from a URL that provides full ssl video embeds.
Using a subdomain that forces ssl, and deals with content that isn't SSL (your own pop open window), will allow your site to load inline with the Tumblr Dashboard.
If you fail to be fully compliant and Tumblr will revoke any future inline videos from your URL. That's why it would be good to load videos from a subdomain that forces ssl only, and redirects non ssl to the ssl page.
I'm having a bizarre problem with Facebook. When I share my content in MSIE 9, it successfully loads the thumbnail the first time I share a URL, but if I share it again, the thumbnail does not load (and never loads again). It just shows their animated "loading" image for several seconds, then that disappears and so do the thumbnail options.
You can see this yourself by clicking these Facebook share links in MSIE 9.
Example 1
Example 2
The same sharing functionality works fine in other browsers, and sharing other pages (e.g. Youtube videos) from the same MSIE 9 works fine every time.
Running Facebook's debugger does not resolve the problem, nor does it report any problems with the OpenGraph tags on my page. It even shows the thumbnails in question.
Looking at the Network tab of the Developer Tools in Facebook shows that the thumbnail image is being loaded each time I share the content.
Update
I've found that MSIE 9 will display the image under the following conditions:
- if I have the image in my cache already
- if the browser doesn't make a request to the server to the safe_image.php URL where the image comes from.
I've been messing around with this test page: http://www.facebook.com/sharer/sharer.php?u=http://c2a-v3-staging.s3.amazonaws.com/sparks%2Fspark_5079%2Findex_test.html
I cannot load the image if I refresh the page, as that makes a request to the server for safe_image.php. It doesn't matter whether the response is a 200 or a 304, the image does not display. However, if I then go to the location bar and press enter, that's a "navigate" event instead of a "refresh", no request is made for the image, and it is displayed (after being loaded from the cache).
I've tried serving the image from another domain, adding the og:image:secure_url tag, having Facebook crawl the HTML on a different domain, and this is the best I can do so far. Unfortunately, it's pretty useless because it means the first share from any user will never work right.
the sharer function of fb is no longer supported by facebook
you should use the feed dialog part of javascript api: https://developers.facebook.com/docs/reference/dialogs/feed/
also make sure your og meta tags contain the correct information http://ogp.me/ that could be your problem, the image size is a meta tag and the image should be 200x200 at least to optimize the scraping of the og meta data
you can also check what errors the meta data is getting from https://developers.facebook.com/tools/debug
Solved! Bizarrely enough, the issue was the dimensions of the image. If I reduce the dimensions of the og:image to fit in a 255x255 pixel box, the sharing works perfectly in MSIE9! Slightly larger sizes, like 262x262, do not work.
I had to run the URL through the Facebook debug tool to clear our their cache of it, of course.
I have another answer to your Question.
Reference: https://sparkengine.call2action.com/sparks/5186/live
The above webpage you want to share doesn't have the Facebook Opengraph protocol for the webpage's thumbnail to be used when sharing links with Facebook.
Here's what that metatag should look like:
<meta property="og:image" content="https://sparkengine.call2action.com/assets/c2a_logo_white-6396a6a536d065359780af683e66dd2a.png"/>
Read more about using this propery name HERE.
In Facebook's debugger tool, it could just be showing a thumbnail that's rendered in the debugger but not necessarily associated with the shared link process.
Although you do see a thumbnail image in the Network Tab, it's not necessarily the case that this will be used in the shared link process, hence the Facebook Opengraph protocol solves this problem, and allows further customization.
EDIT:
It appears at the moment of this writing, your webpage's template has changed. I now notice that the only previously seen og metatag names of:
og:video
og:video:height
og:video:width
now includes the og:image metatag, along with other newly added og metatag properties.
Current image file provided for og:image metatag:
https://c2a-v3.s3.amazonaws.com/sparks/spark_5186/media/thumbnails/spark_5186_09_28_2012_WgZN50Q.jpg
In Firefox web browser, but not in IE8, accessing the og:image directly in the browsers address bar produced this download box:
What also struck me odd about that download is that it's identified as a flash movie. To be sure, no issues were seen in IE8.
I then tested that image thumbnail link directly in Chromes web browser, and that caused an automatic download of that image, but it did not display in the browser, treating it like a downloaded mime type file.
This was true for both thumbnails in both your examples. Perhaps the server-side flash-to-thumbnail is saving the images with incorrect mime file-type information. Once downloaded and analyzed in IfranView, no errors were reported with the .jpg image, as IrfanView will check the file header to ensure it matches it's file-type extension automatically. I would look into how these thumbnails are created on the back-end.
DIGGING DEEPER:
I now understand that you'll have no control on how these thumbnails are made, since it's a service/process done by Amazon s3 Web Servers.
Digging deeper, I see that the main domain for this image files URL is for an XML File:
Reference: https://c2a-v3.s3.amazonaws.com
Google to the rescue. I typed in amazon thumbnail opens as file and this article mentioned to drop the protocol http://www. or https://www. when using a URL for og metatags.
The Facebook Debugger shows no errors when dropping the https:// too, even though it will be report as http:// protocol.
Try:
<meta content='sparkengine.call2action.com/sparks/5186/live' property='og:url'>
<meta content='c2a-v3.s3.amazonaws.com/sparks%2Fspark_5186%2Fmedia%2Fthumbnails%2Fspark_5186_09_28_2012_WgZN50Q.jpg' property='og:image'>
Note any Facebook user can force HTTPS requests via there settings, otherwise HTTP is assumed here.
Resulting Shared Link Generated:
http://www.facebook.com/sharer.php?u=http%3A%2F%2Fsparkengine.call2action.com%2Fsparks%2F5186%2Flive
I'm trying to correctly implement the Open Graph tags for Facebook on a video site, using the og:video tags.
Example : http://12-infos.nrj12.fr/videos-3738/media/video/481196-mardi-6-decembre-mamie-est-une-lumiere.html
It works perfectly on a "normal" account (the video is correctly shared, and can be read from Facebook with ou SWF player, or via iPhone apps with the MP4).
When I use a timeline-enabled account, a click on the image/title just redirects me on the page without opening the player ?!
Is there something more to do to make embed videos working with timeline accounts ?
Thank you
As Hamed Hashemi said your player and video has to have a https links when viewed from https enabled accounts. I had this problem last week and to achieve this I just edit the links to always have https protocol. That way you'll be sure that they are visible from http and https from within the FB page.
Correction: You don't have one og meta tag and that's og:video:secure_url. This is the https URL. So basically you'll have 2 urls leading to the video: one http and ope https. Than facebook will which one show when. Add this url and try it again.
Take a look here: http://ogp.me/#structured
make sure if you are on https version of facebook that the swf file is hosted via https as well
I want to embed a store locator in Facebook the way footlocker does.
Is it possible to just make a facebook app that serves my stand-alone store-locator page without having to re-write my store-locator page for facebook?
Any good guides/how-tos for serving a stand-alone page through a facebook app like this?
This is very common and easy to do. All you have to do is create a facebook application and point your "canvas url" to your store locator page. So for example, if your store locator is www.example.com/storelocator set your Facebook application's canvas url to that page. If you look at that footlocker app you can see that the url of the iframe is actually http://unlocked.footlocker.com/main_store_locator/
If I understand you correctly, you are looking for the canvas guide. According to the documentation you can show your page in an iframe inside a tab on your facebook page.
Unfortunately, no. When you add a FBML/iframe app to your Facebook page, Facebook loads the content, caches it, and injects it into the DOM; it does not actually load it in an iframe. As such, there are restrictions about which elements can be included (eg, only <body> content), how Javascript is used (external libraries require some tweaking), and any element that references an external source (eg, Flash loading content) must have the target domain whitelisted for your application. In short: it's a pain, but it can be done.