Hộp Facebook like dạng popup

Hộp Facebook like dạng popup
Xem thử nhé:
Tiện ích hộp Facebook like dạng popup có tính chất câu Like vì nó luôn xuất hiện trên trang chủ hoặc trang bài viết khi có người truy cập vào.Bảng này sẽ biến mất khi người ta click vào nút tắt (X).
Để có được tiện ích này bạn cần tiến hành các bước sau:
1- Đăng nhập Blog
2- Vào bố cục
3- Chọn thêm tiện ích
4- Và dán code sau vào rồi save lại

<script type='text/javascript'>
//<![CDATA[
(function(a,b,c){function ba(b){if(!T){O=b,Z(a.extend(J,a.data(O,e))),x=a(O),P=0,J.rel!=="nofollow"&&(x=a("."+V).filter(function(){var b=a.data(this,e).rel||this.rel;return b===J.rel}),P=x.index(O),P===-1&&(x=x.add(O),P=x.length-1));if(!R){R=S=!0,q.show();if(J.returnFocus)try{O.blur(),a(O).one(k,function(){try{this.focus()}catch(a){}})}catch(c){}p.css({opacity:+J.opacity,cursor:J.overlayClose?"pointer":"auto"}).show(),J.w=X(J.initialWidth,"x"),J.h=X(J.initialHeight,"y"),U.position(0),n&&y.bind("resize."+o+" scroll."+o,function(){p.css({width:y.width(),height:y.height(),top:y.scrollTop(),left:y.scrollLeft()})}).trigger("resize."+o),$(g,J.onOpen),I.add(C).hide(),H.html(J.close).show()}U.load(!0)}}function _(){var a,b=f+"Slideshow_",c="click."+f,d,e,g;J.slideshow&&x[1]&&(d=function(){E.text(J.slideshowStop).unbind(c).bind(i,function(){if(P<x.length-1||J.loop)a=setTimeout(U.next,J.slideshowSpeed)}).bind(h,function(){clearTimeout(a)}).one(c+" "+j,e),q.removeClass(b+"off").addClass(b+"on"),a=setTimeout(U.next,J.slideshowSpeed)},e=function(){clearTimeout(a),E.text(J.slideshowStart).unbind([i,h,j,c].join(" ")).one(c,d),q.removeClass(b+"on").addClass(b+"off")},J.slideshowAuto?d():e())}function $(b,c){c&&c.call(O),a.event.trigger(b)}function Z(b){for(var c in b)a.isFunction(b[c])&&c.substring(0,2)!=="on"&&(b[c]=b[c].call(O));b.rel=b.rel||O.rel||"nofollow",b.href=a.trim(b.href||a(O).attr("href")),b.title=b.title||O.title}function Y(a){return J.photo||/\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(\.*))?$/i.test(a)}function X(a,b){b=b==="x"?y.width():y.height();return typeof a=="string"?Math.round(/%/.test(a)?b/100*parseInt(a,10):parseInt(a,10)):a}function W(c,d){var e=b.createElement("div");c&&(e.id=f+c),e.style.cssText=d||!1;return a(e)}var d={transition:"elastic",speed:300,width:!1,initialWidth:"600",innerWidth:!1,maxWidth:!1,height:!1,initialHeight:"450",innerHeight:!1,maxHeight:!1,scalePhotos:!0,scrolling:!0,inline:!1,html:!1,iframe:!1,fastIframe:!0,photo:!1,href:!1,title:!1,rel:!1,opacity:.9,preloading:!0,current:"image {current} of {total}",previous:"previous",next:"next",close:"close",open:!1,returnFocus:!0,loop:!0,slideshow:!1,slideshowAuto:!0,slideshowSpeed:2500,slideshowStart:"start slideshow",slideshowStop:"stop slideshow",onOpen:!1,onLoad:!1,onComplete:!1,onCleanup:!1,onClosed:!1,overlayClose:!0,escKey:!0,arrowKey:!0},e="colorbox",f="cbox",g=f+"_open",h=f+"_load",i=f+"_complete",j=f+"_cleanup",k=f+"_closed",l=f+"_purge",m=a.browser.msie&&!a.support.opacity,n=m&&a.browser.version<7,o=f+"_IE6",p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J={},K,L,M,N,O,P,Q,R,S,T=!1,U,V=f+"Element";U=a.fn[e]=a[e]=function(b,c){var f=this,g;if(!f[0]&&f.selector)return f;b=b||{},c&&(b.onComplete=c);if(!f[0]||f.selector===undefined)f=a("<a/>"),b.open=!0;f.each(function(){a.data(this,e,a.extend({},a.data(this,e)||d,b)),a(this).addClass(V)}),g=b.open,a.isFunction(g)&&(g=g.call(f)),g&&ba(f[0]);return f},U.init=function(){y=a(c),q=W().attr({id:e,"class":m?f+(n?"IE6":"IE"):""}),p=W("Overlay",n?"position:absolute":"").hide(),r=W("Wrapper"),s=W("Content").append(z=W("LoadedContent","width:0; height:0; overflow:hidden"),B=W("LoadingOverlay").add(W("LoadingGraphic")),C=W("Title"),D=W("Current"),F=W("Next"),G=W("Previous"),E=W("Slideshow").bind(g,_),H=W("Close")),r.append(W().append(W("TopLeft"),t=W("TopCenter"),W("TopRight")),W(!1,"clear:left").append(u=W("MiddleLeft"),s,v=W("MiddleRight")),W(!1,"clear:left").append(W("BottomLeft"),w=W("BottomCenter"),W("BottomRight"))).children().children().css({"float":"left"}),A=W(!1,"position:absolute; width:9999px; visibility:hidden; display:none"),a("body").prepend(p,q.append(r,A)),s.children().hover(function(){a(this).addClass("hover")},function(){a(this).removeClass("hover")}).addClass("hover"),K=t.height()+w.height()+s.outerHeight(!0)-s.height(),L=u.width()+v.width()+s.outerWidth(!0)-s.width(),M=z.outerHeight(!0),N=z.outerWidth(!0),q.css({"padding-bottom":K,"padding-right":L}).hide(),F.click(function(){U.next()}),G.click(function(){U.prev()}),H.click(function(){U.close()}),I=F.add(G).add(D).add(E),s.children().removeClass("hover"),a("."+V).live("click",function(a){a.button!==0&&typeof a.button!="undefined"||a.ctrlKey||a.shiftKey||a.altKey||(a.preventDefault(),ba(this))}),p.click(function(){J.overlayClose&&U.close()}),a(b).bind("keydown."+f,function(a){var b=a.keyCode;R&&J.escKey&&b===27&&(a.preventDefault(),U.close()),R&&J.arrowKey&&x[1]&&(b===37?(a.preventDefault(),G.click()):b===39&&(a.preventDefault(),F.click()))})},U.remove=function(){q.add(p).remove(),a("."+V).die("click").removeData(e).removeClass(V)},U.position=function(a,c){function g(a){t[0].style.width=w[0].style.width=s[0].style.width=a.style.width,B[0].style.height=B[1].style.height=s[0].style.height=u[0].style.height=v[0].style.height=a.style.height}var d,e=Math.max(b.documentElement.clientHeight-J.h-M-K,0)/2+y.scrollTop(),f=Math.max(y.width()-J.w-N-L,0)/2+y.scrollLeft();d=q.width()===J.w+N&&q.height()===J.h+M?0:a,r[0].style.width=r[0].style.height="9999px",q.dequeue().animate({width:J.w+N,height:J.h+M,top:e,left:f},{duration:d,complete:function(){g(this),S=!1,r[0].style.width=J.w+N+L+"px",r[0].style.height=J.h+M+K+"px",c&&c()},step:function(){g(this)}})},U.resize=function(a){if(R){a=a||{},a.width&&(J.w=X(a.width,"x")-N-L),a.innerWidth&&(J.w=X(a.innerWidth,"x")),z.css({width:J.w}),a.height&&(J.h=X(a.height,"y")-M-K),a.innerHeight&&(J.h=X(a.innerHeight,"y"));if(!a.innerHeight&&!a.height){var b=z.wrapInner("<div style='overflow:auto'></div>").children();J.h=b.height(),b.replaceWith(b.children())}z.css({height:J.h}),U.position(J.transition==="none"?0:J.speed)}},U.prep=function(b){function h(b){U.position(b,function(){var b,d,g,h,j=x.length,k,n;!R||(n=function(){B.hide(),$(i,J.onComplete)},m&&Q&&z.fadeIn(100),C.html(J.title).add(z).show(),j>1?(typeof J.current=="string"&&D.html(J.current.replace(/\{current\}/,P+1).replace(/\{total\}/,j)).show(),F[J.loop||P<j-1?"show":"hide"]().html(J.next),G[J.loop||P?"show":"hide"]().html(J.previous),b=P?x[P-1]:x[j-1],g=P<j-1?x[P+1]:x[0],J.slideshow&&E.show(),J.preloading&&(h=a.data(g,e).href||g.href,d=a.data(b,e).href||b.href,h=a.isFunction(h)?h.call(g):h,d=a.isFunction(d)?d.call(b):d,Y(h)&&(a("<img/>")[0].src=h),Y(d)&&(a("<img/>")[0].src=d))):I.hide(),J.iframe?(k=a("<iframe/>").addClass(f+"Iframe")[0],J.fastIframe?n():a(k).load(n),k.name=f+ +(new Date),k.src=J.href,J.scrolling||(k.scrolling="no"),m&&(k.frameBorder=0,k.allowTransparency="true"),a(k).appendTo(z).one(l,function(){k.src="//about:blank"})):n(),J.transition==="fade"?q.fadeTo(c,1,function(){q[0].style.filter=""}):q[0].style.filter="",y.bind("resize."+f,function(){U.position(0)}))})}function g(){J.h=J.h||z.height(),J.h=J.mh&&J.mh<J.h?J.mh:J.h;return J.h}function d(){J.w=J.w||z.width(),J.w=J.mw&&J.mw<J.w?J.mw:J.w;return J.w}if(!!R){var c=J.transition==="none"?0:J.speed;y.unbind("resize."+f),z.remove(),z=W("LoadedContent").html(b),z.hide().appendTo(A.show()).css({width:d(),overflow:J.scrolling?"auto":"hidden"}).css({height:g()}).prependTo(s),A.hide(),a(Q).css({"float":"none"}),n&&a("select").not(q.find("select")).filter(function(){return this.style.visibility!=="hidden"}).css({visibility:"hidden"}).one(j,function(){this.style.visibility="inherit"}),J.transition==="fade"?q.fadeTo(c,0,function(){h(0)}):h(c)}},U.load=function(b){var c,d,g=U.prep;S=!0,Q=!1,O=x[P],b||Z(a.extend(J,a.data(O,e))),$(l),$(h,J.onLoad),J.h=J.height?X(J.height,"y")-M-K:J.innerHeight&&X(J.innerHeight,"y"),J.w=J.width?X(J.width,"x")-N-L:J.innerWidth&&X(J.innerWidth,"x"),J.mw=J.w,J.mh=J.h,J.maxWidth&&(J.mw=X(J.maxWidth,"x")-N-L,J.mw=J.w&&J.w<J.mw?J.w:J.mw),J.maxHeight&&(J.mh=X(J.maxHeight,"y")-M-K,J.mh=J.h&&J.h<J.mh?J.h:J.mh),c=J.href,B.show(),J.inline?(W().hide().insertBefore(a(c)[0]).one(l,function(){a(this).replaceWith(z.children())}),g(a(c))):J.iframe?g(" "):J.html?g(J.html):Y(c)?(a(Q=new Image).addClass(f+"Photo").error(function(){J.title=!1,g(W("Error").text("This image could not be loaded"))}).load(function(){var a;Q.onload=null,J.scalePhotos&&(d=function(){Q.height-=Q.height*a,Q.width-=Q.width*a},J.mw&&Q.width>J.mw&&(a=(Q.width-J.mw)/Q.width,d()),J.mh&&Q.height>J.mh&&(a=(Q.height-J.mh)/Q.height,d())),J.h&&(Q.style.marginTop=Math.max(J.h-Q.height,0)/2+"px"),x[1]&&(P<x.length-1||J.loop)&&(Q.style.cursor="pointer",Q.onclick=function(){U.next()}),m&&(Q.style.msInterpolationMode="bicubic"),setTimeout(function(){g(Q)},1)}),setTimeout(function(){Q.src=c},1)):c&&A.load(c,function(b,c,d){g(c==="error"?W("Error").text("Request unsuccessful: "+d.statusText):a(this).contents())})},U.next=function(){!S&&x[1]&&(P<x.length-1||J.loop)&&(P=P<x.length-1?P+1:0,U.load())},U.prev=function(){!S&&x[1]&&(P||J.loop)&&(P=P?P-1:x.length-1,U.load())},U.close=function(){R&&!T&&(T=!0,R=!1,$(j,J.onCleanup),y.unbind("."+f+" ."+o),p.fadeTo(200,0),q.stop().fadeTo(300,0,function(){q.add(p).css({opacity:1,cursor:"auto"}).hide(),$(l),z.remove(),setTimeout(function(){T=!1,$(k,J.onClosed)},1)}))},U.element=function(){return a(O)},U.settings=d,a(U.init)})(jQuery,document,this);
//]]>
</script>
<style type="text/css">
#colorbox, #cboxOverlay, #cboxWrapper{
position:absolute;
top:0;left:0;
z-index:9999;
overflow:hidden;
}
#cboxOverlay{
position:fixed;
width:100%;
height:100%;
}
#cboxMiddleLeft,#cboxBottomLeft{
clear:left;
}
#cboxContent{
position:relative;
}
#cboxLoadedContent{
overflow:auto;
}
#cboxTitle{
margin:0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic{
position:absolute;
top:0;left:0;
width:100%;
}
#cboxPrevious, #cboxNext, #cboxClose,#cboxSlideshow{
cursor:pointer;
}
.cboxPhoto{
float:left;
margin:auto;
border:0;
display:block;
}
.cboxIframe{
width:100%;
height:100%;
display:block;
border:0;
}
#cboxOverlay{
background:#000000;/*Màu nền*/
opacity:0.5 !important;
}
#colorbox{
/*box-shadow*/
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{
width:14px;
height:14px;
background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) no-repeat 0 0;
}
#cboxTopCenter{
height:14px;
background:url(https://lh6.googleusercontent.com/-qVuFL__wkEg/UVvx44RnCHI/AAAAAAAAU0I/PWQdUcGR1Ic/s75/Dautocrazy.Blog-border.png) repeat-x top left;
}
#cboxTopRight{
width:14px;
height:14px;
background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) no-repeat -36px 0;
}
#cboxBottomLeft{
width:14px;
height:43px;
background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) no-repeat 0 -32px;
}
#cboxBottomCenter{
height:43px;
background:url(https://lh6.googleusercontent.com/-qVuFL__wkEg/UVvx44RnCHI/AAAAAAAAU0I/PWQdUcGR1Ic/s75/Dautocrazy.Blog-border.png) repeat-x bottom left;
}
#cboxBottomRight{
width:14px;
height:43px;
background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) no-repeat -36px -32px;
}
#cboxMiddleLeft{width:14px;background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) repeat-y -175px 0;
}
#cboxMiddleRight{
width:14px;background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) repeat-y -211px 0;
}
#cboxContent{
background:#fff;
overflow:visible;
}
#cboxLoadedContent{
margin-bottom:5px;
}
#cboxLoadingOverlay{background:url(https://lh3.googleusercontent.com/-U1edinUDEAU/UVvx5NL7f0I/AAAAAAAAU0M/J2WHf5FaG1M/s40/Dautocrazy.Blog-loadingbackground.png) no-repeat center center;
}
#cboxLoadingGraphic{background:url(https://lh3.googleusercontent.com/-Wyn9AgDC3DY/UVvx481sY0I/AAAAAAAAUz8/PDgqqmOHKyo/s32/Dautocrazy.Blog-loading.gif) no-repeat center center;
}
#cboxTitle{
position:absolute;bottom:-25px;
left:0;
text-align:
center;width:100%;
font-weight:bold;
color:#7C7C7C;
}
#cboxCurrent{
position:absolute;
bottom:-25px;
left:58px;
font-weight:bold;
color:#7C7C7C;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
position:absolute;
bottom:-29px;
background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) no-repeat 0px 0px;
width:23px;
height:23px;
text-indent:-9999px;
}
#cboxPrevious{
left:0px;
background-position:-51px -25px;
}
#cboxPrevious.hover{
background-position:-51px 0px;
}
#cboxNext{
left:27px;
background-position:-75px -25px;
}
#cboxNext.hover{
background-position:-75px 0px;
}
#cboxClose{
right:0;
background-position:-100px -25px;
}
#cboxClose.hover{
background-position:-100px 0px;
}
.cboxSlideshow_on #cboxSlideshow{
background-position:-125px 0px;
right:27px;
}
.cboxSlideshow_on #cboxSlideshow.hover{
background-position:-150px 0px;
}
.cboxSlideshow_off #cboxSlideshow{
background-position:-150px -25px;
right:27px;
}
.cboxSlideshow_off #cboxSlideshow.hover{
background-position:-125px 0px;
}
#mdfb{
font:12px/1.2 Arial,Helvetica,san-serif;color:#666;
}
#mdfb a,#mdfb a:hover,#mdfb a:visited{
text-decoration:none;
}
.mdbox-title{
background:#000;
color:#fff;
font-size:20px !important;
font-weight:bold;
margin:10px 0;
border:20px solid #ddd;
/*border-radius*/
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
/*box-shadow*/
-webkit-box-shadow:5px 5px 5px #CCCCCC;
-moz-box-shadow:5px 5px 5px #CCCCCC;
box-shadow:5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px;
font-family:arial !important;
}
.mdbox-tagline{
color:#999;
margin:0;
text-align:center;
}
#mdsubs-container{
padding:35px 0 30px 0;
position:relative;
}a:link,a:visited{
border:none;
}
.demo{
display:none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"600px", inline:true, href:"#mdfb"});
}});
</script>
<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#fff;'>
<center>
<table align="center"background="https://lh5.googleusercontent.com/-u5lzVCm7xqI/UVvz1FqRpxI/AAAAAAAAU0c/Tbu93kcXock/s518/adsense%2520background%2520image-Dautocrazy.Blog.png" border="0" height="300" style="width: 505px;">
<tbody>
<tr>
<td height="345" width="505">
<div align="right">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:fan profile_id="477172592337348" stream="0" connections="15" logobar="0" width="360" height="270" css="https://www.dropbox.com/s/8jaalee76m2yari/DautoCrazy.Blog.cs-FacebooLikeK2.css"></fb:fan>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
Trong đó bạn thay 477172592337348 bằng ID trang Fanpage facebook của bạn trên FB(không phải ID trang cá nhân nhé)
Và có thể tùy chỉnh màu nền và kích thước sao cho phù hợp với sở thích của mình.
CÁCH LẤY ID FANPAGE FACEBOOK
Đối với fanpage chưa tạo Username thì đơn giản vì khi truy cập fanpage trên địa chỉ trình duyệt URL có dạng
https://www.facebook.com/pages/doi-song/1590631191214077(ví dụ vậy)
Trong đó 1590631191214077 chính là ID fanpage.
Với các fanpage đã tạo Username thì ID sẽ được thay thế bằng Username và cấu trúc URL cũng khác đi đôi chút.
Để lấy được ID fanpage bạn cần truy cập page của mình và nhìn cột bên trái có tab Giới thiệu như ảnh và check vào tab đó
Hộp Facebook like dạng popup
Tại trang mới bạn kéo xuống dưới sẽ thấy ID fanpage trang của bạn.
Hộp Facebook like dạng popup
Chúc cài đặt thành công.
Nhận xét

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