Search code examples
javascriptshort-url

Javascript: How do I add a top bar to a short url?

I've been trying to understand how is possible to develop a bit.ly style URL shortener which also adds a bar to the website.

For example: http://om.ly/BSdZu

There's a group on twitter that shares all their URLs starting with "om.ly" and they have a top bar in each of the URLs they share.

How is that done? I imagine is with JavaScript but how? Also, is there any service you know that does that so I can understand how?

Solution

  • you can do this in 2 ways (at least):

    • via framesets -- not recommended as it's old style; but you can set the top frame to display your toolbar and the bottom frame set the url to the page
    • via iframes -- have your url load a page from your website which shows to iframes: the top one is your toolbar and you display in it whatever you want, and the bottom one you set the url to the long url. This is how bit.ly, linkedin and many others do it.