How do I create a custom Facebook share dialog box passing parameters?

Victor Ferreira picture Victor Ferreira · Jul 4, 2013 · Viewed 28k times · Source

I've seen a few posts here and around the interwebs explaining how to create a custom Facebook share dialog box for my website.

But I have found a few differences from the average situation to mine:

1- I want a custom area in my page to open and close when people click on a button (the share button)

2- I want share the content in a lightbox, not the page's content. For example, we have a list of products, each product will open in a lightbox. I want to share information about this product that is now open in a lightbox

I saw someone talking about the Javascript SDK, but it the installation guide it tells me to set the APP_ID, but don't have any App create for my website. Do I have to create one to use this SDK?

I also found this pattern

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 to the address bar it works. but the user is redirected to a new page. that is not nice.

and I tried this with the pattern said above, but couldnt make it work

<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 doesn't accept the parameters I am trying to pass.

Do any of you know how to solve this problem? Will it be by changing the 'content' of metatags? What are your solutions?

@EDIT

Just answered with the solution I used

@EDIT 2

Updated with v2.2

Answer

Finglish picture Finglish · Aug 8, 2013

This is an old question, but here is 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 the /sharer/ from the facebook url. I am guessing it is a typo in the documentation.