I have shared an mp4 video using Facebook graph API.It works fine on my browsers but it will play when i access facebook from my IPAD.
anybody know what is the issue?
This is my meta tags
<meta property="og:url" content="http://zoowork.com/binitha/flvshare/testhtml6.php?id=8988">
<meta property="og:description" content="test.">
<meta property="og:video:width" content="600">
<meta property="og:video:height" content="338">
<meta property="video:release_date" content="2012-06-26 14:00:00">
<meta property="video:tag" content="ass">
<meta property="video:tag" content="ddddd">
<meta property="video:duration" content="144">
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://zoowork.com/binitha/flvshare/sample.mp4" />
<meta name="sailthru.image.thumb" content="http://zoowork.com/binitha/flvshare/fru.jpg">
<meta name="sailthru.image.full" content="http://zoowork.com/binitha/flvshare/fru.jpg">
<meta property="og:image" content="http://zoowork.com/binitha/flvshare/fru.jpg">
It's not a 100% clear what the problem is from the question. What does happen on the iPad instead?
One wild guess looking at the information we have would be to add a secure video url to the meta tags. If that is not provided and you are browsing Facebook over SSL, the video will not be displayed.
Add the following line to your head:
<meta property="og:video:secure_url" content="https://zoowork.com/binitha/flvshare/sample.mp4" />
Of course, the video actually has to be available under that url.
the uri is wrong
the mp4 has to be encoded with baseline profile or it wont work on iOS:
http://developer.apple.com/library/mac/#documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/UsingHTTPLiveStreaming/UsingHTTPLiveStreaming.html
Related
The product share on Twitter for the first time not render the product image.
I have set the <meta> tag with og:image value.
But twitter not show this image first time.
I have code below meta tags.
<meta name="twitter:card" content='summary_large_image'>
<meta property="og:image" content="https://www.example.org/image.jpg">
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
Try adding something like this:
<meta name="twitter:image" content="http://euro-travel-example.com/thumbnail.jpg">
More details here: https://css-tricks.com/essential-meta-tags-social-media/
Also, you can use this to preview your twitter card: https://www.bannerbear.com/tools/twitter-card-preview-tool/
I'm working on a site whose front end is in angularjs and backend in ROR , Same ROR API is used in an android app also . Now I have a situation here . I need to share my Web's post on the Social media like facebook , twitter and google plus . And along with the link to the single post there should be a small preview also (a preview of the post which crawls before posting e.g in facebook) .I did it using angular Plugins . But when it comes to Android side , what they share and what displays on Facebook is the Link only . Then i did some R&D and i came to know that it must be done on server side with social media meta tags . I did a little bit but it still no works . I'm stuck on it . Below is what i've done so far .
def show
#post = Post.find_by_permalink(params[:id])
respond_to do |format|
format.html
format.js
end
end
In My views posts/show.html.erb
<!DOCTYPE html>
<html>
<head>
<title> Shared Question</title>
<meta property="og:title" content="My Page" />
<meta property="og:description" content="A description of my page." />
<meta property="og:image" content="http://www.example.com/images/my_lovely_face.jpg" />
<!-- etc. -->
</head>
<body>
Here is the body
</body>
</html>
I just need to show a small preview whenever some user share my web post's link on any media
You are correct, you need to implement special open graph (and other) tags for the customized social sharing functionalities.
Keep in mind that e.g. facebook will cache your page.
So you may try https://developers.facebook.com/tools/debug/ to test your code without caching - the code itself looks fine.
Example Code:
Place this code between <head> and </head> with your other meta tags.
<meta property="og:title" content="Title">
<meta property="og:site_name" content="Name">
<meta property="og:url" content="URL">
<meta property="og:description" content="Description Text">
<meta property="og:type" content="article">
<!--- network Specific -->
<meta property="fb:app_id" content="AppID">
<meta name="twitter:card" content="app">
<meta name="twitter:site" content="#FernerJohannes">
If you want to target Twitter specifically here are their card-guidelines:
https://dev.twitter.com/cards/getting-started
You may also want to checkout: Open Graph validation for HTML5
You can set a custom image for you website to be shown in fb posts -
Add the OG XML to your html tag
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
Add these meta tags to set the custom image that OG will use
<meta property="og:image" content="url_to_image" />
You can try reading this for more insight.
Hopefully this helps.
Some website retrieved information in telegram when send link and some website doesn't like this:
So my question is there any structure for website to load information in telegram ?
The Open Graph protocol enables any web page to become a rich object in a social graph like Facebook, twitter, telegram, Skype and ...
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Simply use meta tag with name description:
<head>
<meta name='description' content="some content"/>
</head>
Here are the meta tags for twitter cards :
<meta name="twitter:card" content="gallery">
<meta name="twitter:site" content="#site_creator">
<meta name="twitter:creator" content="#site_creator">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:image0:src" content="http://placekitten.com/200/200">
<meta name="twitter:image1:src" content="http://placekitten.com/300/300">
<meta name="twitter:image2:src" content="http://placekitten.com/350/350">
<meta name="twitter:image3:src" content="http://placekitten.com/150/150">
<meta name="twitter:domain" content="YourDomain.com">
<meta name="twitter:app:name:iphone" content="Vine">
<meta name="twitter:app:name:ipad" content="Vine">
<meta name="twitter:app:name:googleplay" content="Vine">
<meta name="twitter:app:url:iphone" content="vine://v/93582sxlkjf">
<meta name="twitter:app:url:ipad" content="vine://v/93582sxlkjf">
<meta name="twitter:app:url:googleplay" content="http://vine.co/v/93582sxlkjf">
<meta name="twitter:app:id:iphone" content="id592447445">
<meta name="twitter:app:id:ipad" content="id432984038404">
<meta name="twitter:app:id:googleplay" content="co.vine.android">>
If I do not place following meta tags , gallery card does not work.
<meta name="twitter:image2:src" content="http://placekitten.com/350/350">
<meta name="twitter:image3:src" content="http://placekitten.com/150/150">
I need to place two images only, Can you please help me to solve this ?
Thanks in advance.
Did you try to fake it out by providing place holders with either an empty content link (content="") or else linking to images that are really tiny (like 1x1 pixel or something)?
Gallery Card was deprecated on July 3, 2015 and has been mapped to the Summary Card with Large Image.
I'm struggling, trying to implement Facebook Open Graph into my iOS application.
On the iOS code side, everything seems to work fine and I get the automatic confirmation msg that the Open Graph action has been published.
What is weird is that even if I edit the .html object on my server, the object published on facebook doesn't change. I always get the same object again and again. Does anybody know how is that possible?
This is how my object looks like:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# object: http://ogp.me/ns/object#">
<title>Group App</title>
<meta property="og:title" content="Test" />
<meta property="og:image" content="http://www.groupapp.org/ita/attuale/icona.png" />
<meta property="og:determiner" content="" />
<meta property="fb:app_id" content="172461289531661" />
<meta property="og:url" content="https://itunes.apple.com/us/app/ruzzle/id504265646?mt=8" />
<meta property="og:type" content="groupappitalia:object" />
Basically, I edit title, image and url; but nothing changes. Always get the same result.
<meta property="og:url" content="https://itunes.apple.com/us/app/ruzzle/id504265646?mt=8" />
That’s the actual address of your OG object. And so naturally this is also where Facebook retrieves the Open Graph info from, because that’s how the Open Graph works.
So you would have to change the attributes of that URL, and not your own page, to have these changes reflected on Facebook.