I made a small app to FB that is using FB.ui to allow users to share it on their wall. I'd like the shared posts to show "Share" link next to "Comment" and "Like", like on any normal wall post.
Is there any way to do this with FB.ui?
Or is there some other method that would still allow me to define customized image, title, description etc. to the wall post?
My current code:
function share(name, description) {
FB.ui({
method: 'feed',
name: name,
picture: '/img/fb.png',
link: url,
caption: '',
message: '',
description: description
}, function() {
});
}
it can be done with share_open_graph method. the code should look like this
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object : {
'og:url': 'http://astahdziq.in/', // your url to share
'og:title': 'Here my custom title',
'og:description': 'here custom description',
'og:image': 'http://example.com/link/to/your/image.jpg'
}
})
},
// callback
function(response) {
if (response && !response.error_message) {
// then get post content
alert('successfully posted. Status id : '+response.post_id);
} else {
alert('Something went error.');
}
});
For the share action,
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){});
To define customized image, title, description, use Open Graph Tags in the head of your page:
<meta property="og:url" content="http://samples.ogp.me/136756249803614" />
<meta property="og:title" content="Chocolate Pecan Pie" />
<meta property="og:description" content="This pie is delicious!" />
<meta property="og:image" content="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/851565_496755187057665_544240989_n.jpg" />
The effect would be:
You have to use the action property
see the documentation here
Related
I am trying to share image from FB app, using send dialog like I am doing for past few years.
var obj = {
method: 'feed',
link: 'https://www.facebook.com/pages/TESTPAGE?sk=app_XXXXXXXXXXXXXX&app_data=share|10',
caption: '',
name: 'Title for share',
description: 'description fort share',
picture: IMG_URL
};
I have provide 2 screenshots
when I click on share button inside of app
what I keep getting on my profile wall.
Until few months ago, FB would show data from feed method, but now, feed is acting just like share method: it shares url, without image and labels I sent through feed dialog.
All I want is to share image from app, and url of that image should point to app url.
Any suggestions?
I came across this issue from yesterday. The issue only happens when you pass in the FB app link url to the Link option. The works fine with the images as long as the link url is not anything related to FB.
So the workaround I found was to get a shortened URL from google and passed it instead of the normal app link.
FB.ui({
name: 'temp',
method: 'feed',
picture: '',
link: '{shortened url}',
caption: 'temp',
description: 'temp',
redirect_uri: 'any url'
}, function(response){
});
You can try this code to share image from FB app:
FB.ui(
{
method: 'feed',
display: 'popup', // must be one of "popup", "dialog", "iframe", "touch", "async", "hidden", or "none"
name: 'Title for share',
description: 'Description for share',
caption: 'www.facebook.com/YourFbPage/app_xxxxxxxxxxxxxxxxxxx',
link: 'http://PathToYourDomain.com/Folder/',
picture: 'http://PathToYourDomain.com/Folder/img/img-1200x627.jpg',
},function(response) {
if (response && response.post_id) {
// alert('Post was published.');
} else {
// alert('Post was not published.');
}
}
);
Best and good luck!
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object : {
'og:url': str_href,
'og:title': 'title', //galleryItem.title,
'og:description': 'desc', //galleryItem.description,
'og:og:image:width': '2560',
'og:image:height': '960',
'og:image': str_picture //BASE_URL + '/images/works/galleries'
}
})
});
I'm messing around with an Angular app, let's say for the sake of argument that I'm not using any meta tags, how can I use the Share Dialog to let users share pages of my app?
Using the old Feed Dialog works, but it has been deprecated:
$scope.share = function() {
FB.ui({
method: 'feed',
name: 'This is the name field',
link: 'The link',
picture: 'The picture',
caption: 'The caption',
description: 'This is the content of the "description" field, below the caption.'
})
},
function(response) {
if (response && !response.error_code) {
console.log('Posting completed.');
} else {
console.log('Error while posting.');
}
});
};
So even though this works, I want to use the Share Diolog in the same way but I'm not figuring it out. This is sort of what I've been trying, keep in mind that I'm a newbie:
$scope.share = function() {
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
object: {
'title': 'The title',
'image': 'An image',
'url': $scope.shareUrl,
'description': 'This is the description',
}
})
},
function(response) {
if (response && !response.error_code) {
console.log('Posting completed.');
} else {
console.log('Error while posting.');
}
});
};
Any hints?
The short answer is that you can't, you must use OpenGraph meta tags.
Since Facebook doesn't understand JavaScript and thus Angular, you must detect Facebook's crawlers server-side and render a static page for them instead of the Angular app.
While the precise implementation will vary depending on your server technologies, here's the general idea:
Setup a route for the resources that need sharing: http://example.com/resources/:id
Look for the user-agent
If it's one of Facebook's crawlers, fetch the resource and render a simple view with OpenGraph tags and an empty body. Otherwise, simply render the Angular app.
Facebook's crawlers are available here and they currently are:
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
facebookexternalhit/1.1
Facebot
I'm working on publishing stories with Facebook Open Graph, for this I'm using their JS SDK. Docs is here : https://developers.facebook.com/docs/opengraph/overview
So the point is to publish for a user : John Smith is listening Shakira - Lalala on Mywebsite.
listening is the action
Shakira is the object
The JS code would be:
FB.api(
'me/mynamespace:listen',
'post',
{
song: "http://mywebsite/shakiramusic"
},
function(response) {
// handle the response
}
);
In this page, some others informations will be specified with code like this:
<meta property="og:title" content="Lalala" />
<meta property="og:image" content="wonderShakira.jpeg" />
But, here is my problem. Imagine that I would like to make a Stories like :
John Smith is reading page 542 from a BigBook on mywebsite
The page number is highly variable and so can't be stock in meta property because Facebook won't refresh it in time.
So I would like making something like that:
FB.api(
'me/mynamespace:reading',
'post',
{
object:{
app_id: 1234567890,
type: "book",
url: "http://mywebsite/thebigbook
title: "The Big Book"
image: "bigbookcover.png",
description: "A super book",
** page_count:542 **
}
},
function(response) {
// handle the response
}
);
But of course it's not working and i get an error. May be i misunderstand the principe of custom stories, actions and objects... I hope my problem is clear and you'll be able to help me.
Thanks :)
I got the answer, here is the good code:
FB.api(
'me/mynamespace:reading',
'post',
{
book:{
app_id: 1234567890,
type: "book",
title: "The Big Book"
image: "bigbookcover.png",
description: "A super book",
url: "http://mywebsite/thebigbook
page_count:542
}
},
function(response) {
// handle the response
}
);
There is two things to consider:
you need to send an object call book for reading and you need to put the url parameter in last, otherwise, Open Graph will get the value in the meta tag. If you put it last, OG will take the parameter that you send.
I'm trying to post to User's Wall large images through FB.ui 'feed' but the post only show a small image in the left side as usual. When I use the sharer.php, the image looks large. What I need to define to post large images using the Share dialog.
FB.ui({
app_id: '<%= ENV['FACEBOOK_APP_ID'] %>',
method: 'feed',
link: '<%= request.original_url %>',
name: 'A name example',
redirect_uri: '<%= ENV['HOST'] %>',
caption: 'An example caption',
description: 'An example description',
picture: '<%= ENV['HOST'] %><%= asset_path "Facebook/#{params[:page]}.jpg" %>'
}, function(response){});
I have defined an og:image, og:type, etc but now way. Share dialog only post small images.
The image are 1200x603. The only warning the debugger is returning me is about og:url.
This is what I exactly use:
FB.ui({
method: 'feed',
link: '<url that I would like to share>',
name: "Js name",
picture: 'http://<domain>.com/media/images/questionnaire/1/1.jpg',
caption: 'Js caption',
description: 'Js description'
}, function(response){
console.log(response);
});
and this is what I see:
There is no og tags in my link address's html. Be careful about using link attribute instead of href attribute. I spent lots of hours just for finding that I should use link attribute instead of href attribute.
I have the following code on my website:
<a onclick='postToFeed(); return false;'><img style="width: 27px; height: 27px; border: 0px;" src="{$baseurl}/images/fb_m.png"/></a>
<p id='msg'></p>
{literal}
<script>
FB.init({appId: "xxx", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
display: 'iframe',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
{/literal}
The links on my website are in the following format:
{$baseurl}/post/{$posts[i].PID}
I was trying to add this string in the "link:" section however it does not share the correct link.
Any ideas will be appreciated. Thanks
Ok, I managed to insert the link correctly. Here is how the link parameter should look:
link: '{/literal}{$baseurl}/post/{$posts[i].PID}{literal}',
Now the popup script posts a correct link such as http://mysite.com/post/1234. However another problem occurred. My website's page is a grid layout, something like pinterest style. Each post has its own link. The script however shares the last post in the grid, no matter on which post I click the share button. If I use the share button as a link, such as:
<a href="http://www.facebook.com/share.php?u={$baseurl}/post/{$posts[i].PID}" onclick=”return fbs_click()” target=”_blank”>share</a>
the correct post is shared.
I need to use the popup feed dialog instead, with the correct link. Any help will be appreciated.