jTweetsAnywhere導入 | ひいろんＢＬＯＧ

jTweetsAnywhere導入

| 2012年05月26日(土) |

2 |

0 |

【2013/06/24追記】
@Anywhereが新APIへの移行で
サービス提供が終了された為
jTweetsAnywhereは利用不可になりましたので
Twitterの公式ウィジェット（新API対応版）に変更しました。
【参考リンク】
+ ひいろんＢＬＯＧ + | Twitter公式ウィジェットのカスタマイズ

既に数日前よりブログへ導入～サイトトップへも利用していますが

Twitterのツイートをブログやサイトに簡単に設置できるスクリプト
【jTweetsAnywhere】を導入しました。。ちなみに…
Twitter公式のモノもあり、当初はコチラを利用してたんですけどね。。

【Twitter公式タイプ】
Twitter公式ヴィジット

※【コチラ】よりカスタマイズ＆コード生成ができます。

サイト構築にあたり、せっかくならより統一感を出したいって事で…

より自由度の高い【jTweetsAnywhere】を。。

っつ～事で、簡単に導入方法を書きます。。

①　jQueryを入手。

②　jTweetsAnywhereを入手。

③　上記２つのスクリプトをアップロード。

④　利用するためのソースを書く。

って簡単すぎて、なんのこっちゃわかりませんよね(^^;

【①　jQueryを入手】

jTweetsAnywhereはそれ単体では動きません
（jQueryのプラグイン）
ので元となる【jQuery】をダウンロードします。。

【②　jTweetsAnywhereを入手】

もちろん【jTweetsAnywhere】もない事には話になりませんね。。

【③　上記２つのスクリプトをアップロード】

これについては説明不要ですよね(^^;
ちなみにアップロードするモノはこちら。。
アップロードするファイル

【④　利用するためのソースを書く】

最後に…
ブログやサイトへ表示するためのHTMLを書きます。。

まず…
head内
<head>～</head>
にcssとjsを読み込みます。

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.jtweetsanywhere-1.3.1.min.js"></script>
<script type="text/javascript" src="jtweetsanywhere-de-1.3.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="jquery.jtweetsanywhere-1.3.1.css" />

あとは表示させたい場所に。。

<div id="hiiron_tweet"></div>

$(function(){
$('#hiiron_tweet').jTweetsAnywhere({
username:'hiiron_jp',
count:10,
});
});

こんな風に書いてあげればＯＫです。
上記のコードだとhiiron_jp(ひいろんのTwitter ID)のツイートが１０件表示される様になります。。

あと、呼び出し名がhiiron_tweetになってますがその辺は変えてやってください(^^

上記コードは基本ですが
他のパラメータやコードを入れてあげると色々なカスタマイズが可能です。。

【jTweetsAnywhere】についての事柄や他のサンプルコードについては
下記サイトに掲載されてるのでご参考まで。。

本家サイト
・Demo | jTweetsAnywhere - jQuery Twitter Widget with @Anywhere support

日本語でわかりやすく解説されてるサイト
・[JS]Twitterのツイートをブログやサイトに簡単に設置できるスクリプト -jTweetsAnywhere

ちなみに…

上記サンプルコードの中で

プロフ表示

ホバーカード機能やツイート用テキストボックス設置機能があるものがあります。。

それらを利用するには

<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=APIKey&v=1"></script>

この一行をhead内へ記載する事で機能します。

APIKeyへは自分のAPIキーを入力してあげます。

APIキーの取得ですが、Twitter の「アプリケーションを登録」を【コチラから】すると得られます。。

その辺の詳しい内容は、下記サイトさんで述べられてるので
ご参考まで。。

・無料ブログパーツをさがせ: 無料ブログで jTweetsAnywhere と Twitter@Anywhere を使ってみた

ちなみに…
jTweetsAnywhereさんのトコに載ってる【APIKey】のままでも大丈夫みたいですけどね(^^;

なお、ここまでだと…

表示スタイルがデフォルトのままなんで。。

jquery.jtweetsanywhere-1.3.1.css
（CSSファイル）

を弄って自分のサイトなりブログなりのスタイルに合わせる必要があります。

個人的には、この作業が一番苦労しましたが(^^;

っつ～か、ブログやサイトに溶け込みすぎて
あまり目立たなくなってる気がしないでもないですけどね（爆

【2013/06/24追記】
@Anywhereが新APIへの移行で
サービス提供が終了された為
jTweetsAnywhereは利用不可になりましたので
Twitterの公式ウィジェット（新API対応版）に変更しました。
【参考リンク】
+ ひいろんＢＬＯＧ + | Twitter公式ウィジェットのカスタマイズ

2012年05月26日(土) 12:45 |