Dynamically pass link to facebook share button - facebook

I literally searched the internet from top to bottom but I can't find the answer.
Is it possible to dynamically pass links to facebook share button or dynamically create multiple share buttons, each on click? I was trying to achieve it with js, but I could only generate one button at time and couldn't change the link on it. Any suggestions, links to articles?

You can use the Share Dialog to share dynamic links with JavaScript and the Facebook JavaScript SDK:
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
});
Source: https://developers.facebook.com/docs/sharing/reference/share-dialog/

Related

Facebook share dialog sizing bug in Firefox on Windows

We developed a website with fb share dialog to share GIF's into facebook, here is our code snippet for this feature:
FB.ui({
method: 'share',
href: 'gif_480x480_px_url',
hashtag: '#hashtag'
}, function(response) {
});
We use the share dialog as you can see above, because we need the response to use for a feature, anyway we tried the share.php as well (like here: http://jsfiddle.net/stichoza/EYxTJ/), but this one does not work neither unfortunately.
The bug is the following: if the user shares a GIF in Windows Firefox, the facebook's dialog pop-up will open much bigger (and without a scrollbar) than it would be necessary, and most importantly hiding the buttons on the bottom making the share literally impossible because the dialog window is not able to be resized manually. Please see the issue on this screenshot.
In the fb docs, there is no parameter to add max height to the window.
Huge thanks for your help to debug in advance!!!

How to customize shared information with Facebook Share methods

Im trying to share some content with the share dialog of facebook.
My target is to share a product that a costumer bought. I like to share a custom text, an image of the product and the product link.
It should look like that:
I know that Facebook scrapes the URL I pass and gets it information based on the page, but I really wish that I can pass the text at least to the share dialog.
So the question is how to customize the informations that are being shared.
I tried different solutions, like using the sharer.php link and with the FB SDK with share_button that uses FB.ui.
Sharer.php
<div class="fb-share-button"
data-href="http://www.facebook.com/sharer.php?s=100
&p[url]=http://bit.ly/myelection&p[images][0]=http://election.gv.my/assets/vote.png
&p[title]=My customized title
&p[summary]=My customized summary"a-width="100">
</div>
Share-Button with JDK
<div class="fb-share-button" data-href="http://www.gartenxxl.de/p-1473049000">
</div>
I did not try to use the Javascript SDK and the FB.Ui method to create a share-dialog, because I did not want to register as Facebook-Developer yet and create an App for the FB-Api-Key, but maybe thats the only way.
Then I would try that like this:
JS
$('#'#'#share_button').click(
function(e){e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: 'This is a Description',
message: ''
});
});
});
Unfortunately, dynamic content is not really possible anymore:
The feed dialog is deprecated and should not be used anymore.
Facebook will probably remove it sooner or later so i would not count
on it.
Even if it would be possible to add a custom message with a parameter, it would not be allowed. According to the platform policy, the message must be 100% user generated, prefilling is not allowed.
All the existing (and NOT deprecated) possibilities only take the URL as parameter and they read the title/description/image from the Open Graph tags of that URL.
The best you can do for bought products is to use the sharer.php, the Share Social Plugin or the FB.ui share dialog. If you want a custom share button design, you would need to go with sharer.php or FB.ui share, of course.
Btw, this link may be helpful for the Open Graph tags: http://ogp.me/

Add external page action link to fb.ui share dialog

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!

How can I add CSS to FB feed dialog?

I am new to facebook API. I've integrated feed dialog successfully. I want to add some CSS to feed dialog. How can I load a FB feed dialog in a DIV tag so that I can add some text above the FB dialog. (For ex: text like share it with your friends... and some instructions)
To display the feed dialog I've used JavaScript SDK. Below is the code...
FB.ui({
method: 'feed',
name: 'Feed dialog',
link: 'http://testmysite.com',
display: 'iframe'
}function(response) {
if (response && response.post_id) {
alert("successful");
});
Any help would be appreciated.
Thanks
Facebook Dialogs are not customizable in this fashion. From Facebook's documentation (emphasis mine):
Dialogs provide a simple, consistent interface to display dialogs to users.
You might want to create your own dialog and use the appropriate Facebook Graph API calls to post to a user's feed.
You cannot style Facebook ui elements, such as the like button share button, ui dialog etc. You can only customize the ui through the parameters Facebook provides you. For the full list of parameters look https://developers.facebook.com/docs/reference/dialogs/feed/. A quick look, and I dont think you can customize the text on the ui dialog.
Hope this helps,
Tyrone

How do you add a custom share link to a FBML page on facebook?

I'd simply like to make an image-click in my FBML page to trigger facebook's ajax dialog box. How do I accomplish this?
I have an FBML tab on my facebook fan page. In the content of that tab, I would like an image to function as a share button.
By following these directions, I can customize a share button, but the image itself that the user clicks on is not customizable. I want to be able to provide my own image, not use the silver share button provided by facebook.
By following these alternative directions I can use my own image. Perfect! Except on thing... Share.php opens as a page instead of as a javascript dialog. So when the user completes the dialog, it closes the whole page!
Here's what it looks like right now. Sorry, you have to click "Like" to see the share image. When you click the image, the share page opens, but I just want the ajax dialog.
I believe you can do what you want using the facebook feed dialogs:
http://developers.facebook.com/docs/reference/dialogs/
this is the javascript that you will have to bind to your onClick event of your link:
FB.ui(
{
method: 'feed',
name: "Name",
link: "http:\\www.facebook.com\pages\#\page_id_here",
picture: "http:\\path\to\image\file.jpg",
caption: "Caption",
description: "Description",
message: "Message"
},
function(response) {
//callback function
}
);