Vì sao chúng ta lại thêm Fanpage vào website ?
Tất nhiên là không phải ngẫu nhiên ta lại thêm fanpage vào làm gì cho nặng website phải không các bạn.Mục đích khi khách hàng , độc giả vào website mà thấy cái fanpage thì rê chuột vào rồi like cho FP luôn.tăng lượng like của Fanpage , tạo độ uy tín hơn website của mình
Cách Thêm Fanpage vào website Wordpress không cần dùng plugin
Thực ra cách làm này không khó.Có nhiều plugin hỗ trợ nhưng chỉ cần chúng ta biết css và một đoạn jquery thì chúng ta làm được thôi.Bài viết này Harry sẽ chỉ cho các bạn biết cách thêm fanpage vào website Wordpress đẹp không cần dùng plugin.
Đầu tiên bạn tạo một file StyleSheet.css với nội dung như sau
#facebook_div
{
width:350px;
height: 400px;
overflow: hidden;}
#facebook_left
{
z-index: 100;
border: 5px solid #3B5998;
background-color: #fff;
width: 350px;
height: 400px;
position: fixed;
left: -358px;
border-radius:5px 5px 5px 5px;
}
#facebook_left img {position: absolute;top: 5px;left: 350px;}
#facebook_left div .fb-like-box {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;right:-2px;top:-3px;}
Lưu tập tin lại và up vào thư mục themes của wordpress (nằm trong thư mục themes bạn đang sử dụng nhé.)
Tiếp theo bạn tạo thêm một file like_box.js với nội dung như sau :
$(document).ready(function () {
//function cua faccbook
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1″;
fjs.parentNode.insertBefore(js, fjs);
} (document, ‘script’, ‘facebook-jssdk’));
// re chuot
$(“#facebook_left”).hover(function () {
$(this).stop(true, false).animate({ left: 0 }, 500);
},
function () {
$(“#facebook_left”).stop(true, false).animate({ left: -358 }, 500);
});
});
Lưu file lại và up vào thư mục /themes/theme-cua-ban/js/
Tiếp theo bây giờ bạn mở file header.php chèn 2 dòng sau trước thẻ </body>
<script src=”<?php bloginfo(‘template_url’); ?>/js/like_box.js” type=”text/javascript”></script>
<link href=”<?php bloginfo(‘template_url’); ?>/StyleSheet.css” rel=”stylesheet” type=”text/css” />
mục đích để gọi css và file js ta vừa tạo khi load.
và bây giờ ta chỉ cần chèn đoạn code sau vào trang mà muốn hiển thị fanpage mà thôi
<div id=”facebook_left” style=”top: 18%;”>
<div id=”facebook_div”>
<img src=”<?php bloginfo(‘template_url’); ?>/images/fb8-left_2.png” alt=”facebook like” />
<div class=”fb-like-box” data-href=”http://www.facebook.com/thoitrangcuatoi.com.vn” data-width=”350″ data-height=”400″ data-show-faces=”true” data-stream=”false” data-header=”true”></div>
</div>
</div>
Nếu bạn muốn chèn toàn trang thì mở file header.php chèn vào trong <body> nhé.Đoạn code trên thay link fanpage của bạn theo ý của mình nhé. và đừng quên download file ảnh fb8-left_2.png bỏ vào thư mục images
Như vậy bạn đã hoàn thành công việc chèn fanpage vào website wordpress không cần dùng pluginnhé.Việc còn lại bạn thêm google +1 , Twitter lên luôn nhé.Nếu có thắc mắc gì vui lòng comment tại đây.Đừng quên ủng hộ Harry qua +1 tại link sau : shop quan ao
Cảm ơn các bạn đã theo dõi.
