[Blogger] 在網頁側邊加入浮動式Facebook粉絲團外掛Widget，三分鐘搞定

魏子靖

相信很多人應該看過有些網站的側邊欄會嵌入浮動式的Facebook粉絲團Widget，預設的情況會收合起來貼齊著瀏覽器側邊，而當滑鼠移過去之後就會將整個Widget滑出，這樣的效果除了炫之外，另一個優點就是很容易被訪客看到，進而達到宣傳的效果，那麼在Blogger中怎麼加入這樣子的特效呢？網路上很許多的教學文章，我參考了幾個，都有不錯的呈現效果，但我選擇了一個最簡單的方式來介紹，熟練的話，用這個方法真的不需要三分鐘就可以搞定，可以說是懶人套用法，有需要的人快來試試吧，以下先捉個動態圖讓各位參考一下效果。

參考網頁：Two New Stylish Floating Facebook Like Box For Blogger
推薦閱讀：[Blogger] 如何在文章側邊加入浮動式的社群網站分享按鈕
實際DEMO：請點我觀看

使用教學

步驟一：進入後台，選擇「範本」→「編輯HTML」，搜尋「</head>」此關鍵字，並將以下語法貼在</head>之前

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js” />

步驟二：把下列語法「Facebook粉絲團ID」替換成自己的，例如我的FB粉絲團網址是「http://www.facebook.com/jinnsblogfans」，那麼就把「Facebook粉絲團ID」換成「jinnsblogfans」

<script type=”text/javascript”> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(“.abtlikebox”).hover(function() {jQuery(this).stop().animate({right: “0”}, “medium”);}, function() {jQuery(this).stop().animate({right: “-250”}, “medium”);}, 500);}); /*]]>*/ </script> <style type=”text/css”> .abtlikebox{background: url(“http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png”) no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px “lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class=”abtlikebox” style=””> <div> <iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FFacebook粉絲團ID&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270″ scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;”></iframe><span><a href=”http://mbt33.blogspot.in/2012/12/two-new-stylish-floating-facebook-like.html” target=”_blank”>Get This!</a></span></div></div> </div> </div>

步驟三：在後台點選「版面配置」→「新增小工具」→選擇「HTML/Javascript」並把步驟二的語法貼上即可，就這麼簡單喔，如果你也覺得好用的話，請記得隨手按個讚喔！

註1：作者還有提供另一個樣式，使用的方法都是一樣，如果想套用另一種樣式的話，語法請到官方網頁取得
註2：語法中有用到「fb1-right.png」這張圖，若怕圖片的連結失連，可以自行將圖傳到自己的空間，另外，亦可以備份步驟一的Javascript檔