Thursday, January 31, 2013
Sorry Facebook, it seems like I just modified your design of the Like Button entirely, because it simply stinks from
a designer's perspective
I've never been a huge fan of Facebook, but I don't dislike it, either. I just don't see the point of spending too much time on it, as opposed to those who have too many friends to care for or too many things to share with their friends. These days I'm pretty busy due to my hectic schedule so I don't often log in to the new Facebook account I created recently. The only reason why I started a blog is because, well, I feel like expressing myself a little bit now and then and I believe it is always great to have a personal website. It gives you the privilege to write anything you want on the Internet and, interestingly, also provides the opportunity to be nailed down by search engines like Google, especially when you mention something like, Sorry Facebook, it seems like I just modified your design of the Like Button entirely because it simply stinks from a designer's perspective.

Anyone who has experience with Facebook Social Plugin would know that it comes in many types. The most well-known one is the like button. To implement it on a website, instead of just assigning a particular URL to the href attribute of an anchor in the same way as how the share button can be implemented, an iFrame of another domain has to be generated by Facebook and the like button would always be imprisoned inside that domain. This indicates the like button can't be modified by any means outside the iFrame. The reason why Facebook chose the iFrame implementation is probably because clicking the like button directly generates a Like Event in Facebook, unlike clicking a share button which only triggers a window to superimpose on the screen, and thus Facebook has to be extremely careful with the like button to avoid anyone from misusing it (such as creating a window.onload function that executes a click event without the user realizing it).

But it is still possible to violate the regulation and customize the like button.

I don't see anyone one doing it though. A search in Google would suggest that nobody had announced about sucessfully doning it so I'm probably the first one to do that. Here you go. It is not really something astounding like the supernova but it is pretty rare so check it out.

Despite the fact that the original like button can't be modified directly, there is an indirect way to modify it. That is not the most fun part to work on though: one just needs to style the iFrame with CSS3 and transform it into a transparent event trigger in the ideal size before setting the image of the customized button as the background of the division in which it is contained. The most fun part to work on is to create the illusion that the button responses to real-time Like Events just like the original one, which is impossible by Ajax means. Ajax calls to a different domain are prohibited because of the Same Origin Policy. And there is no way to interact with contents inside an iFrame. The only solution is to introduce another button and show only the "pull" section of it. What's fun about this is that it brings another issue to the table: the iFrames are not labelled. So this makes it necessary to create a timeInterval function to detect the emergence of iFrames as they will be only generated by Facebook's Javascript and the time it takes to "emerge" can't be determined.

Read more
All design and content © 2013 Archy H. All rights reserved. An Archy H. product.
It seems like you are using a mobile device, your browser may have some CSS3 restriction. If the button above doesn't work, click this instead:

- click to dimiss -