Home » WordPress » EvernoteのクリップボタンとTOPSYのRETWEETボタン設置改2
10月
25

今度はTOPSYのRETWEETボタン設置について。WordPressのプラグインはTopsy Retweet Button
Topsy Retweet ButtonはブログにRT数やRetweetボタンを設置することができる、Twitter対応の検索エンジンサービス。また、RT数をクリックすることで記事がどのくらいRTされたかが表示されます。

以下、導入までの覚書Topsy Retweet Buttonバージョン。

覚書1:基本設定
<head>~</head>内に以下のタグを記述。

<script src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator" type="text/javascript"></script>

各ページの任意の場所に以下のタグを記述。

<div class="topsy_widget_data"><!–
 {
  "url": "記事のURL",
  "title": "記事のタイトル"
 }
–></div>

記事のURL記事のタイトルには各ブログのテンプレートタグを記述。

  • WordPress → "url": "<?php the_permalink(); ?>", "title": "<?php the_title(); ?>"
  • SereneBach → "url": "{entry_permalink}", "title": "{entry_title}"
  • MovableType → "url": "<$MTEntryPermalink$>", "title": "<$MTEntryTitle$>"
    • 覚書2:ボタンのカスタマイズ

      <div class="topsy_widget_data"><!–
       {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "Twitterのユーザー名",
        "style": "big",
        "theme": "テーマ名"
       }
      –></div>

      1. "nick": "Twitterのユーザー名",
      RT時のユーザー名を変更します。例えば”@nachikos”と表示したい場合なら、"nick": "nachikos",と設定。すると以下のように表示されます。
      Topsy Retweet Buttom-RT表示例1

      2. "style": "big",
      ボタンのサイズを指定します。サイズは2種類、大か小か。
      大サイズ指定 → "style": "big",
      小サイズ指定 → "style": "small",

      3. "theme": "テーマ名"
      RTボタンの色を指定。詳しくはTopsy Retweet Buttomのサイトを参考に。
      Topsyー色指定

      覚書3:ボタンのオプション設定
      主な設定な上記2点で十分だと思うのだけれども、他にも細かく設定が出来るようなのでこちらも覚書。

      <div class="topsy_widget_data"><!–
       {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "Twitterのユーザー名",
        "style": "big",
        "theme": "テーマ名",
        "order": "retweet,badge,count",
        "tweet_text": "tweet",
        "retweet_text": "tweet",
        "streaming": "off"
       }
      –></div>

      1. "order": "retweet,badge,count",
      ボタンのパーツ表示指定をしたい場合はここで設定。ボタン・バッジ・カウンターの3種類があり、ボタンスタイルがbigに設定されていないとバッジは機能しないみたい。デフォルトでは「count,retweet,badge」となっているので特にこだわりがないのであれば設定は不要かと。

      2. "tweet_text": "tweet",
      まだ誰もRTしていない時に表示される文字。デフォルトでは「tweet」。

      3. "retweet_text": "tweet",
      RTボタンの表示設定。デフォルトでは「retweet」。

      4. "streaming": "off"
      RTされた時にリアルタイムに更新するかどうかの設定。「on」にすればリアルタイム表示更新。デフォルトは「off」。

      5. 設定時の注意事項
      最後の設定データ末尾以外には必ず「,(カンマ)」を付けるようにすること。でないと正常に動作しなくなる模様。また最後の設定データに「,(カンマ)」を付けるとIEでは動作しなくなるので注意が必要。

      覚書4:トップやアーカイブページなどに表示する
      トップページやアーカイブページには記事が複数表示されるけれども、それを記事ごとに表示&カウントさせたい場合の設定方法。<head>~</head>内に以下のタグを記述。

      <script type="text/javascript" id="topsy_global_settings">
        var topsy_theme = "テーマ名";
        var topsy_style = "big";
        var topsy_nick = "Twitterのユーザー名";
      </script>

      ボタンのオプション設定もしちゃいたい場合はこちらのタグを<head>~</head>内に。

      <script type="text/javascript" id="topsy_global_settings">
        var topsy_theme = "テーマ名";
        var topsy_style = "big";
        var topsy_nick = "Twitterのユーザー名";
        var topsy_order = "retweet,badge,count";
        var topsy_tweet_text = "tweet";
        var topsy_retweet_text = "tweet";
        var topsy_streaming = "off";
      </script>

      任意の場所に場所に以下のタグを記述。

      <div class="topsy_widget_data"><!–
        {
          "url": "記事のURL",
          "title": "記事タイトル"
        }
      –></div>


      覚書5:文字化け解消方法
      上記は公式に書かれている設定方法なんだけれども、どうも日本語が文字化けしてしまう(´・ω・`)
      <head>~</head>内への記述内容は上記のままで、各記事に対応させるタグを直接引数設定させてみるとこんな感じ。

      <script type="text/javascript" src="http://button.topsy.com/widget/retweet-big?nick=ユーザーID&url=記事のURL"></script>

      ちなみに上記タグの「nick=ユーザーID」の部分、Twitterのユーザー名に変更せずにそのまま「ユーザーID」としておけばRTではなく通常のpostになります。
      Topsy Retweet Buttom-RT表示例2

      あ、あれ…色がかわらねぇ:(;゙゚’ω゚’):

, , ,

One Response to “EvernoteのクリップボタンとTOPSYのRETWEETボタン設置改2”

  1. 12月 21st, 2010 at 12:41 | #1

    なちこさん、はじめまして。
    TOPSYのツイートボタンの置き方参考にさせてもらいました。
    記事のtitleとかsubtitleの括りが分かりやすくて、シャレオツで、スゲーです。ヤベーです。

    ありがとうございました。(^^

Add reply

Trackback URL

管理者の承認後に表示します。無関係な内容や、リンクだけで意見や感想のないものは承認しませんのでご了承ください。