在BLOG畫面側邊加個浮動Facebook粉絲欄
如果你有在經營FACEBOOK粉絲頁的話，那你會喜歡這個東西！把它加到WP吧
浮動Facebook粉絲欄2016年更新版
第一步：在網頁的head標籤內加入以下語法
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
第二步：複製以下語法到WP小工具
<script type="text/javascript">
$(document).ready(function() {
$(".fbbox").hover(function(){
$(this).stop().animate({right: "0"}, "medium");
}, function(){
$(this).stop().animate({right: "-250"}, "medium");
}, 500);
});
</script>
<div class="fbbox" style="">
<div>
<iframe src="https://www.facebook.com/v2.4/plugins/like_box.php?app_id=&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FLcj5EtQ5qmD.js%3Fversion%3D42%23cb%3Df29c3f098%26domain%3Dblog.hahasmile.com%26origin%3Dhttp%253A%252F%252Fblog.hahasmile.com%252Ff2d37f86a4%26relation%3Dparent.parent&container_width=247&header=false&height=245&href=https%3A%2F%2Fwww.facebook.com%2Fdorigowu%2F%3Fref%3Dtn_tnmn&locale=zh_TW&sdk=joey&show_border=true&show_faces=true&stream=false&width=247" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>
</div>
</div>
第三步加入CSS
.big-preview{display:none;}
.fbbox{background: url("https://dorigoimage.files.wordpress.com/2016/02/1380235812-583735017.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 295px;z-index: 99999;position:fixed;right:-255px;top:20%;}
.fbbox div{border:none;position:relative;display:block;}
.fbbox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.fbbox span a{color: #808080;text-decoration:none;}
.fbbox span a:hover{text-decoration:underline;}
完成
發表評論
想要留言嗎？歡迎歡迎！