Are Open Graph tags necessary when using the JavaScript SDK UI API, provided by Facebook? My understanding is that the FB crawler reads the open graph tags to use as content for the post being shared. However, the SDK provides options where you can specify these. How do these work with each other?
Facebook will use the following (from the JS SDK) over the OG tags:
FB.ui({
method: 'share',
display: 'popup',
href: 'https://url.com',
quote: 'Im a quote!'
});
Related
I can post a photo IF I had the time to get an app approved. I can share a link that pulls in a photo from THAT page. The goal is to post a link that goes to X, but the image is hosted somewhere else.
Is this possible?
Yes, it's possible by using the JavaScript SDK and the Share Dialog. For example, I can do the following, which shares a link but with a custom image, name and caption. It basically overwrites all the OG data on my page.
function fb_share() {
FB.ui( {
method: 'feed',
name: "Facebook API: Tracking Shares using the JavaScript SDK",
link: "https://www.webniraj.com/2013/05/11/facebook-api-tracking-shares-using-the-javascript-sdk/",
picture: "https://stackexchange.com/users/flair/557969.png",
caption: "Tracking Facebook Shares on your website or application is a useful way of seeing how popular your articles are with your readers. In order to tracking Shares, you must used the Facebook JavaScript SDK."
}, function( response ) {
// do nothing
} );
}
$(document).ready(function(){
$('button.share-btn').on( 'click', fb_share );
});
You can do the same thing in PHP if you have the publish_actions permission approved by Facebook. Both would produce the following result:
Source
Using Facebook's now deprecated feed dialog, I used to be able to pass in an actions parameter containing a link to an external URL.
For example:
FB.ui({
method: 'feed',
href: 'http://www.example.com',
actions: [{
name: 'Learn More',
link: 'http://www.example.com/learn'
}]
});
I now want to use the share dialog, and am using open graph meta properties to customize the content being shared. I've been reading about the open graph action types, but haven't found anything about how to add an action link to the share dialog that simply links to an external page like the example above does. Does anyone know how I could do this? Thanks!
Does anyone know if a user generated HTML5 Canvas could be attached to a Facebook 'Like' action and shared on a Facebook wall?
I guess the canvas would have to be rendered to an <img> tag and the id of the tag specified in the og:image metadata?
You have two options as I see it.
(1) Use the Like Button and in it put a dynamic url which generates the og tags for the configuration the user has chosen.
In the 2nd step of the like button tutorial it generates the og tags for you so you can see what's needed, then just make sure that your server generates those according to what the user configured.
You'll have to make a request from your page to the server when the user finished his configuration so that this will be possible.
(2) Use the Feed Dialog that comes with the js sdk.
Using that you can specify all of the story fields, for example:
var obj = {
method: "feed",
picture: "URL_FOR_THE_CONFIGURED_BIKES_PIC",
name: "My custom bikes!",
caption: "I just finished building a new pair of bikes",
description: "My configuration: ....."
};
FB.ui(obj, function(response) {
console.log(response);
});
It is of course possible to mix both options into a third, if you have a specific url per configuration then you can simply:
FB.ui({
method: "feed",
link: "URL_FOR_THE_USER_CONFIGURATION"
}, function(response) {
console.log(response);
});
And then facebook will extract the data from the og tags in that link.
I have a website where there is comments systems. I want to add a comment to facebook while adding a comment to my website.
If it is not possible to add to Facebook while adding to my site is it possible to show share to facebook button with each comments so that clicking on it will share that comment on facebook. May be possible with fb.in?
Not 100% sure, but it sounds like you have your own comment system on your web site and that you'd like to auto-publish to FB the comment that someone makes on your own site.
You'd need to implement the Facebook SDK on your web site:
Have your user authorize your site using 'FB.login' with 'publish_stream' permission (see docs).
In your comment system code, after your user has entered in their comment, you can make a separate call to the Graph API to publish to the user's feed. For example, if using the Facebook Javascript SDK:
Following is the code:
var body = myJustEnteredComment;
FB.api('/me/feed', 'post', { message: body }, function(response)
{
if (!response || response.error)
{
alert('Error!');
}
});
How can I post to a user's wall using Javascript SDK?
Facebook strongly advises against directly posting to user's feed without direct consent of each specific post, you should really try using the javascript SDK's FB.ui functionality:
function PostToWall(msg) {
FB.ui(
{
method: 'feed',
name: 'I'm using this great app and it says that '"+msg"'",
link: 'http://apps.facebook.com/link-to-app,
picture: 'http://yourdomain.com/images/facebook-logo.png',
caption: 'Small caption that will appear in grey'
}
);
}
Read more about it here