類似 Facebook Like Box 的 Twitter 版本 - 基於 jQuery

by - 下午5:16

Twitter Follow Box 實際執行畫面 A-Fu 網頁設計
Twitter Follow Box 實際執行畫面
可以在你自己的網站顯示 Twitter 的跟隨者數量及跟隨連結,就跟 Facebook 的社群套件一樣(Social Plugin Like Box),可自定義顏色大小以配合您的網站設計。

使用方法:
首先載入程式所需要的 JavaScript 程式碼
<link href="css/followbox.css" rel="stylesheet" type="text/css"/>
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//Followbox 的主程式碼
<script src="js/jquery.followbox.min.js" type="text/javascript"></script>


HTML部分只需要命名一個DIV的元素
<div id="container" class="follow-box-container"></div>

最後在加上 JavaScript 就完成了
$(function(){ //網頁載入完成後執行
  $('#container').followbox({
    'user' : '輸入您的 Twitter 的名稱'
  });
});


這樣就完成 Twitter Follow Box 的安裝了

附上程式可修改的參數值
參數
說明
user
要顯示的使用者名稱
width
盒子的寬度 (pixels)
height
盒子的高度 (pixels)
theme
盒子的樣式.可設定為 light,dark,custom
border_color
自定模式.框線顏色
bg_color
自定模式.背景顏色
bg_image
自定模式.背景圖片
title_color
自定模式.抬頭的文字
total_count_color
自定模式.總跟隨數的文字顏色
follower_name_color
自定模式.跟隨者姓名的顏色

作者網站:http://jobyj.in/twitter-follow-box-widget/
檔案大小:5.03 KB
檔案下載:http://jobyj.in/twitter-follow-box-widget/followbox_v1.zip
檔案備份:下載

You May Also Like

0 意見