wordpress上怎麼新增 FB側邊浮動欄

 

修改的地方有以下兩處

額外要注意的是：

• 上面這段Code中
  「https://www.facebook.com/syatour」、「sya的旅遊部落格」改為你自己粉絲團的資訊
• 上面與下面Code中「-352」的這個數值可以改為適合你網站的數值，但必須一致，否則縮合時位置會不正確。

 

外觀 / 小工具 / 自訂HTML

<div class="fbbox">
<div class="fb-page" data-href="https://www.facebook.com/syatour/" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/syatour/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/syatour/">sya的旅遊部落格</a></blockquote></div>
</div>

<script>
jQuery(function($){
$(".fbbox").hover(function(){
$(this).stop().animate({right: "0"}, "medium");
}, function(){
$(this).stop().animate({right: "-352"}, "medium");
}, 500);
});
</script>

 

主題 / 自訂CSS

/*fb粉絲團css*/
.fbbox{
    background: url("http://pic.pimg.tw/blogbackup/1416463254-1526616050.png") no-repeat scroll left center transparent !important;
    display: block;
    float: right;
    height: 320px;
    padding: 0 0 0 46px;
    width: 392px;
    z-index: 99999;
    position:fixed;
    right:-352px;
    top:30%;
}

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