Facebook Feed Dialog link format - facebook

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.

Related

FB.ui returns Error: element not specified

Using the example from the developer site:
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
I get the following back:
Error: element not specified
innerError: undefined
message: "element not specified"
At first I thought I was missing the "fb-root" element, but I have it in my body:
<body onLoad="onLoad()">
<div id="fb-root"></div>
</body>
Now I'm thinking it has something to do with my Backbone/jQuery Mobile usage, because the body is cleared once the first page is loaded. However, the FB object is loaded, so I really don't know what's wrong. Any ideas to try and fix this?
Thanks.
I had the same issue and I figured out that was happening just with Chrome. Which browser are you using?
What worked for me was specifying
display: 'popup'
inside FB.ui {}
At the moment I check the browser and if Chrome I use 'popup', if not 'iframe'
var display = 'iframe';
if (navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
display = "popup"
}
FB.ui({
method: 'share',
display: display,
href: 'https://developers.facebook.com/docs/reference/dialogs/'
},
function (response) {}
);
Should work also with feed, but I haven't tested it yet.

Fb.ui feed method on same window instead of new window

The Fb.ui feed method open a new small window for posting a new feed. I want it to open postiing request in the same window and after posting redirect to same(prev) window.
Any one??
Edited:
FB.init({appId: "1234567890", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
display: 'touch',
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);
}
#Nitzan Tomer
Yes this opens the dialogue box, but this thing doesn't work in iPhones/iPads. If works then i dont want to open a new window/tab for it, but want the whole process(auth and posting) in the same window where the user is/were.
You can use redirect url method given on Facebook Developer website.
https://www.facebook.com/dialog/feed?
app_id=123050457758183&
link=https://developers.facebook.com/docs/reference/dialogs/&
picture=http://fbrell.com/f8.jpg&
name=Facebook%20Dialogs&
caption=Reference%20Documentation&
description=Using%20Dialogs%20to%20interact%20with%20users.&
redirect_uri=http://www.example.com/response

How to share individual product image in facebook

I'm having product listing page . I would like to show share link for each product and i want to share individual product image . How can i do this ?
I believe meta doesn't help, because i need to share individual product image.
Create your own button for each image, an onclick invoke FB.UI from the JS SDK https://developers.facebook.com/docs/reference/javascript/FB.ui/ passing in the variables you want for the message
So for each image the html could like similar to:
<img src="path-to-image" title="title" data-uri="path-to-full-product" />
Then using a library like jquery you could have the following script
$('img').click(function(){
var $this = $(this);
var obj = {
method: 'feed',
link: $this.data('uri'),
picture: $this.attr('src'),
name: $this.attr('title'),
caption: 'Your caption here',
description: 'Your description here.'
};
function callback(response) {
alert( "Post ID: " + response['post_id']);
}
FB.ui(obj,callback);
});
More info with an example is here:
https://developers.facebook.com/docs/reference/dialogs/feed/
and you can play around with the JS-SDK here
https://developers.facebook.com/tools/console/

Facebook share button is sharing my login page instead of current page URL, title, etc

I have added facebook share button to my webpage using this code:
<a name='fb_share' border="0">Share</a>
<script type='text/javascript' src='jquery.js'>
</script>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script>
The above code shares the current webpage properly but when I included a session check at the start of the webpage where I redirect the user to the login page if valid session doesn't exist the above code always shares the login page instead of the current page. I am using PHP header function for redirect. Please advice.
To share content from not publicly accessible page use Feed Dialog
i use {} you can uncomment features as needed. Keep in mind all share button features where deprecated for the like / recommend button.
<div id="msg"></div>
<script>
function feedthis() {
var obj = {
method: 'feed',
//to: ''+tobe+''
//link: 'https://developers.facebook.com/docs/reference/dialogs/',
//picture: ''+pic+'',
// name: 'Facebook Dialogs',
//caption: 'Reference Documentation',
//description: ''+msg+''
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>

Facebook application, dialogue to publish on user's wall, using Javascript API, pop-up blocked in browsers

I am using JS-API to generate a dialogue which asks for permission to publish the status message generated by my Application. Given below is the screenshot of what I am talking about:
Here is the code:
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
I use the sample JS code as told in the documentation and it works well if pop-ups are not blocked in the browser settings. but without status message being displayed there's no utility of the app!
Please help; I'm stuck at the last stage.
I don't see why it's bothering you. If the user is blocking FACEBOOK pop-up then it's his loss!
Anyway, if you really need to handle all cases, then you can choose a different way. Have a read of the Feed Dialog.
What you could do is when you are done from the previous step you redirect your page to the Facebook feed method so it'll open as a page:
http://www.facebook.com/dialog/feed?
app_id=123050457758183&
link=http://developers.facebook.com/docs/reference/dialogs/&
picture=http://fbrell.com/f8.jpg&
name=Facebook%20Dialogs&
caption=Reference%20Documentation&
description=Dialogs%20provide%20a%20simple,%20consistent%20interface%20for%20applications%20to%20interact%20with%20users.&
message=Facebook%20Dialogs%20are%20so%20easy!&
redirect_uri=http://www.example.com/response
The important part to change here is the app_id and redirect_uri, so your code would look like:
...
previous code
...
inside previous code success response
...
var url = "http://www.facebook.com/dialog/feed?" +
"app_id=" + YOUR_APP_ID + "&" +
"link=http://developers.facebook.com/docs/reference/dialogs/&" +
"picture=http://fbrell.com/f8.jpg&" +
"name=Facebook%20Dialogs&" +
"caption=Reference%20Documentation&" +
"description=Dialogs%20provide%20a%20simple,%20consistent%20interface%20for%20applications%20to%20interact%20with%20users.&" +
"message=Facebook%20Dialogs%20are%20so%20easy!&" +
"redirect_uri=" + YOUR_REDIRECT_URI;
top.location.href = url;
Your code is fine. It brings up the Feed Dialog for me. Your problem is somewhere else. Did you add the <div id="fb-root"></div>? Make sure it is at the top of the page just after the <body> tag.
Also make sure you are loading the FB Javascript SDK properly:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
Use this code
you have forget to add display property
FB.ui(
{
method: 'feed',
display: 'popup',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);