Customizing Facebook Like-Box

Is it possible to have a custom facebook like button?

It's possible with a lot of work.

Basically, you have to post likes action via the Open Graph API. Then, you can add a custom design to your like button.

But then, you''ll need to keep track yourself of the likes so a returning user will be able to unlike content he liked previously.

Plus, you'll need to ask user to log into your app and ask them the publish_action permission.

All in all, if you're doing this for an application, it may worth it. For a website where you basically want user to like articles, then this is really to much.

Also, consider that you increase your drop-off rate each time you ask user a permission via a Facebook login.

If you want to see an example, I've recently made an app using the open graph like button, just hover on some photos in the mosaique to see it

Custom styling on Facebook's LikeBox plugin - is it possible?

Look at this site: multipla.tv
This is done here also.
You should add the old version of fan the box:

<fb:fan profile_id="106908749418612" stream="" connections="14" width="696" height="113" css="http://multipla.tv/css/facebook.css?3159"></fb:fan>

to you website and include js file:

http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/pl_PL

Just before ending html tag insert code given by facebook after generating fb likebox:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-27010550-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

Remember to change the setAccount for yours.
And one more think.
In head you should insert:

<script type="text/javascript">FB.init("j4eb6a5dd7554377955544101");</script>

The argument of init is your id. You can find it when you search the javascript included in the iframe of a normal fb likebox.

Related Topics