Paroday

Paroday：ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか？　yes

ツイートを表示するプラグイン　Twitter...

Twitter...　Twitterのツイートを表示するプラグインです。

» プレビュー

2013年6月12日

　本日、Twitterの仕様変更（API1.0廃止）によりプラグインは利用できなくなりました。応急措置としてこれに伴うエラーが出ないよう更新しました。設置したままでも問題ありませんが動作はしません。Twitterのタイムラインを表示する際は公式ウィジェットなどをご利用ください。

　ウィジェットはTwitter公式のウィジェットページから作成できます（要ログイン：メニューの[設定]からサイドバー左下のウィジェット）。ページを開いたら右上の『新規作成』をクリックしてタイムラインなどを選択してオプションを適当に設定。最後に『ウィジェットを作成』をクリックして表示されたコードをコピーして指定された場所に貼り付けて完了です。

　公式ウィジェットのデザインを変更したいときは「Twitter公式ウィジェットのフォント・背景色などを変更するプラグイン」などをご覧ください。

　登録中のプラグインについては時間の取れるときに変更する予定です。プラグインのご利用ありがとうございました。

プラグインの設定 ＞ 共有プラグイン追加
　作者に [paro2day] を入れて検索　『Twitter...』をダウンロード

※2011-11-11　FC2ファイルサーバーの更新が正常に行われず、スクリプトの変更が反映されない場合があります。プラグインコード内のアドレスを変更することを推奨します。

//変更箇所
s.src='http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitter.js';

　「46」を「15」に変更して、「.js」の直前に1を追加します。

http://blog-imgs-15.fc2.com/p/a/r/paro2day/twitter1.js

　「twitterj.js」の場合は「twitterj1.js」とします。

設定方法

　（サイドメニューの[環境設定][プラグインの設定]にある）ダウンロードした『Twitter...』プラグインの詳細をクリック。プラグインの改造から【HTMLの編集】を行います。

初期設定

　デフォルトでは fc2info のアカウントになっています。これを自分のユーザー名に変更します。

<a href="http://twitter.com/fc2info" target="_blank">Twitter</a>

変更後

<a href="http://twitter.com/ユーザー名" target="_blank">ユーザー名やニックネーム</a>
user : 'fc2info',

変更後

user : 'ユーザー名',

（例）ユーザー名 : paroday

<a href="http://twitter.com/paroday" target="_blank">PARO</a>

user : 'paroday',
表示件数の設定

　表示件数は次の一番左の数値で指定します。デフォルトでは 3 件表示されます。

count : [ 3, 5, 10 ],
count : [ 5, 5, 10 ], // 5件表示
@ユーザー名 で始まる返信ツイートの表示・非表示

　デフォルトでは true 、表示するになっています。

reply : true,

　非表示にするときは false にします。

reply : false,

　すると次のような返信ツイートが非表示になります。

@paroday おはようございました。 about 9 hour ago

　false の設定で@返信のツイートを多用する傾向にある場合は、ツイートが表示件数分、表示されないときがあります。そのような場合は表示件数の一番右の数値を増やして調整します。増やしすぎると読み込む量が多くなるため、必要以上に増やさない方がいいと思います。

count : [ 3, 5, 15 ],

　あまりにも@返信を多用する場合は true にすることを推奨します。

ツイート中に @ユーザー名 を含むツイートの表示・非表示

　デフォルトでは true 、表示するになっています。

at : true,

　非表示にするときは false にします。

at : false,

　すると次のようなツイートが非表示になります。

赤いのに冷たい理不尽な食べ物よ。 RT @paroday スイカがうまい。 about 1 hour ago

FC2ブログの番犬（ヒヨコ）。 @fc2info about 3 hours ago

　false の設定で@ユーザー名のツイートを多用する傾向にある場合は、ツイートが表示件数分、表示されないときがあります。そのような場合は表示件数の一番右の数値を増やして調整します。増やしすぎると読み込む量が多くなるため、必要以上に増やさない方がいいと思います。

count : [ 3, 5, 15 ],

　あまりにも@ユーザー名を多用する場合は true にすることを推奨します。

