How to create a custom Facebook sharing dialog?

Question

I saw several posts here and around interwebs explaining how to create a custom Facebook sharing dialog for my website.

But I found several differences from the average situation for mine:

1- I want the user area on my page to open and close when people click the button (sharing button)

2- I want to share the contents in a lightbox, not with the contents of the page. For example, we have a list of products, each product will be opened in a lightbox. I want to share information about this product, which is now open in the lightbox.

I saw someone talking about the Javascript SDK, but in the installation guide he tells me to set the APP_ID, but I do not have an application for my site. Should I create it to use this SDK?

I also found this template

http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg 

If I copy and paste this into the address bar, it works. but the user is redirected to a new page. it is unpleasant.

and I tried this with the template above but couldn't get it working

 <a href="#" onclick=" window.open( 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;"> Share on Facebook </a> 

It does not accept the parameters that I am trying to pass.

Do any of you know how to solve this problem? Will this be a change to the "content" of the meta tags? What are your solutions?

@EDIT

Just answered using the solution I used

@EDIT 2

Updated v2.2

Answer 1

This is what I did to solve the problem on my website:

First I added the tools that Facebook provides me:

 <script> window.fbAsyncInit = function() { // init the FB JS SDK FB.init({ appId : 'YOUR APP ID GOES HERE', // App ID from the app dashboard status : true, // Check Facebook Login status xfbml : true // Look for social plugins on the page }); // channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms // Additional initialization code such as adding Event Listeners goes here }; // 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')); </script> 

Then I created a shareOnFacebook function that opens the separator and a button that will call this function

 var globalFacebookShareObject = {} //will be set when I click on a product, on a picture, on a comment or post, or whatever I want to share on Facebook or when I load the page function shareOnFacebook(){ FB.ui({ method: 'feed', name: globalFacebookShareObject.name, link: globalFacebookShareObject.link, caption: 'R$ '+globalFacebookShareObject.caption, picture: globalFacebookShareObject.picture, description: globalFacebookShareObject.description }, function(response) { if(response && response.post_id){} else{} }); } <button onclick='shareOnFacebook()'>Share it!</button> 

@edit on 01/10/2015 Still works for v2.2

Refer to the Feed Method to understand how to create a sharing dialog (I use the feed method, which seems more flexible)

And Quickstart To Understand How To Import A Javascript SDK Into A Page

Answer 2

This is an old question, but here's what works for me:

 window.open( 'http://www.facebook.com/sharer.php?s=100&p[title]=a title&p[summary]=a description &p[url]=http://www.linkhere.com&p[images][0]=http://www.linkhere.com/image.jpg', 'facebook-share-dialog', 'width=626,height=436' ); 

Basically all I had to do was remove / sharer / from the facebook url. I assume this is a typo in the documentation.

Answer 3

December 2017: Custom object separation is deprecated. Now it’s better for you to create another page for this object and find the appropriate meta tags that facebook is viewing there. Read more here: developers.facebook.com/docs/sharing/reference/share-dialog