Trung tâm Vyoga

Thứ Bảy, 12 tháng 7, 2014

Facebook Popup like box cho website

Đây là một cách tuyệt vời để tăng like fan page cho blog hoặc website của bạn. Hiệu ứng này sẽ bật lên sau 30s và sau 7 ngày mới xuất hiện lại tránh gây phiền phức chi khách truy cập  
Hướng dẫn :
Chèn code sau vào header hoặc footer (đối với wordpress)
Code : 
PHP:
PHP Code:
<!----------FB like box----------->
<script type="text/javascript" src="{template_location}/js/jquery.cookie.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<!-- popup like fanpage -->
<div id="dvPopup" style="display:none; width:510px; height: 320px; border:4px solid #000000; background-color:#FFFFFF;">
<div style="float:right;cursor:pointer;padding:2px 0 0 460px;position:inherit"><a href="#" onclick="HideModalPopup('dvPopup'); return false;">Close</a></div>
<br />
<div style="background:url(http://vyogaworld.net/upload/images/tin-tuc/like_fanpage.png) no-repeat top center;width:510px;height:300px">
<div style="padding:98px 0 0 200px">
<iframe src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/VyogaWorld&amp;send=false&amp;layout=standard&amp;width=230&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=28&amp;appId=100914900100834" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:28px;" allowTransparency="true"></iframe>
</div>
</div>
<!-- end popup like fanpage -->
<script language="javascript" type="text/javascript">
function opennew(){
$.cookie("RSSgame1", "here", { expires : 10 });
}
var visit = $.cookie("RSSgame1");

if (visit==null){
//alert(visit);
//$('ctl00_ContentPlaceHolder1_Adv_Popup_pnAdv').css({left:(,top:($(window).height()-$('ctl00_ContentPlaceHolder1_Adv_Popup_pnAdv').height())/2});
//$('#ctl00_ContentPlaceHolder1_Adv_Popup_pnAdv').delay(8000).fadeIn('medium');
//$("#ctl00_ContentPlaceHolder1_Adv_Popup_pnAdv").show();
//Setting modal popup window
//Boolean to detect IE6.
var modalPopupID = 'dvPopup';
var _ModalPopupBackgroundID = 'backgroundPopup_XYZ_20110418_Custom';
var isIE6 = (navigator.appVersion.toLowerCase().indexOf('msie 6') > 0);
var popupID = "#" + modalPopupID;
//Get popup window margin top and left
var popupMarginTop = $(popupID).height() / 2;
var popupMarginLeft = $(popupID).width() / 2;
//Set popup window left and z-index
//z-index of modal popup window should be higher than z-index of modal background
$(popupID).css({
'left': '50%',
'z-index': 9999
});
//Special case for IE6 because it does not understand position: fixed
if (isIE6) {
$(popupID).css({
'top': $(document).scrollTop(),
'margin-top': $(window).height() / 2 - popupMarginTop,
'margin-left': -popupMarginLeft,
'position': 'absolute'
});
}
else {
$(popupID).css({
'top': '50%',
'margin-top': -popupMarginTop,
'margin-left': -popupMarginLeft,
'position': 'fixed'
});
}
//Automatically adding modal background to the page.
var backgroundSelector = $('<div id="' + _ModalPopupBackgroundID + '" ></div>');
//Add modal background to the body of the page.
backgroundSelector.appendTo('body');
//Set CSS for modal background. Set z-index of background lower than popup window.
backgroundSelector.css({
'width': $(document).width(),
'height': $(document).height(),
'display': 'none',
'background-color': '#555555',
'position': 'absolute',
'top': 0,
'left': 0,
'z-index': 9990
});


$('#dvPopup').delay(8000).fadeIn('medium');
//backgroundSelector.fadeTo('fast', 0.8);


}//end exit visit = null

function HideModalPopup(modalPopupID) {
//Hide modal popup window
$("#" + modalPopupID).css('display', 'none');
//Remove modal background from DOM.
$("#" + _ModalPopupBackgroundID).remove();
opennew();
}
</script>


Thay đổi link facebook : https://www.facebook.com/VyogaWorld
Sau 3s like box sẽ hiện ra. Nếu bạn muốn thay đổi thời gian này :Code:

.delay(3000)
1s = 1000
Cách 2: Làm việc với cookie

Tải plugin cookie cho jQuery
Để jQuery có thể tương tác với cookie, ta sẽ cần đến plugin nho nhỏ bên dưới, click vào link bên dưới để tải plugin này về.
Thêm đường dẫn vào trang của bạn
<script src='jquery.cookie.js' type='text/javascript'></script>

Thao tác với Cookie

Từ giờ, việc sử dụng cookie sẽ trở nên đơn giản hơn bao giờ hết. Để đặt một giá trị cookie vào trình duyệt của người dùng ta chỉ cần gọi:
1
$.cookie("tenCoookie", "giá trị");
Cao cấp hơn một chút bạn có thể đặt thời gian expires của Cookie thông qua tham số thứ 3:
1
$.cookie("tenCoookie", "giá trị", { expires : 10 });
Dưới đây là một ví dụ đầy đủ:
01
02
03
04
05
06
07
08
09
10
11
12
13
$.cookie("myCookie", "Giá trị", {
expires : 10,       //hết hiệu lực trong 10 ngày
path : '/',     //Chỉ định giá trị path của cookie, để phân biệt
            //cookie của từng trang trên một website.
            //(mặc định: trang thực hiện script này).
domain : 'jquery.com',  //Đặt cookie này cho tên miền cụ thể
            //Mặc định là tên miền của website hiện tại chạy script này.
secure : true           //Nếu đặt thành true, để đọc được cookie thì phải
            //dùng giao thức HTTPS, mặc định là false
});
Nếu expires không được set, thì mặc định là lúc tắt trình duyệt cookie sẽ bị xóa. Có kèm theo luôn cả chú thích, chắc không quá khó để hiểu. Để đọc dữ liệu từ cookie ra ta chỉ cần gọi:
1
var bien1 = $.cookie("myCookie");
Lưu ý: File demo trên không hoạt động trên Chrome, vì lí do Google Chrome không lưu cookie cho những trang local.
Phân biệt cho destop và điện thoại
<script language="javascript">
if ("ontouchstart" in document.documentElement)
{
  alert("It's a touch screen device.");
}
else
{
 alert("Others devices");
}
</script>
hoặc
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

if(isMobile.any()){
    // Mobile!
} else {
    // Not mobile
}
Xem thêm bài nhận biết thiết bị di động tại
http://hocwp.net/blog/nhan-biet-thiet-bi-di-dong/
Người đăng: vào lúc

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)