Want custom title / image / description in facebook share link

Question

Hi!

I am making a flash app that demonstrates potensial traffic injuries when driving at different speeds. I want the user to be able to share this information on facebook. However this demands that i can customize the text that will appear on facebook in some manner.

I am making an url that is opened in a blank window (from the flash app itself). I specify the u and t parameters, putting the generated message as the t parameter. But this seems to always be overridden by the pages title. If i omit the title tag from the html code, the file name is used (also overriding the specified title).

http://www.facebook.com/sharer.php?u=http://espentokerud.com/face/addiste.html&t=test;

I also tried url-encoding the url, but to no avail.

http://www.facebook.com/sharer.php?u=http%3a%2f%2fespentokerud.com%2fface%2faddiste.html&t=test;

I also tried using the addthis API, but experience the same shortcomings. The funny thing is that if i post a swf, the title and description can be customized, and it is also possible to specify a screenshot. But if i dont post a swf, this seems to be ignored.

I am aware that I can use meta tags on the html page to specify the thumbnail image, title and description, but some of this content has to be based on calculations inside the flash app.

Can anyone help me out or point me in the right direction?

I am thankful for any help!

Answer 1

I actually have a similar problem. I have a page with multiple radio buttons; each button will set the title and description meta tags of the page, via JavaScript upon change.

For example, if users select the first button, the meta tags will say:

<meta name="title" content="First Title">
<meta name="description" content="First Description">

If the user select the second button, this changes the meta tags to:

<meta name="title" content="Second Title">
<meta name="description" content="Second Description">

... and so on. I have confirmed that the code is working fine via Firebug (i.e. I can see that those two tags were properly changed).

Apparently, Facebook Share only pulls in the title and description meta tags that are available upon page load. The changes to those two tags post page load are completely ignored.

Does anybody have any ideas on how to solve this? That is, to force Facebook to get the latest values that are change after the page loads.

Answer 2

You can't, it just doesn't support it.

I have to ask, why those calculations need to happen Only inside the flash app?

You have to be navigating to an URL that clearly relates to the metadata you get from the flash app. Otherwise how would the flash app know to get the values depending on the URL you hit.

Options are:

• calculate on the page: When serving the page you need to do those same calculations on the server and send the title, etc on the page metadata.
• send metadata in the query string to your site: If you really must keep the calculation off the server, an alternative trick would be to explicitly set the metadata in the URL the users click to get to your site from Facebook. When processing the page, you just copy it back in the metadata sections (don't forget to encode appropriately). That is clearly limited because of the url size restrictions.
• send the calculation results in the query string to your site: if those calculations just give you a couple numbers that are used in the metadata, you could include just that in the query string of the URL the users click back to your site. That's more likely to not give you problems with URL sizes.

---

re

Why is this upvoted? It's wrong. You CAN - it IS supported to add custom title, description and images to your share. I do it all the time. – Dustin Fineout 3 hours ago

The OP very clearly stated that he already knew you could serve that from a page, but wanted to pass the values directly to facebook (not through the target page).

Besides, note that I gave 3 different options to work around the issue, one of which is what you posted as an answer later. Your option isn't how the OP was trying to do it, its just a workaround because of facebook restrictions.

Finally, just as I did, you should mention that particular solution is flawed because you can easily hit the URL size restriction.

Answer 3

I had this same problem a week ago.

First of all I noticed your URL has an ampersand preceding the parameter string, but it probably needs to have a question mark instead to begin the parameter string, followed by an ampersand between each additional parameter.

Now, you do need to escape your URL but also double-escape the URL parameters (title or other content you need to provide content in the Share) you are passing to the URL, as follows:

var myParams = 't=' + escape('Some title here.') + '&id=' + escape('some content ID or any other value I want to load');
var fooBar = 'http://www.facebook.com/share.php?u=' + escape('http://foobar.com/superDuperSharingPage.php?' + myParams);

Now, you need to create the above-linked superDuperSharingPage.php, which should provide the dynamic title, description, and image content you desire. Something like this should suffice:

<?php
    // get our URL query parameters
    $title = $_GET['t'];
    $id = $_GET['id'];
    // maybe we want to load some content with the id I'll pretend we loaded a
    // description from some database in the sky which is magically arranged thusly:
    $desciption = $databaseInTheSky[$id]['description'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <title><?php echo $title;?></title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="title" content="<?php echo $title;?>" />
  <meta name="description" content="<?php echo $desciption;?>" />
  <!-- the following line redirects to wherever we want the USER to land -->
  <!-- Facebook won't follow it. you may or may not actually want || need this. -->
  <meta http-equiv="refresh" content="1;URL=http://foobar.com" />
</head>
<body>
  <p><?php echo $desciption;?></p>
  <p><img src="image_a_<?php echo $id;?>.jpg" alt="Alt tags are always a good idea." /></p>
  <p><img src="image_b_<?php echo $id;?>.jpg" alt="Make the web more accessible to the blind!" /></p>
</body>
</html>

Let me know if this works for you, it's essentially what did for me :)

Answer 4

I agree with what has already been said here, but per documentation on the Facebook developer site, you might want to use the following meta tags.

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />