この記事に含まれるタグ (Keyword) :
ツイッター ツイート数表示


FC2ソーシャルブックマーク が、2011年2月16日でサービス終了されるそうです。 FC2ブックマークに追加するボタン を設置されている方は 撤去した方が良いかもしれませんね。 ちなみに、ブックマークに追加するボタン(リンク) や ツイートするボタン などは、殆どが javascript を使わなくても設置できますよ。 [ 関連記事 ]
で、今回は 「ツイート数表示 をシンプルに テキストで表示しちゃおう!」 という話。その方法の紹介です。 「テキストで」 と書きましたが、上手く画像と組み合わせたりしたら オリジナルのツイート数表示 も可能だと思います。 公式のものを使うより目立つかも。。
また、記事に付いたツイートを検索するのには 公式Twitter を使うより TOPSYで検索 した方が拾い漏れが少ないので便利です。 コメント数,トラックバック数 横に表示させた ツイート数のリンクからは TOPSY(トプシー) へ繋げています。
その記事へのリンクが張られたツイートを 「4 tweets」 のようにテキストで表示し、TOPSY ツイート検索へ繋げる方法
Parodayさん の記事
[ Twitter公式ツイートボタン ツイート数と検索ページはTOPSYで設置 ] を利用させてもらうと、色々なパターンのソースが生成できるようになっているので(下図)、それを使わせてもらいます。 検索サイト: TOPSY , カウント: Twitter(private API) を選択。
- via : ツイート末尾に @アカウント名 が表示されます。
- related : ツイート後に 「~があなたにフォローするようにおすすめしています」 とそのユーザー情報が表示され 【フォローする】 ボタンが表示されるものです。

生成されたソースを メモ帳などに全てコピーしておきます。 スタイルシートに追加という項目も表示されますが、これは必要に応じて利用すればいいと思うので、単純にテキストで 「4 tweets」 などと表示する場合は 何も入れなくてもOKだと思います。
実際のリンク例: ○○ 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>&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>&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
2011/01/20 ~ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |お世話になります。Twitter公式ツイートボタンを、記事ページのみに設置したいのですが
data-url="<%topentry_link>" data-text="<%topentry_title>"
コード内に、上記のタグを入れなくても記事ページのみなら、別に問題、不具合等は起きないでしょうか。
不具合はないと思いますが、出来れば
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> を使うのが安全だと思います。
なるほどぉ~有難うございます。
ホームページを作る人のネタ帳の好きなブログに、謎のエージェントとして紹介されてますね。自分も納得します♪またよろしくお願いします。
そうなんです。。紹介してもらえるなんてホント恐縮でした。。
多分、ちょこちょこ(恐れもせず)口出し していたからだと思います(^_^;)
コメントを投稿する 記事: ツイート数の表示を テキストで表示させる方法
お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。
4 Comment