5732578.jpg

何在痞客邦部落格設定

側邊出現浮動動態臉書的likebox按鈕?

只要按下列步驟,就可以完成設定。

臉書facebook的likebox教學

https://developers.facebook.com/docs/plugins

步驟1.上傳您所要的FB浮動標籤圖片,如下圖所示~

【圖片可以自由發揮設計】

本人我對美術設計天分很差,所以我用它們原始圖來做

上傳完畢後,記錄下圖片網址

51314.png

 

步驟2.在自訂樣式CSS最底端加入下列語法

操作:部落格後台→樣式管理→部落格CSS原始碼→拉到最底→貼上語法

5633.jpg

痞客邦 CSS語法

請貼上自己上傳的【圖片網址】  <------貼上你上傳好的標籤圖網址
 

.fbbox{background: url("請貼上自己上傳的【圖片網址】") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;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;}

 

步驟3.在側邊欄位新增語法

操作:部落格後台→側欄管理→部落格管理→新增版位→拖到欄位二的地方

13131.jpg

53543.jpg

 

放測邊欄位語法

 

分絲專頁有內容語法+按讚人員大頭照~語法

https://www.facebook.com/k19980720 <--這是是我的紛絲團
k19980720 <----這個打上自己粉絲團的短網址


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<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="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fk19980720&width=250&height=500&colorscheme=light&show_faces=true& header=true&stream=true&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:510px;background:#fff;"></iframe>
</div>
</div>

 

 

完成如下圖顯示

rgrsfhd.jpg

 

 

 

分絲專頁只有按讚人員大頭照~語法

https://www.facebook.com/k19980720 <--這是是我的紛絲團
k19980720 <----這個打上自己粉絲團的短網址



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<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="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fk19980720&width=300&height=500&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=500" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 300px; width: 500px;background:#fff;"></iframe>
</div>
</div>

afasdfasdsdfs.jpg 

 


【免責聲明】
★本圖像文件皆從網上搜集轉載,不承擔任何技術及版權問題。
★所有資訊為測試用途!請於24小時內刪除,如果滿意請購買正版,並尊重智慧財產權 !
★請於下載完後24小時以內將檔案刪除!,請勿作商業上之用途!
★所有內容只做為測試用途,絕對不得做為商業用途,若移做它用,一切責任與本人無關!


 

 

 

文章標籤
創作者介紹

Ryoutsu brother & Mobile Notebook

Ryoutsu brother 發表在 痞客邦 PIXNET 留言(0) 人氣()