Chèn nút like và Fan Page Facebook dưới mỗi bài viết

Trong quá trình đi dạo quanh và thăm các Blog trong cộng đồng Blogger, ShareAllWorld nhận thấy có một số Blogspotter có Form khá chuyên nghiệp cho Like button đặt dưới mỗi bài viết. Với bản chất "ham của lạ", tôi cũng cố mày mò tìm cách làm sao dinh được nó về áp dụng cho blog của mình. Vì "trình độ có hạn mà thủ đoạn có thừa", nên như mọi khi, lại áp dụng tuyệt chiêu 'View Page source'. Nếu bạn còn chưa hình dung được "nó" thì hãy xem Demo trước và bắt tay vào việc nhé...

Nhìn cuối bài

How to add professional form for Like button and Fanpage of Facebook on Blogger

1. Đăng nhập Blogger Dashboard → Design → Edit HTML → Expand Widget Template.
2. Gán CSS cho form bằng cách tìm đoạn mã ]]></b: skin> và dán đoạn mã sau vào ngay trên nó:

.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:540px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIbpw3ZqJ_8TinMdAuWQT8FohKMI1xilp-OTIMyUlSS1jDSwhpQHt28jtO2suNpFAzAtI4icqvDkyy7k74rQ5l3H5ZBivd1k3l6b5itIN12h6nXAxajcpPqRd9lF31crQCArdunw0aW5w/") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5bvxHasr1IBpwW6V2cKPf36Sw9Iqa9x9EuXuiKBgAWpc5v_BstHxouCJJYdgvQx9KrgO-mOH25vwfuPvRQmCqsJmU2IsuYoHdVxVGYJoUFcAclMqSA99Xq9bWEqdbe2HCO2lXkUA-g/") no-repeat scroll left top transparent;
display:block;
margin-left:425px;
text-indent:-5000px;
}

.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:515px;
height:42px;
}

3. Sử dụng Cltr+Fđể tìm đoạn mã <data:post.body/> và dán ngay sau nó đoạn mã dưới đây:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'>
<a href='http://www.facebook.com/shareallworld.info' rel='nofollow'/>
</div>
<div class='fb_like_button_holder'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
</div>
</div>
</b:if>

Lưu ý thay đoạn link 'http://www.facebook.com/shareallworld.info' bằng FanPage link của bạn.
Nhấn "Save template" nữa là xong! Chúc bạn thành công!

Tags:

blogger