Facebook share button with custom parameters
Facebook share button with custom parameters will help you to post custom image, title , descriptions, url , caption etc.The First option is sharer.php that have all this facility and its works fine up to last week , but unfortunately its override with basic like function ie, when you pass custom param to the sharer.php it reads the custom url you provide and took information such as image,title meta details from that page.
While playing with facebook old share.php I noticed few things, it will not work properly with canonical urls(Duplicate content avoiding option). When we try to pass url to the sharer.php it reads the meta content and look for the canonical url then parsing correct url as canonical url. So sharing image and description are different than you saw on the share dialog box.
I search on Google for this issue and finally found Facebook shows some wrong image and details in the dialog box but sharing time it parses the actual url. This means the sharer.php is not works like what we expected.Then I found an alternative way for share button with custom param.
Create an APP and use the feed dialog method of Facebook. First you have to sign in and move to Developer portal. Choose create an app and set proper details do not forget to set siteurl.
after you create FB app you will get an APP ID keep that and follow the scripts. Add the following codes in your page header section.
<script type="application/javascript">
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'APP ID',
status : true,
xfbml : true
});
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function FBShareOp(){
var product_name = 'your title name';
var description = 'description';
var share_image = 'full image url ';
var share_url = 'url to share';
var share_capt = 'caption';
FB.ui({
method: 'feed',
name: product_name,
link: share_url,
picture: share_image,
caption: share_capt,
description: description
}, function(response) {
if(response && response.post_id){}
else{}
});
}
</script>
Then just use the FBShareOp() for triggering the share button, you have done with Facebook share button with custom parameters, make sure you added APP ID in your program. Also you can debug your url using Facebook Debug Tool.
Note :Keep in mind Facebook or any social media’s are not stable they updated their coding strategies any time so keep an eye open on your social media scripts otherwise it will break your application.
30 thoughts on “Facebook share button with custom parameters”
Hello, I like the look and easy set up + use of your plugin 🙂
I have 2 questions :
1) Is it possible it is not working with the media grid content? (as opposed to a caroussel content)
2) I noticed that when sharing on Facebook, we can only share on our personal timeline but not on a page we manage or on a group page… is there a special setting to do that?
Thank you very much !
France
Hi,
Using the same feed box and FB.ui, Can I share video along with the redirect link of my website?
Tried a lot but able to post only video on Facebook, When click on description, it redirects me to Youtube page.
Please find below snippet :
FB.ui(
{
method: ‘feed’,
name: ‘my name,
caption: ‘my caption’,
picture: ‘thumbnail pic’,
link: ‘http://www.youtube.com/watch?v=3aICB2mUu2k’, # video link
source: ‘http://www.youtube.com/v/3aICB2mUu2k?autoplay=1’, #video source
description: ‘my description’,
title: ‘my title’,
},
function(response) {
if (response && response.post_id) {
}}
Thanks
It should work,
FB.ui(
{
method: 'feed',
name: 'testing',
link: 'http://www.facebook.com',
picture: 'http://img.youtube.com/vi/1CE6W5BubQo/0.jpg',
//caption: '',
description: '',
source: 'https://www.youtube.com/v/1CE6W5BubQo?version=3&autohide=1&autoplay=1'
},...
for more information check this link
Hi,
I used above given link, It is not working for me i.e I have to pass youtube video link in both ‘LINK’ and ‘SOURCE’ parameters. Is there any other solution?
as per FB documentation it should, I didn’t tried video sharing yet so I can’t guarantee that .:(
Thanks!
Done with this task. Fb documents are not efficient enough for video sharing. One has to pass ‘Link’ and ‘Source’ both. For example:
link : ‘https://www.youtube.com/watch?v=nCD2hj6zJEc’,
source: “https://www.youtube.com/v/nCD2hj6zJEc?autoplay=1”,
in fb.ui params.
Only difference is “WATCH?V” in link and “/V/” in source. If we pass like this, only then it works fine.
when i use the same with my app id,,i am getting this ” An error occurred. Please try again later.”
please help to resolve
This happen due to few reason , When you check my previous comment you will get answer.
The major reason is domain with and without www . means you may create app with www. and site is running without www. or in reverse.
Check the comments it will be able to fix.
Hi, I tried with removing my Apps Domain(making it as empty) in my App settings..it works fine.
Thanks alot.
Thankyou!!!! i tried with 10000 other guides, but only this one works!! Thankyou very much!
You’re welcome..
Hi,
I tried this code but it is not working. When I checked the console and placing alert inside fb.ui alert is not getting shown.please help.
Do not write code inside FB.ui({}) its facebook ui function call,
So if you need to make a custom message or alert you can write inside
after this line,
var share_capt = 'caption';
alert("here");
or after successfully share call back function
if(response && response.post_id){
alert("Success")}
else{
alert("Failed ")}
try this and let me know
Thankx for this code but how to close the popup after sharing ??? mean where to put redirect uri ???
You don’t need to put the redirect uri or close function after successful share it will automatically close the window.
Thank u for such a timely reply but in my case pop up is not closing even after success full share 🙁
Which browser are you testing ?
Normally it will automatically close on all modern browsers. if it doesn’t do it , try to close manually.
just add the script, in the response of AJAX
if(response && response.post_id){
window.close();
}
Thanks for the clear instructions! It works like a charm on all browsers
Hello! This code works only on Chrome. I have tried it on Mozilla and Safari and it says that an error occurred. Am I doing something wrong?
Its simple Java Script ,
there is no restriction on browser wise, Please check the console and let me know any errors.
Can i share multiple images at a time? If it is possible show me the code.Thanks in advance.
I am not sure ,
you can’t share more than one image at a time using JS API.
some other API like IOS have this features I think.
WAY too difficult to understand. Please make more clear/simplify.
I have applied API, working well i want for twitter and other social network
Glad to know it helps, check my related post it have all other social share api with custom buttons.
Hi,
I’ve replied your code, but it does no work. Maybe I’m doing something wrong:
This is the code in my page where I suppose to call your function:
echo ”;
Any idea?
Sorry friend, the code section cannot be comment in the platform.
Please use contact form for private message ,
there I can help you.
For make it working , create a custom share button means you have to create a simple button with image or your custom css styles.
Then register an app with FB the on click of that button trigger the FBShareOp() function inside the function just get the required values like images, text etc.
It will do the rest, If you need call back (after sharing event ) that also available.
Hi,
I have been following your instruction but now i am a little stuck, I think i am up to the pat of creating the custom button but i want to use a button i have created from fontawesome, not quite sure how i integrate the code of FB to my code.
This is the bare bones. Any help would be very much appreciated.
Regards
Patrick
Suppose the custom button is an “a” tag then onclick=”FBShareOp();”
inside this function you can see assigning images,urls etc.
<a href=”#” onclick=”FBShareOp();” > FB Share </a >
if you are using jQuery try something like below inside the function.
make sure you pass the custom values properly here title,descriptions are example you have to set the correct values.
function FBShareOp(){
var product_name = jQuery(“#title”).val();
var description = jQuery(“#description”).html();
var share_image = jQuery(“#share_image”).attr(‘src’);
var share_url = jQuery(“#share_url”).attr(‘href’);
var share_capt = jQuery(“#share_capt”).val();
FB.ui({
method: ‘feed’,
name: product_name,
link: share_url,
picture: share_image,
caption: share_capt,
description: description
}, function(response) {
if(response && response.post_id){}
else{}
});
}