Add customized Like-Button to your website

I was trying to put one of those Facebook-Like Buttons onto one of my websites. Of course I didn’t want to use their style(s), but a different one that would fit into the design of my site. On the other hand the original design every one knows and also knows the meaning immediately. However, if you wanna change the style of your Like-Button than it won’t be easy!

The usual way to get your Like-Button onto your site is to go to the Facebook website and get fetch some code that you simply put onto your page. Afterwards you have a fully functional Like-Button with lots of features. You can even write a comment, once you clicked the button and are logged in to Facebook.

As soon as you wanna change the style of the button you will recognize that all the magic is done inside an iframe. If you already know some things about iframes, then you probably will stop finding out, why your styles aren’t applied to the elements inside the iframe. You simply cannot! I don’t really know if I should love or hate this behavior, since it always depends on the point of view. For the developer of the Facebook-Button using iframes is an easy and safe way to use, since iframes cannot be accessed within modern browsers and so cannot manipulate code to harm any visitors. Just imagine a bank account login that you would simply put into an iframe of your website, which shows the same behavior of the real site, however your login and password are logged for some bad person.

So iframes are good for these developer who offer some kind of service, but they are bad for us if we wanna change anything in it. I found a really terrible hack where you use the standard Like-Button but put some kind of overlaying container onto it, which has an image of your choice. The trick here is that you assign some kind of click-through behavior to that container, so that actually the underlying Like-Button is clicked. By the way not all browsers can do that! But have a look on this site for more information.

So I tried other mechanism but I don’t really have found one that would be safe to use. Moreover Facebook prohibits the changing of their buttons:

“While you may scale the size to suit your needs, you may not modify the Like Button in any other way (such as by changing the design).”

I think, after that, it’s quite useless to go on. Even if you can extract some code that mimics the Like-Button behavior you will never know for how long, since there is a lot of developing going on. That’s again a big plus for those iframes, since any changes made by the deveolopers are immediately shown on your page. You never have to do anything to keep it maintained!

I was trying to get the number of likes for an url where I used the FacebookQueryLanguage (FQL). Since it would have been easy to get this number a few months ago, it is not today. They introduced an authentication mechanism, so querying won’t be as easy as just send the query and receiving the results.

So I gave up on that topic … if anyone has some other idea then shoot!

This entry was posted in Javascript / HTML / CSS. Bookmark the permalink.

One Response to Add customized Like-Button to your website

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 7 = eight

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">