在BLOG畫面側邊加個浮動Facebook粉絲欄

在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;}

完成

與大家分享...
在BLOG畫面側邊加個浮動Facebook粉絲欄
Facebook
0在BLOG畫面側邊加個浮動Facebook粉絲欄
Google+
0在BLOG畫面側邊加個浮動Facebook粉絲欄
Pinterest
0在BLOG畫面側邊加個浮動Facebook粉絲欄
email
0 回復

發表評論

想要留言嗎?
歡迎歡迎!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *