How can I limit the Facebook share dialog size.
I'm using the Javascript SDK, this is my test code.
Test site is here. CLick the 'contact' button to envoke the dialog. The popup resizes to use a very large image size. This is the image specified in the OG:Image tags, but I'd prefer the dialog box to use a small image, and be a set dimension.
Any ideas?
FB.ui(
{
method: 'feed',
name: $(document).find("title").text(),
link: location.href
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
You can manually pass an image to the dialog by adding picture to the FB.ui function, so it doesn't use the image specified in the OG tags. You can then set the URL to the smaller image you want to use.
Example:
FB.ui( {
method: 'feed',
name: $(document).find("title").text(),
link: location.href,
picture: '{url_to_picture}'
}, function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
Related
I'd like to share a post via facebook AP but I'm facing some issue.
In my original post i have a text and an image.
By using the share button via Facebook it is possible to keep the original text, while that's not true if I use the Send, Feed or Share Dialog. I also tried using facebook object as reported in the following code, but even in this case I can't figure out how to add text.
Any suggestion?
FB.ui({
app_id: MY_APP_ID,
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': 'www.google.it',
'og:title': 'myTitle',
'og:description': 'myDesc',
'og:image': 'myImg.png'
}
})
}, (response) => {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post wasn t published.');
}
});
I Want to Share an image (as a normal post) on FB with some caption I've used this for sharing
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: '660612734042393', status: true, cookie: true, xfbml: true, oauth: true });
function postToWall() {
FB.login(function(response) {
if (response.authResponse) {
FB.ui({
method: 'feed',
picture: 'http://searchengineland.com/figz/wp-content/seloads/2015/10/google-panda-name3-ss-1920-800x450.jpg',
caption: 'Checkout the image ',
description: 'Checkout the image Checkout the image Checkout the image .'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
});
} else {
//alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'publish_actions,email'});
return false;
}
<img type="button" src="../img2/shareFb.png"style="width: 109px;height: 50px;" >
When I share image using this it gets shared like this
this gets shared like a link instead I want to share this image like a normal image post like we do on FB like this
I've checked on FB sdk but didn't find the exact solution for this.
any help will be appreciated thanks
I'm using the documentation provided over here with the following code. The share dialog comes up correctly. The problem is that I'm not able to differentiate between "Cancel" and "Post" actions that the user takes on the dialog. I'd imagine this would be a part of the response.
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){
if (response && !response.error_code) {
console.log(response);
} else {
alert('Error while posting.');
}
});
edit: output from the console isn't doesn't provide any way of knowing
Cancel - Object {e2e: "{"submit_0":1401181811121}"}
Post - Object {e2e: "{"submit_0":1401181815112}"}
I tested this, and apparently there's some info in the response object you could use to determine if the dialog was cancelled.
Code
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/'
}, function(response){
if (response && !response.error_code) {
console.log("OK: "+JSON.stringify(response));
} else {
console.log("Not OK: "+JSON.stringify(response));
}
});
Output upon cancellation:
{error_code: 4201, error_message: "User+canceled+the+Dialog+flow", e2e: "{"submit_0":1401188820613}"}
So, I guess you could check for cancellaction like this:
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/'
}, function(response){
if (response && !response.error_code) {
console.log("OK: "+JSON.stringify(response));
} else if (response && response.error_code === 4201) { //Cancelled
console.log("User cancelled: "+decodeURIComponent(response.error_message));
} else {
console.log("Not OK: "+JSON.stringify(response));
}
});
Unfortunately, FB.Events.subscribe() doesn't offer an Event for the Cancallation of this dialog: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.0
This is intentionally so as to dissuade developers from using posting as a gating mechanism. It should be up to the person to choose whether to post or not, it should not be a requirement of the app.
Use "feed" method instead of "share" so that it doesn't require app permission to get the response.
FB.ui({
method: 'feed',
caption: 'My Caption',
link: 'http://www.google.com/'
}, function(response) {
if (response && response.post_id) {
alert('Thank you for sharing!');
} else {
alert('You have cancelled the share.');
}
});
I also have a problem with the response function, I'm currently coding and trying to use fb.UI
return FB.ui({
method: 'share',
href: this.shareUrl,
hashtag: "myHashTag",
quote: "myQuote"
}, function(res) {
console.log("res = ", res);
console.log("res? = ", res != null);
return App.vent.trigger("FBShareView:cancelled");
});
I'm finding that on a successful share, res is an empty array and res != null is true
I'm finding that for the cancel scenario, res is undefined.
I expected to see res as an object with an error_message as described here: https://developers.facebook.com/docs/sharing/reference/share-dialog
Could you tell me what may be going wrong please?
I'm trying to post to user stream, without user prompt. I cannot manage to find a code that works. Facebook JSDK is already loaded and I will insert the code inside:
FB.getLoginStatus(function(response){
to make sure the user is already logged to my application. Could you provide an example of publishing to the user stream using the publish_stream permission?
With Dialog
You need to use the Feed Dialog, with FB.ui():
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
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);
}
Documentation: https://developers.facebook.com/docs/reference/dialogs/feed/
Without Dialog
To make a post without the Dialog you need to use the FB.api():
var body = 'Reading JS SDK documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
Documentation: https://developers.facebook.com/docs/reference/javascript/FB.api/
Direct URL
https://www.facebook.com/dialog/feed?
app_id=APP_ID&
link=https://YOUR_DOMAIN&
picture=http://YOUR_DOMAIN/image.jpg&
name=Facebook%20Dialogs&
caption=API%20Dialogs&
description=Using%20Dialogs%20to%20interact%20with%20users.&
redirect_uri=http://YOUR_DOMAIN/response
Documentation: https://developers.facebook.com/docs/reference/dialogs/feed/
I've got this facebook(and yes-the php variable get parsed into a url correctly)
FB.ui(
{
method: 'stream.publish',
attachment: {
name: 'My Social Status',
caption: 'This Is My Social Status',
picture: 'http://server.com/<?php echo $finalimagepath; ?>',
description: 'My social status lets you create a profile pic that tells your real mood. ',
href: 'http://apps.facebook.com/app'
},
action_links: [
{ text: 'My Social Status', href: 'http://apps.facebook.com/app' }
]
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
</script>
you have to configure the link: parameter for some reason. Not sure how the two are related, and trying to figure out a way to get the picture to show without a link parameter.