Tùy biến nút like Facebook với ảnh

Tùy biến nút like Facebook với ảnh

Facebook hiện đang là mạng xã hội lớn nhất trên toàn cầu. Ảnh hưởng của nút like đối với cộng đồng mạng cũng ngày càng trở lên mạnh mẽ hơn. Việc tùy biến nút like theo đó cũng được nhiều người quan tâm. Trong hướng dẫn này tôi sẽ hướng dẫn bạn cách thay đổi nút like facebook bằng một hình ảnh.

Ví dụ :

Ở trên tôi đã đổi nút like thành ảnh dislike. Để làm được như vậy mời bạn làm theo hướng dẫn dưới đây :

Đầu tiên là HTML :

Đây là code like button với kiểu iframe. Địa chỉ cần like màu đỏ. Bạn hãy thay chúng bằng địa chỉ của bạn.

<div id="facebook_like_button_holder">
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/hayquazzz&amp;layout=button_count&amp;show_faces=false&amp;width=70&amp;action=recommend&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden;opacity:0.01 ;" allowTransparency="true"></iframe>
<div id="fake_facebook_button"></div>
</div>

Tiếp theo, là CSS : 

Đây là CSS, thay đổi ảnh bằng link màu đỏ :

#facebook_like_button_holder {
position:relative;
width:50px;
height: 20px;
color:#fff;
background:black; }
#facebook_like_button_holder iframe {
position:absolute;
top: 0px;
width: 90px !important;
}
#fake_facebook_button {
pointer-events: none;
position:absolute;
width: 70px;
height: 30px;
left:0;
top:0;
background: url('http://www.fileden.com/files/2012/4/10/3290163/facebook-dislike-button-500.png');
}

Chúc bạn thực hiện thành công các thao tác trong hướng dẫn này.

Minh Anh - Erhay. Vui lòng ghi rõ nguồn Erhay khi bạn phát hành thông tin từ trang này.