: Facebook Like button for Retina Display 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

@Gail5422790

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;
}


with...

.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 -> coding.smashingmagazine.com/2012/08/20/towards-retina-web/

Vote Up Vote Down