ツイートの並び

　デフォルトでは true 、新しいツイートから順に表示します。

line : true,

赤いのに冷たい理不尽な食べ物よ。 RT @paroday スイカがうまい。 about 1 hour ago

FC2ブログの番犬（ヒヨコ）。 @fc2info about 3 hours ago

　並びを逆にするときは false にします。

FC2ブログの番犬（ヒヨコ）。 @fc2info about 3 hours ago

赤いのに冷たい理不尽な食べ物よ。 RT @paroday スイカがうまい。 about 1 hour ago

特定ソースの表示・非表示

　指定したソースからのツイートを非表示にします。例えば、次のようにするとFC2ブログの通知ツイートが非表示になります（'FC2 Blog Notify' はFC2ブログのTwitter連携機能による通知ツイート）。

source : ['FC2 Blog Notify'],

FC2ブログの番犬（ヒヨコ）。 @fc2info 8:41 PM Jun 27th Twitpicから

　○○から の部分がソースです。Twitpicからのツイートを非表示にする場合は次のようにします。

source : ['Twitpic'],

　複数指定する場合はコンマで繋ぎます。

source : ['FC2 Blog Notify','Twitpic'],

　必要なければ、中身を削除します。

source : [],
リンクの開き方

　左が Permalink（日時部分のリンク）、右がツイート本文内のリンクです。

tgt : ['_blank', '_blank']

　とすれば、リンクすべてが新しいウインドウで開きます。

'_blank'  // 新しいウインドウ
'_self'   // 同じウインドウ（フレームそのまま）
'_top'    // 同じウインドウ（フレーム解除）

tgt : ['_blank', '_top']

　とすれば、ツイート本文内のリンクが新しいウインドウで開き、日時は同じウインドウで開きます。

FC2ブログの番犬（ヒヨコ）。 @fc2info ←新しいウインドウ 8:41 PM Jun 27th ←同じウインドウ

※8月15日以降にプラグインをダウンロードした場合は、既に status があるので、true と false の変更のみ行います。

　reply の後に status : true, を追加します。最後のコンマを忘れないように注意します。

reply : true, status : true,

　すると次のような返信ツイートのユーザーリンクが返信先のツイートになります。

@paroday おかえり。 about 9 hour ago

　paroday をクリックするとトップページではなく、返信先のツイートページに飛びます。

ただいま。 about 9 hour ago

※ただし、ツイートの返信から投稿せずに @ユーザー名 で始まるツイートを行った場合は宛先がないため、トップページに飛びます。

　トップページ（http://twitter.com/paroday）にリンクするときは false にするか追加した部分を削除します。

status : false,

時刻の12、24時間表記の切り替え

　hour : 12, の数値を変更します。ない場合は line の後などに hour : 12, を追加します（line : true, hour : 12,）。デフォルトは12時間表記です。

12時間表記
hour : 12,
   8:58 PM Aug 7th   //表示結果
24時間表記
hour : 24,
   20:58 Aug 7th   //表示結果

タイムスタンプの表示切り替え「○○ago」「○○前」「日時をそのまま」

　ago : false, を変更します。ない場合は line の後などに ago : false, を追加します（line : true, ago : false,）。

日時をそのまま
ago : false,
   8:58 PM Aug 7th   //表示結果
「○○ago」「○○前」
ago : true,
   3 hours ago   //表示結果

日付表示形式を変更する（2010-11-11etc）

　line の後などに fdate : 'yyyy-MM-dd hh:mm', を追加します。最後のコンマを忘れないように注意します。
　「fdate : 'yyyy-MM-dd hh:mm',」自体がない場合はデフォルトの表記になります。

line : true, fdate : 'yyyy-MM-dd hh:mm',
   2010-11-11 20:20   //表示結果

　それぞれ次の項目を表示します。

   yyyy   //年
   MM     //月
   dd     //日
   hh     //時
   mm     //分
   ss     //秒
   ja     //曜日（月、火、水）
   en     //曜日（Mon、Tue、Wed）

fdate : 'MM-dd ja hh:mm',
   11-11 木 20:20   //表示結果
