Creating a dynamic Facebook share button

Question

I am stuck with this one...

I have a website that plays music. The page updates automatically to display the current song being played and the image of the artist. The website also allows visitors to request songs. What I want to do is allow users to then share their request on Facebook, so I have added the code below.

Initially, when you pressed the Facebook button, it would pop up iwth a box which contained all the correct info (song, artist, image, etc), but would not post correctly to Facebook (the dynamic info such as title and image would be missing). Now, recently, it doesn't even populate the pop up correctly.

I'm stuck and cannot figure out how to get this to work correctly, can anyone help me?

Thanks.

<a class="facebook" target="_blank" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&p[title]=I'm listening to <?php echo $currentSong->title . ' by ' . $currentSong->artist; ?>&p[summary]=Join me and listen right now or request your own song&p[url]=http://www.mydomain.com&p[images[0]=<?php echo $largeimg; ?>"><img src="http://www.mydomain.com/new/images/facebook.png" width="32" height="32" border="0" style="padding-top:5px; padding-right:4px "></a>

Solution

Actually, you should only add the URL as parameter (url encoded) to the sharer.php:

<a href="<?php echo 'http://www.facebook.com/sharer.php?u=' . urlencode(<url to share>); ?>"><img ... /></a>

It automatically takes the Open Graph data from the shared URL, see this page: http://ogp.me/

I assume all the other parameters are deprecated, at least it did not work for me some months ago. The only thing you could try is to encode all data with the PHP function "urlencode" - but i would suggest using the correct way and implement Open Graph correctly. That way you can even just take the URL, put it on Facebook manually and it will take the correct data.

If the content is completely dynamic, you should consider using Open Graph Actions: https://developers.facebook.com/docs/opengraph/

Or if that is too complicated, use the FB.ui feed dialog:

https://developers.facebook.com/docs/reference/dialogs/feed/

...but don´t forget to include the JavaScript SDK:

https://developers.facebook.com/docs/javascript/quickstart

Comments

[CBroe]

If you want to be able to share specific songs, then see to it that each of this songs gets its own distinct URL that delivers at least the relevant Open Graph meta data.

[omega1]

Hi luschn, thank you for replying, but the data is not on the page, it is all generated dynamically, can this be done even with Open Graph? Or will it not work as I want?

[andyrandy]

in that case it´s not even worth it to use the share dialog - after all it is meant to share links, not dynamic content. for that, you may consider using open graph actions: developers.facebook.com/docs/opengraph

[omega1]

I've been reading it for the last three hours and can't get my head round it! I'm giving up (much to my dismay!). Thanks.

[andyrandy]

well, open graph actions are not that easy to handle and you need an app for them...you could also use FB.ui feed dialogs though, i will add it to the answer.

[omega1]

Hi luschn, the FB.ui worked exactly how I wanted it, many thanks!