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

モード変更

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

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

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

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

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

2011/01/20 (木)  カテゴリー: ブログカスタマイズ上級
その記事に付いた(リンクの張られた)ツイート数の表示,ツイートするボタン画像 等
Twitter

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

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

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

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

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

via と related 部分には 任意のツイッターアカウント(ID) を設定することができます。
  • via : ツイート末尾に @アカウント名 が表示されます。
  • related : ツイート後に 「~があなたにフォローするようにおすすめしています」 とそのユーザー情報が表示され 【フォローする】 ボタンが表示されるものです。
この辺りは入れると 「鬱陶しい..」 と思われることもあると思うので、任意で。。。
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を確認 ]

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

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

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

2011/01/20 ~ | Comment (4) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-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

コメントを投稿する 記事: ツイート数の表示を テキストで表示させる方法


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。