Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am using Facebook's Like button (https://developers.facebook.com/docs/reference/plugins/like/) but when displayed on Retina Display iPhone, the button looks blurry as the Facebook logo is an image and it is scaled up for high DPI. Is there any way to render the like button for Retina Display?

share|improve this question

You'll need to overwrite Facebook's CSS.

First, create a new FB icon that is twice as big as the original you wish to replace (when scaled down, it will look good on retina).

Next, overwrite this this...

.sp_like-send {
    background-image: url(http://static.ak.fbcdn.net/rsrc.php/v2/yD/x/Q8FTZ0iJJF2.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    width: 14px;


.sp_like-send {
    background-image: url(/images/new-fb-icon-you-made.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 50%;
    width: auto;
    background-size: 100%;

Here are a few additional options -> http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.