Tag Archive | hoc thiet ke xay dung

Thêm Fanpage vào website đẹp không cần dùng plugin

(Thủ Thuật WordPress) – Có bạn hỏi Làm Sao có thể thêm Fanpage vào website Wordpress ở hai bên mà khi rê chuột vào thì nó mới sổ ra.

19 Thêm Fanpage vào website đẹp không cần dùng plugin

 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

23 Thêm Fanpage vào website đẹp không cần dùng plugin

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 plugin nhé.

Cảm ơ các bạn đã theo dõi.