When using Sharethis to share a post from my website, the Twitter share button is unable to grab a dynamically generated image for the post. I have also included the link to the image in the head with "twitter:image" but the problem seems to persist. Any idea how to go around this?
this is an example of metatags to twitter in Django:
in between place:
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:description" content="Place your card description here"/>
<meta name="twitter:title" content="Card TITLE here"/>
<meta name="twitter:image" content="{{SITE_PROTOCOL_URL}}{% static 'location of the image in static files' %}"/>
where SITE_PROTOCOL
context = {
'SITE_PROTOCOL_URL': request._current_scheme_host,
}
In this LINK you can find the twitter card validator debugger
the content url for twitter:image in this example would be:
https://your-site.com/media/your_image_name.jpg
Hope I could help.
Note that will only work in a "live web" context
Related
I am creating first story in facebook graph on my rails app. I have created a story for product upload.
SO when user creates products, story gets published on his timeline saying "User created a new product to sell. Check it out."
I got the code for object from facebook. But I am not getting where to write this code in my app. Should it be on product upload file which is new_product.html.erb or should i create new file in product folder?
If i create a new file, how to load it when new product gets created as my new_product.html.erb file calls show_product.file on product upload. SO how to set two actions on creation of product?
I am totally new to rails and facebook graph. Can somebody help here?
Here is a work follow working with this.
For publishing your story you need to write custom code on your view file meta tag. you have to send post request with product url. Here is an exaple: Suppose your product in on http://yoursite.com/product/124. and some one comments on your product. you have to do the following things for publish story for this product.
Create an action called for comment for object product from your app dashboard.
write meta tag on view (like show.html.erb) head as
<meta property="og:site_name" content="yoursite.com">
<meta property="fb:app_id" content="xxxxxxxxxxxxxx">
<meta property="og:type" content="namespace:product">
<meta property="og:url" content="http://yoursite.com/product/124">
<meta property="og:title" content="Product name">
<meta property="og:description" content="description">
<meta property="og:image" content="http://yoursite.com/product/124.jpg">
3.Finally make a post request when comment on that product, you can use Koala easily to post this.
#graph = Koala::Facebook::API.new(oauth_access_token)
#graph.put_connections("me", "namespace:comment", :product => "http://yoursite.com/product/124", :message => "Send your message here.")
I have an application that posts music videos from YouTube to a Facebook user's wall. The post on Facebook would have this embed video be playable from Facebook. Recently it stopped happening.
After some testing, it seems that when one makes the graph API post with the source being a YouTube video, then the link also needs youtube.com in the domain for it to be playable within a Facebook context.
To repeat:
You can take a look for yourself by logging into Facebook and going here:
https://developers.facebook.com/tools/explorer
Then get an access token with read_stream and publish_stream permissions (extended permissions tab).
Switch from GET to POST and set the endpoint to /me/feed with the following fields:
message = message
description = description
name = name
caption = caption
link = http://www.youtube.com/watch?v=r1dfEf1qOt4
source = http://www.youtube.com/e/r1dfEf1qOt4
picture = http://img.youtube.com/vi/r1dfEf1qOt4/0.jpg
It should show up on your Facebook wall and be playable.
Now do it again, but change the link to http://www.google.com.
It is no longer playable.
Can anyone confirm if this is expected behavior? I can't find anything in the Facebook docs. Perhaps I am just missing something?
Generalized Workaround
I generalized the answer to this similar question: posting a swf in facebook feed through facebook api. I created a page that takes two parameters and generates the necessary meta tags. Facebook accepts the link, the user is correctly redirected, and you don't need a separate page for each posted video.
url - the final URL
id - the id of the youtube or embedded video
I successfully made numerous embedded posts in which the link was not associated with the video.
Example Post
message = Post message
description = Post description if needed.
name = Post name
caption = Post caption
link = http://vbcopper.com/jsuar/so/fbembedvideo.php?url=stackoverflow.com&id=QGAJokcwBXI
source = http://www.youtube.com/e/QGAJokcwBXI
picture = http://img.youtube.com/vi/QGAJokcwBXI/0.jpg
PHP
<?php
$id = $_GET["id"];
$url = $_GET["url"];
if ( isset($url) ) {
echo <<< EOT
<html>
<head>
<title>$url</title>
<meta property="og:title" content="Page Title" />
<meta property="og:type" content="website"/>
<meta property="og:description" content="Content for Description" />
<meta property="og:image" content="http://i2.ytimg.com/vi/$id/mqdefault.jpg" />
<meta property="og:site_name" content="Content for caption"/>
<meta property="og:video" content="http://www.youtube.com/v/$id?version=3&autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="640">
<meta property="og:video:height" content="360">
<META http-equiv="refresh" content="1;URL=http://$url">
</head>
<body>
</body>
</html>
EOT;
} else {
echo "Nothing here...";
}
?>
Findings
I was able to successfully replicate your issue. I could find no work around.
This has been submitted as a bug to Facebook but deemed low priority.
Bugs: Posting video to feed with link attribute doesn't embed the source
https://developers.facebook.com/bugs/502967809730190?browse=search_5074a2e48fd360934230075
Normally to share YouTube videos to Facebook pages you only need message, link, source,
picture parameters. Even you can also skip the source, picture parameters if you wish to. Thats is if you are using FacebookC#SDK to share video to Facebook all you need is following code
var fb = new Facebook.FacebookClient(yourPageAccessToken);
argList["message"] = message;
argList["link"] = "http://www.youtube.com/watch?v=" + specialOffer.YoutubeId;
argList["source"] = "http://www.youtube.com/v/" + specialOffer.YoutubeId;
argList["picture"] = "http://img.youtube.com/vi/" + specialOffer.YoutubeId + "/0.jpg";
fb.Post("feed", argList);
or
var fb = new Facebook.FacebookClient(yourPageAccessToken);
argList["message"] = message;
argList["link"] = "http://www.youtube.com/watch?v=" + specialOffer.YoutubeId;
fb.Post("feed", argList);
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).
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.
I am trying to add the Facebook “Like” or “Recommend” button to the bottom of some of the content pages on our website, so that when someone clicks it, it is immediately posted on their FB wall - spreading the word about the page etc.
I found this code to do it:
<div id="fb-root"> </div>
<script src="http://connect.facebook.net/en_US/all.js#appId=174289559298553&xfbml=1"></script>
<p><fb:like send="true" show_faces="true" action="recommend" font="arial" href="http://amathus.staging.screenpages.net/moillardproducerpage" width="450"></fb:like></p>
But when I put it on the page and test it by "liking/ recommending" it, when it feeds through to my facebook the image picked up to represent the page with the link is not good at all.
I then tried putting meta tags in the coding so that it picked up the right image, like this:
<meta property="og:title" content="Domaine Moillard" />
<meta property="og:type" content="drink" />
<meta property="og:url" content="http://amathus.staging.screenpages.net/moillardproducerpage" />
<meta property="og:image" content="http://www.amathusdrinks.com/skin/frontend/default/default/Agro-de-Bazanc.jpg" />
<meta property="og:site_name" content="Amathus Drinks" />
<meta property="fb:admins" content="61406146" />
But again the only images it picked up on were the small payment logo at the bottom (sagepay logo - not ideal!).
Anyone know how I can get it to show a relevant image next to the link when someone likes the page?
Thanks,
Clare
I tried running http://amathus.staging.screenpages.net/moillardproducerpage thru the linter tool (https://developers.facebook.com/tools/debug) and nothing came up. Is this the correct URL?
From the image url you gave above, I see it's from http://www.amathusdrinks.com/, so I ran http://www.amathusdrinks.com/moillardproducerpage thru the linter tool as well. Got some results, but it has some issues to 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:title 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.
I'd say, fix the og: tags on that page, and you'll be back in business :)