♫ みんのブログ ♫

大家是否在其他格友家看過FB粉絲團的伸縮外掛呢?
當滑鼠移到右邊Facebook圖樣時,便會跑出FB粉絲團的資訊
如下圖

小弟也放了一個在右邊給大家參考參考

今天要分享如何在格子裡加入這個外掛

01.首先用粉絲團管理者的帳號登入自己的Facebook粉絲團

02.連結到 https://developers.facebook.com/docs/plugins/like-box-for-pages 中間畫面如下

[Facebook Page URL] 填上粉絲團的連結

[Width] 根據說明,填上最小的寬度 292

[Height] 這邊我們填上300

[Color Scheme] 根據你的版型挑選淡色係light,或是暗色系dark

[Show Friends' Faces] [Show Header] [Show Posts] [Show Border] 根據個人所需去勾選

以上設定變更時下面都會有預覽,可以看看有什麼不一樣

03.接著按下 [Get Code] 會出現如下圖,共有四種語法,這邊我們選擇 [IFRAME],複製語法吧

04.取得語法後回到我們的部落格 [側邊欄位設定] 

按下右上方的 [新增版位] 如下圖

[自訂標題] 可自行填寫

[自訂區塊內容] 如下圖

05.第一部分紅色框完整語法如下,把下面[外掛語法]四個字換成剛複製的語法(綠色框部分)

<div class="fbbox" style="right: -292px;"> 外掛語法 </div>

這裡要小修改一下

在 258px; 後面加入上圖藍色框選的文字 background-color: white;

06.第二個紅色框請貼上下面的語法

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> $(document).ready(function() { $(".fbbox").hover(function(){ $(this).stop().animate({right: "0"}, "medium"); }, function(){ $(this).stop().animate({right: "-292"}, "medium"); }, 500); }); </script>

07.按下右下角的 [送出] 即可成功新增版位

08.再來要將剛新增的版位從 [版位暫存區] 拖拉到 [側欄1] 或是 [側欄2],拖拉後記得按下 [儲存版面]

09.最後是加上CSS語法,連結到 [CSS 原始碼編輯] ,複製下面語法貼到最後面,記得按下[儲存]

/*fb粉絲團css*/ .fbbox{background: url("http://i.minus.com/iYA3ZUlbcmDUB.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 0 0 46px;width: 292px;z-index: 99999;position:fixed;right:-260px;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;}

回到你的格子看看結果吧!

本文引用自blogbackup - Facebook 粉絲團外掛