About

What?

Facebooks sharer.php only takes a url and a page-title as arguments for the shared links. The title parameter is only used when facebooks bot isn't able to figure out a page-title. We at restorm.com had the need to be able to set the title, image and description for shared links on facebook to sensible defaults which may even differ from the actual title of the page. Other people asked about this feature in facebook devekopment forums. So I made this little service.

How?


      http://fb-share-control.com/?u=[URL]&amp;t=[TITLE]&amp;i=[IMG]&amp;d=[DESCDRIPTION]

Note that you have to escape the variables in the url with Javascripts encodeURIComponent or something similar. For example the 'share this page on facebook' link on the index page is such a link.

Or you can just use the facebook sharer code, beef it up with the additional parameter and point it to this page instead:


      <script type="text/javascript">
      //<![CDATA[
        function fbs_click(){
          u=encodeURIComponent([URL]);
          t=encodeURIComponent([TITLE]);
          i=encodeURIComponent([IMG]);
          d=encodeURIComponent([DESCRIPTION]);
          window.open(
            'http://fb-share-control.com?u='+u+'&amp;t='+t+'&amp;i='+i+'&amp;d='+d,
            'sharer','toolbar=0,status=0,width=800,height=600');
          return false;
        }
      //]]>
      </script>
      <a href="http://www.facebook.com/share.php?u=[URL]"
        onclick="return fbs_click()"
        target="_blank"
        class="fb_share_link"
        style="padding:2px 0 0 20px; height:16px; background:url(http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif) no-repeat top left;">
          Share on Facebook
      </a>

Or you can use a form with hidden fields and method GET (so the submit button gets the share-link). In this case you don't have to escape. Seems easiest to me.


      <form action='http://fb-share-control.com' method = 'get'>
        <input type='hidden' name='u' value=[URL] />
        <input type='hidden' name='t' value=[TITLE] />
        <input type='hidden' name='i' value=[IMAGE] />
        <input type='hidden' name='d' value=[DESCDRIPTION] />
        <input type='submit' name='share' value='share this page on facebook' />
      </form>

Why?

I can see facebooks rational behind the decisions they made… but not being able to pass description and image parameters still seems to be a shortcoming. Even when people have proper meta tags there are still situations where you might want to default to other titles or descriptions. In our case we want the users to be able to announce newly uploaded songs on twitter and facebook. Obviously a songs page doesn't have 'X uploaded the new songs Y' in it's description.

How (again)?

fb-share-control.com works like this:

if a url parameter is passed AND the referer is facebook, redirect to the url
if the url parameter is blank OR the 'update page button' was used OR the http referer is blank, render the page
otherwise redirect to the facebook sharer

So when the fb-share-control.com link on your page is clicked and you added (at least) a url parameter, your user is redirected to facebook without seeing the fb-share-control.com page. When the facebook bot then crawls fb-share-control.com, the page with the correct title, description and image is rendered and picked up by facebook. When later a facebook user clicks the shared link on facebook, the referer is facebook and (s)he is redirected to your page. All this redirection is completely transparent for the user so (s)he only sees the fb-share-control.com url as url of the shared link. Only the facebook bot ever sees the rendered page. Or you, if you click on the 'back to the link generator' link below.

(but still) How?

Written on top of the Sinatra micro framework in just 50 lines of code. Sinatra rocks!

Have fun!

back to the link generator