fdate : 'yyyy年MM月dd日 hh時mm分',
   2010年11月11日 20時20分   //表示結果
fdate : 'yyyy年MM月dd日(ja) hh:mm',
   2010年11月11日(木) 20:20   //表示結果
fdate : 'yyyy/MM/dd en hh:mm:ss',
   2010/11/11 Thu 20:20:57   //表示結果

　デフォルトに戻すときは false を指定します。

fdate : false,

備考 : 「,」の後であれば、line の後でなくても構いません。

line : true, ago : false, fdate : 'yyyy-MM-dd hh:mm',
リンクを外す

　line の後などに timelink : false, を追加します。最後のコンマを忘れないように注意します。

line : true, timelink : false,

　文字色（888888）などを変更するときは次のスタイルを追加します。

#twitterTweet .twTimestamp {
 color: #888888 !important;
}
リンクをつける

　true に変更します。「timelink : false,」自体がない場合もリンクがつきます。

line : true, timelink : true,

備考 : 「,」の後であれば、line の後でなくても構いません。

line : true, hour : 12, timelink : false,

公式RTを表示する

　line の後などに rts : 1, を追加します。最後のコンマを忘れないように注意します。

line : true, rts : 1,

　すると公式RTが「RT @ユーザ名 : 」の形式で表示されます。

rts : 2,

　2に変更するとアイコン付きで表示されます。

rts : 3,

　3に変更するとリツイート元のプロフィールアイコン付きで表示されます。

　必要ない場合は、削除するか「0」を指定します。

※入れる箇所は、「status : true, rts : 1,」などの後でも問題有りません。

文字色・文字サイズ・行間などの変更

　ある程度はリセットしていますが、文字サイズなどは利用しているテンプレートによります。各スタイルやその優先順位を把握している場合は、不要なプロパティや「!important」を削除してください。

文字サイズの変更

　次のスタイルの font-size を変更します。

#twitterTweet {
 font-size: 12px; /* 文字サイズ */
}

　変わらないときは !important をつけます。

font-size: 12px !important;
ツイート本文の文字色

　次のスタイルに color を加えます。

div#twitterTweet li {
 margin: 0 !important;
 padding: 0.7em 0.2em !important;
 border-top: 1px #eeeeee solid !important; /* 線の色 #eeeeee */
 font-size: 100%;
 color: #000000;
}

　色が変わらないときは !important をつけます。

color: #000000 !important;
ツイート本文内のリンク文字色、下線

　style要素内やテンプレートのスタイルシート欄に次のコードを加えます。

div#twitterTweet li .twBody a:link { 
  color: #0099cc;
  text-decoration: none !important;
}
div#twitterTweet li .twBody a:visited { 
  color: #0099cc;
  text-decoration: none !important;
}
div#twitterTweet li .twBody a:hover { 
  color: #000000;
  text-decoration: underline !important;
}

　link は未訪問。visited は訪問済み。hover はカーソルを合わせたときの文字色です。 underline で下線を表示、none で下線を非表示にします。

　色が変わらないときは すべての color に !important をつけます。

color: #0099cc !important;

　未訪問、訪問済みを同じ色にする場合は次のようにしてもいいかもしれません。

div#twitterTweet li .twBody a { 
  color: #0099cc !important;
}
div#twitterTweet li .twBody a:hover { 
  color: #000000 !important;
}
日時部分（about 2 hours agoなど）の文字サイズ、下線、文字色

　次のスタイルを変更します。 underline を none にすると下線がなくなります。

#twitterTweet li .twTimestamp a {
 font-size: 11px;
 text-decoration: underline !important;
}

　文字サイズが変わらないときは !important をつけます。

font-size: 11px !important;

　リンク文字色はstyle要素内やテンプレートのスタイルシート欄に次のコードを加えます。

#twitterTweet li .twTimestamp a:link { 
  color: #338800;
  text-decoration: underline !important;
}
#twitterTweet li .twTimestamp a:visited { 
  color: #338800;
  text-decoration: underline !important;
}
#twitterTweet li .twTimestamp a:hover { 
  color: #338800;
  text-decoration: none !important;
}

