ツイート数の表示をテキストで表示させる方法【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

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

2011/01/20 (木) カテゴリー：ブログカスタマイズ上級

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

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

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

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

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

via と related 部分には任意のツイッターアカウント（ID）を設定することができます。

via : ツイート末尾に @アカウント名が表示されます。
related ：ツイート後に「～があなたにフォローするようにおすすめしています」とそのユーザー情報が表示され【フォローする】ボタンが表示されるものです。

この辺りは入れると「鬱陶しい..」と思われることもあると思うので、任意で。。。

生成されたソースをメモ帳などに全てコピーしておきます。スタイルシートに追加という項目も表示されますが、これは必要に応じて利用すればいいと思うので、単純にテキストで「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>直前に設置）

一般的ブログ（全記事一覧ページとコメント編集エリア以外で適応）

<script type="text/javascript" charset="utf-8" src="http://urls.api.twitter.com/1/urls/count.json?url=<%topentry_enc_link>&callback=tweetbCount"></script>


このブログでの設定（トップページでも不要なのでエリア変数を調整）

<script type="text/javascript" charset="utf-8" src="http://urls.api.twitter.com/1/urls/count.json?url=<%topentry_enc_link>&callback=tweetbCount"></script>


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

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

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

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

キーワード検索：ツイッターツイート数表示

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-181.html

2011/01/20 ～ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |

CATEGORY : テンプレ・FC2マニア » ブログカスタマイズ上級

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

4 Comment

Twitter公式ツイートボタン設置について

お世話になります。Twitter公式ツイートボタンを、記事ページのみに設置したいのですが

data-url="<%topentry_link>" data-text="<%topentry_title>"

コード内に、上記のタグを入れなくても記事ページのみなら、別に問題、不具合等は起きないでしょうか。

taniguti | 2012/01/02 (月)　[ 編集 ] No.1229

不具合はないと思いますが、出来れば
data-url="<%topentry_enc_link>" は入れておいた方が良いかなとは思います。
理由は、記事ページのアドレスは通常は　./blog-entry-181.html　ですが、コメント投稿後には　./?no=181　というアドレスになってしまうので、（また、その他のパラメータ付きでアクセスされることもあるので）... 云々。
ツイートされるアドレスは特に気にしないというのであれば、入れなくて問題ないと思います。

data-text="<%topentry_enc_title>" などは記事ページのみなら入れなくてもOKだと思いますが、サイトの文字コードが euc-jp （FC2ブログの多く，旧仕様サーバー）の場合には、<%topentry_title> だと文字化けする可能性もあると思うので、入れるなら <%topentry_enc_title> を使うのが安全だと思います。

paruparu | 2012/01/02 (月)　[ 編集 ] No.1230

なるほどぉ～有難うございます。
ホームページを作る人のネタ帳の好きなブログに、謎のエージェントとして紹介されてますね。自分も納得します♪またよろしくお願いします。

taniguti | 2012/01/03 (火)　[ 編集 ] No.1231

謎でも何でもないですが。。

そうなんです。。紹介してもらえるなんてホント恐縮でした。。
多分、ちょこちょこ（恐れもせず）口出ししていたからだと思います(^_^;)

paruparu | 2012/01/04 (水)　[ 編集 ] No.1233