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/
Related
I am trying to send this to facebook and it works except for the title "Some Page Title" is not showing up in the post. Example
The format i am using:
https://www.facebook.com/sharer/sharer.php?u=<url>&t=<page title>
Is passing title not supported any more?
TIA
To overwrite Open Graph meta tags you're only chance is with feed method which requires an app id
JS
$('#facebook-share').click(function (e) {
e.preventDefault();
FB.ui({
method: 'feed', // feed method!
name: 'My title', // overwrites "og:title"
link: 'https://www.facebook.com/Retrogram', // required param
picture: 'http://i.imgur.com/SKwsQM2.png?1', // overwrites "og:image"
caption: 'My caption', // overwrite caption
description: 'My description' // overwrites "og:description"
});
});
Fiddle
I'm using a Facebook feed dialog through JavaScript:
var p = {
method: 'feed',
name: 'Title',
caption: 'Subtitle - 26/02/2013',
description: 'My text',
link: window.location.href
};
FB.ui(p)
Is there a way to allow the user select the destination page for the feed ?
Usually the resulting dialog allows user to post a message on his own wall. I would like to enable destination select, like:
on my wall or on my page or into a group
With subsequent page or group selection, as happens on Facebook site.
Is there a way to show this kind of selection ?
The built-in share dialog included in the JavaScript SDK doesn't include this functionality. You will instead need to create your own dropdown with the options you want and then have the share button underneath. You will then need to find the value of this dropdown and add it to the to parameter of the FB.ui function:
<select id="to_user">
<option value="{user_id}">My wall</option>
<option value="{page_id}">My page</option>
<option value="{group_id}">My group</option>
</select>
<script>
var p = {
method: 'feed',
to: $('#to_user').val(),
name: 'Title',
caption: 'Subtitle - 26/02/2013',
description: 'My text',
link: window.location.href
};
FB.ui(p);
</script>
There is an option in the feed dialog box for selecting the destination.Please check
http://developers.facebook.com/docs/reference/dialogs/feed/
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.
I don't want to use the FB like button and apparently "share" has been deprecated.
What I am trying to do is have users click "share"/"post to wall" from my website, and it then places a post on their newsfeed/profile with information on my website/url.
I can't seem to find any code around that will do this- does anyone have an example?
And do they have to connect first? Or can it check if they're logged in, if not, login and it shares automatically?
Thanks!
This is possible in two ways:
You can use the facebook Javascript SDK if you have an app:
FB.ui({
method: 'feed',
link: 'absolute url',
name: 'testtitle',
caption: 'testcaption',
description: 'testdescription',
picture: 'absolute picurl',
message: ''
});
Note that "message" MUST be empty, you can also just remove it.
Without an app (no user can block the app and never get anything from the app anymore, but only possible with popup):
open a popup window with Javascript for the facebook sharer:
http://www.facebook.com/sharer.php?u=<url to share>&t=<title of content>
Note that everything needs to be urlencoded. Of course you can also just use it as a link. And don't forget the og tags in this case.
Edit: Please be aware that "auto sharing" is not allowed on facebook. you have to present the user what you want to share in his name and he has to be able to accept it and add his personal message. would only be possible with an app and an authorized user anyway.
Btw, both methods explained here work without user login/authorization.
Edit2: There is also a "share" method with FB.ui now, to post a link or use Open Graph Actions/Objects.
If you have a dynamic web site as I do, you may strongly want my code.
Note 1: You can't do that if you don't have an app! If you don't have
an app you can simply go to https://developers.facebook.com/apps and
create one.
Note 2: Read my code comments!
Code:
<?
$redirect = "http://www.SITE.com/thanks.html"; //After sharing, you redirect your visitor to thanks.html or just to the home page. Note that the URL given is the URL you set for your app!
$link = curPageURL(); //URL to the shared page (I will give you the function curPageURL() later).
$title = Title(); //Title of the shared page (Note If you don't have a dynamic website you can simply ignore the PHP part)
$descriptionTag = Description(); //Description of the shared page
$pic = Img(); //Image of the post or the logo of your website
echo "<script>
FB.init({appId: \"YOU_APP_ID_HERE\", status: true, cookie: true});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
redirect_uri: '".$redirect."',
link: '".$link."',
picture: '".$pic."',
name: '".$title."',
caption: '".$descriptionTag."',
description: 'You_May_Want_To_Say_Something_About_Your_Web_Site_Here!'
};
function callback(response) {
document.getElementById('msg').innerHTML = \"Post ID: \" + response['post_id'];
}
FB.ui(obj, callback);
}
</script>"; ?>
<a href="#" onclick='postToFeed(); return false;'>Share To Facebook</a>
Note:
Don't forget to set YOUR APP ID in the code!
You need to use the function curPageURL() in order to share the current PHP page!
Code:
<?
function curPageURL() {
$pageURL = 'http';
if (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
?>
Don't forget to declare the function curPageURL() at the beginning of the code I'm giving to you!
I trying to bulid a facebook application using javascript.In my application, the user gets the result and a dialog after a time delay popup. Everthing is working well except one here's my code for the 'post to wall dialog'
<script>
var publish = {
method: 'stream.publish',
display: 'popup', // force popup mode
attachment: {
name: 'Connect',
caption: 'The Facebook Connect JavaScript SDK',
actions: [{ name: 'action_links text!', link: 'http://www.example.com' }],
description: (
'A small JavaScript library that allows you to harness ' +
'the power of Facebook, bringing the user\'s identity, ' +
'social graph and distribution power to your site.'
),
href: 'http://www.example.com/'
}
};
FB.ui(publish, Log.info.bind('stream.publish callback'));
</script>
The line containing actions not working for me.Can anyone just inform what is the solution for this...
The property should be called action_links not actions and only have text and href values. Use something like:
action_links: [{ text: 'action link test', href: 'http://example.com'}]
Note that the action must be defined through the fb web interface for the app!