　link は未訪問。visited は訪問済み。hover はカーソルを合わせたときの文字色です。 underline で下線を表示、none で下線を非表示にします。

　色が変わらないときは すべての color に !important をつけます。

color: #338800 !important;

　未訪問、訪問済みを同じ色にする場合は次のようにしてもいいかもしれません。

#twitterTweet li .twTimestamp a {
 color: #338800;
 text-decoration: underline !important;
}
#twitterTweet li .twTimestamp a:hover { 
  color: #338800;
  text-decoration: none !important;
}
行間の変更

　スタイル の div#twitterTweet li に line-height: 1.4; などを追加します。数値は 1.2～1.9 など好みの数値に変更してください。

div#twitterTweet li {
 margin: 0 !important;
 padding: 0.7em 0.2em !important;
 border-top: 1px #eeeeee solid !important; /* 線の色 #eeeeee */
 font-size: 100%;
 line-height: 1.4;
}

　変わらないときは !important をつけます。

line-height: 1.4 !important;

線の色・余白を変更する

　次のスタイルの #eeeeee 部分を変更すると線の色が変わります。

div#twitterTweet li {
 margin: 0 !important;
 padding: 0.7em 0.2em !important;
 border-top: 1px #aaaaaa solid !important; /* 線の色 #eeeeee */
 font-size: 100%;
}

　0.7em 0.2em 部分を変更すると余白が増減します。em を px に変更して、 10px 5px とすることもできます。

div#twitterTweet li {
 margin: 0 !important;
 padding: 0.5em 0.1em !important;
 border-top: 1px #eeeeee solid !important; /* 線の色 #eeeeee */
 font-size: 100%;
}

ツイートにカーソルをあわせたときの背景色を変更する

　style要素やテンプレートのスタイルシート欄に次のコードを加えます。# 部分で背景色を指定します。

div#twitterTweet li:hover {
 background: #fafafa;
}

　変わらないときは !important をつけます。

background: #fafafa; !important;

スクロールバーを表示する

　次のスタイルに height と overflow を追加します。height には適当な数値を指定してください。div#twitterTweet li の 2px はスクロールバーまでの右余白です。

div#twitterTweet ol {
 margin: 0.3em 0 !important;
 height: 250px; /* 高さ */
 overflow: auto;
}

div#twitterTweet li {
 margin: 0 2px 0 0 !important;
 padding: 0.7em 0.2em !important;
 border-top: 1px #eee solid !important;
 font-size: 100%;
}

　IEでスクロールバーの色を変更するときは次のコードを加えます。色は # の値を適当に変更してください。 

div#twitterTweet ol {
 margin: 0.3em 0 !important;
 height: 250px;
 overflow: auto;
 scrollbar-track-color: #ffffff;
 scrollbar-face-color: #fafafa;
 scrollbar-shadow-color: #cccccc;
 scrollbar-darkshadow-color: #ffffff;
 scrollbar-highlight-color: #ffffff;
 scrollbar-3dlight-color: #cccccc;
 scrollbar-arrow-color: #ff6666;
}

　変わらないときは !important をつけます。

height: 250px !important;

ユーザー名の左横にプロフィール画像を入れる

　<p class="twUser"> のすぐ後に次のコードを追加します。

<p class="twUser">
<img src="画像アドレス" class="profileImage" alt="" />

　width や height は画像の大きさにあわせて指定します。

<p class="twUser">
<img width="36" height="36" src="画像アドレス" class="profileImage" alt="" />

　余白などは次のスタイルで変更します。

#twitterTweet .twUser .profileImage {
 margin: 0 5px 0 0; border: 0 none;
 vertical-align: middle;
}

「Twitpic」「Youtube」「ニコニコ動画」などのサムネイル画像を表示する

　thumbnail : false, を変更します。ない場合は line の後などに thumbnail : false, を追加します（line : true, thumbnail : false,）。

サムネイル画像を表示しない
thumbnail : false,
サムネイル画像を表示
thumbnail : true,

