ケイタイ版 ありのごとくあつまりて

※このページは 携帯向け です。 このメッセージが表示されている場合は、PC版 記事 もしくは スマホ版 記事 への移動をお願いします。
ケイタイ版 では一部の画像が表示されなかったり、レイアウトが崩れて表示される場合などがあります。


*前の記事 | 次の記事#


ツイート数の表示を テキストで表示させる方法

2011/01/20  Hatena Twitter
ブログカスタマイズ上級


その記事に付いた(リンクの張られた)ツイート数の表示,ツイートするボタン画像 等
Twitter

FC2ソーシャルブックマーク が、2011年2月16日でサービス終了されるそうです。 FC2ブックマークに追加するボタン を設置されている方は 撤去した方が良いかもしれませんね。 ちなみに、ブックマークに追加するボタン(リンク) や ツイートするボタン などは、殆どが javascript を使わなくても設置できますよ。 [ 関連記事 ]

で、今回は 「ツイート数表示 をシンプルに テキストで表示しちゃおう!」 という話。その方法の紹介です。 「テキストで」 と書きましたが、上手く画像と組み合わせたりしたら オリジナルのツイート数表示 も可能だと思います。 公式のものを使うより目立つかも。。

また、記事に付いたツイートを検索するのには 公式Twitter を使うより TOPSYで検索 した方が拾い漏れが少ないので便利です。 コメント数,トラックバック数 横に表示させた ツイート数のリンクからは TOPSY(トプシー) へ繋げています。

その記事へのリンクが張られたツイートを 「4 tweets」 のようにテキストで表示し、TOPSY ツイート検索へ繋げる方法

Parodayさん の記事
[ Twitter公式ツイートボタン ツイート数と検索ページはTOPSYで設置 ] を利用させてもらうと、色々なパターンのソースが生成できるようになっているので(下図)、それを使わせてもらいます。 検索サイト: TOPSYカウント: Twitter(private API) を選択。

via と related 部分には 任意のツイッターアカウント(ID) を設定することができます。 この辺りは入れると 「鬱陶しい..」 と思われることもあると思うので、任意で。。。
Parodayさんの記事より

生成されたソースを メモ帳などに全てコピーしておきます。 スタイルシートに追加という項目も表示されますが、これは必要に応じて利用すればいいと思うので、単純にテキストで 「4 tweets」 などと表示する場合は 何も入れなくてもOKだと思います。

<a href="http://topsy.com/trackback?url=<%topentry_enc_link>" class="twSCount" id="twSBC<%topentry_no>" target="_blank">Search</a>
実際のリンク例: ○○ tweets (javascript ON の時)

その下の 赤枠部分のスクリプト はこの場所に入れてもOKなのですが、当初 TOPSYのAPIを利用してみた時、23時前後になると 数分間、そのAPIとサーバーの影響を受けて 丁度その位置でブログの描画が数秒止まり、表示が異常に重くなってしまう現象がありました。

現在は、図にあるように Twitter(private API) を利用する方法を追加して頂いたので、そのような影響は感じなくなりましたが、</body>直前 に移動した方が、不具合などの場合にも ブログの表示遅延を防げると思います。

追記: 2011/03/31
Twitter(private API) から TOPSY API にまた切り替えて、現在テスト中です。 31日より適応中ですので、結果などは後程 報告します!

2012/01/02 ↑ これ以降、特に問題ないようなので、TOPSY API を利用しています。

実際にツイート数を表示するエリアだけに適応させるように、エリア変数を追加します。
例えば、以下のように設定します。(</body>直前に設置)

一般的ブログ (全記事一覧ページ と コメント編集エリア 以外で適応)
<!--not_titlelist_area--><!--not_edit_area-->
<!--topentry--><script type="text/javascript" charset="utf-8" src="http://urls.api.twitter.com/1/urls/count.json?url=<%topentry_enc_link>&amp;callback=tweetbCount"></script><!--/topentry-->
<!--/not_edit_area--><!--/not_titlelist_area-->

このブログでの設定 (トップページでも不要なので エリア変数を調整)
<!--not_index_area--><!--not_titlelist_area--><!--not_edit_area-->
<!--topentry--><script type="text/javascript" charset="utf-8" src="http://urls.api.twitter.com/1/urls/count.json?url=<%topentry_enc_link>&amp;callback=tweetbCount"></script><!--/topentry-->
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_index_area-->

エリア変数,その設定方法 がよく分からない方は 以下の記事を参考にどうぞ。
[ 関連記事 : エリア変数を加えて FC2ブログを軽くする! ]
[ 関連記事 : FC2ブログのエリア変数 表示されるページ見本 ]

後は、head要素内 という部分のスクリプトを追加すれば完成です! デフォルトの状態では ツイート数が 0 の場合には何も表示されないようになっているので、「0 tweet」 の場合も表示させたい場合は このスクリプトの一行を削除すればOK。 この部分は 外部スクリプト化 が可能なので、私は 外部ファイル にしています。

その他、詳細は Parodayさんの記事で。
[ 参考・参照 : Twitter公式ツイートボタン ツイート数と検索ページはTOPSYで設置 : FC2ブログ - Paroday ]

ちなみに、この記事を読んで 「難しくて意味が解らない!」 という方は 公式ツイートボタン を使う方法も。。 FC2ブログの管理画面から設置するものよりは 自由度は増しますよ。
但し FC2ブログの場合、スクリプト部分の文字コードを charset="utf-8" と設定しておかないと IE7以下 で正しく表示されない不具合が起こります。 ご注意を!
[ 参考 : Twitter 公式ツイートボタンの設置方法 : FC2ブログ - Paroday ]
[ 参考 : FC2ブログの各記事に「ツイートボタン」を設置する方法*二十歳街道まっしぐら ]



[ 関連記事 : FC2 ブログ記事にブックマーク追加ボタンを ]
[ 関連記事 : 短縮アドレス等 ツイッターで使われるURLを確認 ]


カテゴリー: ブログカスタマイズ上級

記事URLをメールする
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-181.html

前: Newマーク 表示スクリプト を少し変更しました。
次: IE の検索プロバイダーに AGUSE と TOPSY を追加する方法


*前の記事 | 次の記事#



コメントを見る (4)
コメントを書く
トラックバック (0)


ブログカスタマイズ中級 (15) / ブログカスタマイズ上級 (30) / FC2共有テンプレート (16) / FC2マニア・仕様関連 (21) / アクセス解析・SEO対策 (18) / ブログ雑記・その他 (8) / TV・NET・GAME (12) / 子育て・日々の出来事 (10) / 得するお役立ち情報 (15) / 無料素材のリンク集 (11) / 無料ソフト・フォント等 (10) / Twitter・ブラウザ関連 (26) /

最近のコメント12件
テンプレートについて

↑ ページ先頭へ ↑
ケイタイ版 トップページへ

ブログURLをメールする

by FC2ブログログイン

i-mobile


無料レンタル掲示板,チャット