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);
Related
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
I am trying to use the Facebook Like Button at its maximum. I am a webmaster in charge of many websites. I read a lot of answers and question, but I still reach the problem. When somebody use the like button on my Website, and let a comment, it will not publish to its profile.
First I tried to use the simple way:
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.example.com" data-width="100" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
I have the common message in debug "Invalid App Id: Must be a number or numeric string representing the application id.", because I did not use an app_id.
I setup the OpenGraph meta and crawl them with Facebook debug, OK, no error. I use the Domain insight on this domain to get a fb:admins.
<meta property="og:site_name" content="IT IS IT" />
<meta property="og:title" content="Name of page" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:description" content="blablab" />
<meta property="fb:admins" content="10000000xxxxxx" />
<meta property="og:image" content="http://www.example.com/og-image-fb.jpg?v=14170000000" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="945" />
<meta property="og:locale" content="fr_FR" />
And using also in HTML declaration:
prefix="og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml"
In a very few websites, I get the feed published on the wall. But on all the others, I get nothing.
After that, I tried to make a WWW Facebook App per website, using "Information" for the type of the app (Using the App_id in OpenGraph meta + the load of the FB SDK, in addition of my fb:admins). It was working well, except I need to create 1 App for 1 site, because on every feed, it will sho MrX like a link on "Name of my App", linked to the url of the website, so I can not use a general app for all my websites.
But after 5 App, Facebook hang my account.... So I am opening a new FB personnal account at my name (I don't want to use FB for anything else then this work), so I am able to provide an ID if they block my account again.
My first question: Is creating 1 app for 1 website is a normal and legal way for Facebook ?
My second question: No way to publish on wall without app_id ? It works on 2 website I have, without it, so I am a little confused ...
Thanks !
Usually, Facebook blocks an account for a very good reason. So you must have done something wrong, usually you do get a reason why they blocked it. Take a look if you can appeal and if there is more information in here: https://developers.facebook.com/appeal
In general, 1 app for 1 Website/Domain is normal and you should ALWAYS use an App ID. Facebook decides about publishing it into the stream of user friends, you can´t really "force" this. It depends on many factors (popularity of the website, spam reports, ...). It will most likely get posted if the user adds a comment though - but of course you can´t force that.
TL;DR, the direct answers to your questions:
Yes.
You should ALWAYS use an App. It may work without one, but it´s not recommended.
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.")
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.
There are lots of questions about how to get a Facebook Like button working, but I would like to know: does anyone know of an example of the Facebook Like button, coded in XFBML and Javascript, where clicking on it makes the comments box show up, in Internet Explorer? Specifically, I'm trying to figure out if this behavior is broken on IE. I know that particular behavior works under Firefox and Safari.
I see examples of the iframe version of the Like button that pops the comments box in IE when you click "Like". But that's the iframe version, not the xfbml / javascript version. Also, (weirdly enough) the iframe version of the Like button doesn't display the comments box if you don't have show_faces turned on.
The Levi's site is sort of the gold standard in Like usage. Check out http://us.levi.com/family/index.jsp?categoryId=4305605&cp=3146842.3146844.3146854 -- the Like button with comments works in Firefox and Safari, but not IE.
There are lots of different moving pieces here to track down -- for example, namespaces, app_ids, xhtml doctype, etc, etc. But before I get that far, I'm just wondering if the javascript / FBML version of the Like button with comments ever works under IE? And if does, is there an example somewhere? I have never seen one.
Thanks!
Yes, I have this working in IE on http://www.WasupPalmSprings.com. If you click on any of the stories from the home page, there is a like button at the bottom that shows the comments box in IE.
I have had issues with the comment box not showing in IE on other sites. Here is the checklist I use:
Make sure you have the right xmlns attrs in the HTML tag on your page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http:// www.facebook.com/2008/fbml" xmlns:og="http:// opengraphprotocol.org/schema/">
Make sure you have <div id="fb-root"></div> somewhere on your page.
Make sure you have set up an app for your webpage because you need an app id. If you don't have an app, create one here: http:// www.facebook.com/developers/
Use javascript to load the Facebook connect javascript file. Do not just drop a <script src="..."> tag on the page. If you use jquery or similar, ideally this would go in the onReady handler. Otherwise, put it in <script> tag at bottom of the page.
Be sure to substitute your actual app id from the Facebook app you create where it says 'INSERT YOUR APP ID HERE'
window.fbAsyncInit = function() {
FB.init({appId: 'INSERT YOUR APP ID HERE', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Add meta tags with open graph information for your page.
<meta property="og:title" content="YOUR PAGE TITLE HERE"/>
<meta property="og:site_name" content="YOUR WEBSITE NAME HERE"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="URL OF PAGE HERE"/>
<meta property="og:image" content="URL OF IMAGE YOU WANT TO SHARE"/>
<meta property="og:description" content="YOUR PAGE DESCRIPTION HERE"/>
<meta property="fb:app_id" content="YOUR FB APP ID HERE"/>
Finally add the like button wherever you want it to appear on the page. Be sure to substitute your own page URL.
<fb:like href="INSERT YOUR PAGE URL HERE" layout="button_count" show_faces="false" width="570" font="arial"></fb:like>