　style要素内やテンプレートのスタイルシート欄に次のコードを加えます。既に「/* サムネイル画像 */」のスタイルがある場合は追加する必要はありません。

#twitterTweet .twBody img{
 margin: 0.5em 0.5em !important; padding: 0 !important;
 border: 3px #e9e9e9 solid !important; /* 枠線 */
 display: block;
}
#twitterTweet .twBody img:hover{
 border: 3px #00ddff solid !important; /* 枠線 */
}

　margin: 0.5em 0.5em は 画像の 上下余白 左右余白 になります。0.9emなどにすると余白が増えます。

　border: 3px #e9e9e9 solid は画像の枠線です。必要ない場合はこの行を削除します。線の太さは 3px 、色は #e9e9e9 で指定します。img:hover も同様です。

　主な対応サービスは次の通りです（サービス名 : URL例）

  • imgur : http://imgur.com/画像ID
  • Mobypicture : http://moby.to/画像ID
  • Ow.ly : http://ow.ly/i/画像ID
  • PhotoShare : http://bctiny.com/p画像ID
  • Plixi : http://plixi.com/p画像ID , http://tweetphoto.com/画像ID
  • Twitgoo : http://twitgoo.com/画像ID
  • Twitpic : http://twitpic.com/画像ID
  • yFrog : http://yfrog.com/画像ID
  • Youtube : http://youtu.be/動画ID , http://www.youtube.com/watch?v=動画ID
  • 携帯百景 : http://movapic.com/画像ID
  • ニコニコ静画 : http://nico.ms/im画像ID , http://seiga.nicovideo.jp/seiga/im画像ID
  • ニコニコ動画 : http://nico.ms/sm動画ID , http://www.nicovideo.jp/watch/sm動画ID

　ページによってはサムネイルが表示されないこともあります。ニコニコ動画のニコニコ生放送やコミュニティ、チャンネルなどは対象外です。

　サービス側の仕様変更により画像保管場所が変わると表示されなくなります。動作確認や不具合などの報告は@parodayなどにお願いします。

リンクの表記をアドレスから[URL]などの任意のテキストに変更する

　linktext : '[URL]', で変更します。ない場合は line の後などに linktext : '[URL]', を追加します（line : true, linktext : '[URL]',）。

任意のテキストを指定する
linktext : '[URL]',
   [URL]   //表示結果
linktext : '→URL',
   →URL   //表示結果
アドレスをそのまま表示
linktext : false,
リンクを外す

　line の後などに taglink : false, を追加します。最後のコンマを忘れないように注意します。

line : true, taglink : false,
リンクをつける

　true に変更します。「taglink : true,」自体がない場合もリンクがつきます。

line : true, taglink : true,

備考 : 「,」の後であれば、line の後でなくても構いません。

at : true, taglink : false,

「reply」「RT」のリンクを非表示に

　<style type="text/css">内か、利用中のテンプレートのスタイルシート欄に以下を追加します。

#twitterTweetA .twTimestamp a + a {display: none !important;}

　日付部分（Permalink）のリンクを外している場合（timelink : false）は「+ a」を削ってください。

#twitterTweetA .twTimestamp a {display: none !important;}

Loading... の文字を変更する

　次の箇所を任意のテキストに変更します。

 p.appendChild(_d.createTextNode('Loading...'));
 p.appendChild(_d.createTextNode('読み込み中…'));

Reloadの色や位置を変更する

　border 部分で枠線の色を、color と background で文字色と背景色を指定します。

#twReload { /* Reload */
 margin: 0 0 0 10px; padding: 1px 3px;
 border: 1px #aaaaaa solid;
 position: absolute; top: 2px; right: 2px;
 line-height: 1.1;
 color: #eeeeee; background: #000000;
 cursor: pointer;
}

　位置を微妙に移動させるときは、次のスタイルの top と right を調整します。top は上からの距離。right は右からの距離です。

#twReload { /* Reload */
 margin: 0 0 0 10px; padding: 1px 3px;
 border: 1px #fff solid;
 position: absolute; top: 2px; right: 2px;
 line-height: 1.1;
 color: #fff; background: #3ce;
 cursor: pointer;
}

