crocodile notebook

feedly feedburner google+ twitter facebook creative commons BY:2.1 プロフィール

ややこしっ！なんかタイトルややこしっ！
どうも、鰐です！

Facebookのウィジェットでよく見るアレと同じレイアウトで、Twitterのアレを実現するjQueryです。
jQueryなのでWordPressに限定しないのがステキ。

利用方法

Twitter Follow Box からZipファイルをダウンロードします。

「jquery.followbox.js」は使わないのでアップロード不要です。
「icon_twitter.png」のみは公開ディレクトリのルートに「followbox」フォルダを作ってアップロードします。
もしくは「jquery.followbox.min.js」に記述されているファイルパスを修正してください。

必要とするjQueryはgoogleからのロードで大丈夫のようです。
WordPressの場合であれば以下のようにhead内に記述します。
（CSSやJSファイルの呼び出し先が異なる場合は修正してください）

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>google.load(“jquery”, “1”);</script>
<link href=”<?php bloginfo(‘template_url’); ?>/css/followbox.css” rel=”stylesheet” type=”text/css”/>
<script src=”<?php bloginfo(‘template_url’); ?>/js/jquery.followbox.min.js” type=”text/javascript”>

　
　

ソーシャルウィジェットを表示する

表示させたい箇所に以下のタグを貼付けます。

<div id=”twitterfollowbox”></div>

htmlの末尾近くに以下のオプションを貼付けます。

<script type=”text/javascript”>
$(‘#twitterfollowbox’).followbox({
‘user’ : ‘trmd’,
‘width’ : 500,
‘height’ : 500,
‘theme’ : ‘light’,
‘border_color’ : ‘#000’,
‘bg_color’ : ‘#fff’,
‘bg_image’ : ”,
‘title_color’ : ‘#336699’,
‘total_count_color’ : ‘#666’,
‘follower_name_color’ : ‘#000’
});
</script>

“user”は自身のTwitterアカウントを記述します。
それ以外は設置する場所にあわせて自由に設定してください。

設置したサンプルは当ブログサイドバーにあります。

表示するフォロワーの数は設定したサイズに応じて調整してくれます。
そのため、無駄な転送が発生することもないので安心です。

カスタマイズはCSSで行うのが基本になりますが、JSファイル内で直接指定することも可能です。
JSファイルに日本語を書き込めば日本語化もできますよ。

MITライセンスでの公開になっています。
どんどん使いやすくカスタマイズして利用しましょう！

Twitter Follow Box

WordPressデザインブック3.x対応
WordPressデザインブック3.x対応
posted with amazlet at 12.06.19
エビスコム
ソシム
売り上げランキング: 22392
Amazon.co.jp で詳細を見る

Facebookのソーシャルプラグイン風のTwitterソーシャルプラグイン

UPDATE: 2012.06.20
, , ,

併せ読みに選ばれている
記事はこちらのようです
俺の雑誌愛が暴走する雑誌だけのブログ『crocodile MAG’STACK』始めてました。

俺の雑誌愛が暴走する雑誌だけのブログ『crocodile MAG’STACK』始めてました。

自分の雑誌録を兼ねたブログを立ち上げました。 読んで益なし損もなし。薬にならなきゃ毒でもなし。

wordpressプラグインを12個使って運営しています

wordpressプラグインを12個使って運営しています

なにも目新しいところがないけど、当ブログで使ってるwordpressプラグインの一覧です。

Google Adsenseの広告コードを修正する4つの方法と、見落としがちなポリシー違反

Google Adsenseの広告コードを修正する4つの方法と、見落としがちなポリシー違反

従来は一切の変更を禁じられていたAdsenseコードの変更ですが、4つの方法に限り許可されました。 あわせて、たまにみかけるポリシー違反への注意喚起も1つほど。

crocodile notebookも4年目なので、ユーザビリティについて考えてみた結果

crocodile notebookも4年目なので、ユーザビリティについて考えてみた結果

google pagespeed insightやGTmatrixの指摘事項をヒントに改善してみた中から、コストもかからず比較的簡単なものをピックアップしてみました。

googleからのアクセス向上を狙ってAll in one SEOプラグインを調整してみた

googleからのアクセス向上を狙ってAll in one SEOプラグインを調整してみた

googleからのアクセス減少を機会にwordpressの設定を修正しました。 特にAll in one SEOプラグインは必要最小限に再設定。 はたして…

googleからのアクセスが激減したので回復のために傾向分析と対策を考えてみる

googleからのアクセスが激減したので回復のために傾向分析と対策を考えてみる

6月に入って急落したブログのアクセス数。 原因と対策を考えながら書きおこしてみました。 こうした問題の結論はいつだって「基本を大切に」ですね。