　任意の場所に移動させるときは、次のスタイルの potision の行を削除して、HTMLコードを任意の場所に移動させます。

#twReload { /* Reload */
 margin: 0 0 0 10px; padding: 1px 3px;
 border: 1px #fff solid;
 position: absolute; top: 2px; right: 2px;
 line-height: 1.1;
 color: #fff; background: #3ce;
 cursor: pointer;
}
<div id="twitterTweet">
 <p class="twUser">
  <a href="http://twitter.com/fc2info" target="_blank">Twitter</a>
 </p>

</div>
<span id="twReload">Reload</span>

Reloadを削除する

　次のコードを削除します。

<span id="twReload">Reload</span>

　あとでまた利用するときはコメントアウトして非表示にします。再度利用するときはコメントアウトを削除します。

<!--<span id="twReload">Reload</span>-->

公式と同じ日本語表記にする（秒前、分前、時間前）

○秒前
○分前
約○時間前
24時間以上前のツイートはそのまま日時表示
3:00 PM Aug 7th

　次の箇所を変更します（ドットの前に「j」を入れる）。
twitter.js → twitterj.js

s.src='https://blog-imgs-46.fc2.com/p/a/r/paro2day/twitterj.js';

公式リツイートが多い場合の注意事項

　公式リツイートは表示されません。

　公式リツイートを頻繁にしていると、指定した表示件数分のツイートが表示されないときがあります。そのような場合は、count の真ん中の数値や右端の数値を適当に増やします。

　デフォルトでは真ん中の数値を増やします。

count : [ 3, 10, 10 ],

　reply または at を false にしている。あるいは source が空っぽ source : [], でない場合は、右端の数値を増やします。

count : [ 3, 5, 15 ],

IE6でReloadボタンの位置がずれるテンプレートの対処

　次のスタイルを加えます。

* html #twitterTweet .twUser {
 height: 0;/*\*//*/height: auto;/**/
}

　IE6で閲覧しても崩れない場合は必要ありません。

デザインスタイルをテンプレートに入れる

　プラグインに <style type="text/css"> ～ </style> というコードがあります。これを利用しているテンプレートのスタイルシート編集欄に入れます。

　/* Twitter... */ から /* Twitter... END */ までのスタイルをスタイルシート欄に移動させます。

　プラグイン内の <style type="text/css"> </style> 部分を削除します。

スクリプトを別のサーバにアップする

　jsファイルを自分のサーバにアップロードして利用します。下記リンクを右クリックして、保存。アップロードします。

» twitter.js

　アップロードが完了したら、ファイルのアドレスをプラグインのHTML内、次の箇所に入れます。

s.src='http://blog-imgs-46.fc2.com/p/a/r/paro2day/twitter.js';

s.src='アップロードしたファイルのアドレス';

　これで、46の画像サーバに障害があっても動くようになります。ただし、コードに不具合などがあった場合、こちら側の修正が反映されなくなります。何らかの修正があった場合は更新履歴や@parodayにて報告します。

ご利用にあたって

動作確認(Win) : IE6-8、Firefox2-3、Opera10、chrome4、Safari4

　Twitterが混雑する時間帯は表示に時間がかかります。

　質問や不具合・要望などはコメントや@parodayにお願いします。動作や表示がおかしいときは、利用しているテンプレートやブログアドレスなどの情報があると解決するかもしれません。

  • 【利用規約】
  • 改造、使用画像・ファイルの別サーバへのアップロードはOKです（著作権などは放棄しておりません）。
  • noscript要素（作者リンク）は別の場所に移動させたり、削除することができます。
  • ただし、スクリプトコード内の作者表記「Author Paroday(c)～」は削除しないでください。外部ファイルにコードを移す場合も同様です。
  • 再配布は原則禁止です。カスタマイズ後も含みます。

申請できるのはオリジナルのものに限られます。他所で配布されていたり、掲載されているコードを利用することは認められません。

自作を共有プラグインに登録する

関連記事
  1. comment

コメント

Icon ※必須 :
Pass 　※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)