「Twitter Button」を張ってみた


日本時間だと今日、「Twitter Button」というのが発表された。 Twitter、公式「Twitter Button」を発表 - ITmedia エンタープライズ米Twitterは8月12日(...

Posted by  on

「Twitter Button」を張ってみた

日本時間だと今日、「Twitter Button」というのが発表された。

米Twitterは8月12日(現地時間)、Webサイトに設置し、ツイートを簡易化する「Tweet Button」を発表した。これまでTweetMemeやTopsyなどサードパーティー製の同様のボタンはあったが、公式ボタンは初めての登場だ。
このサイトでも、同様のTweetMemeのボタンを張っていたのだが、TweetMemeのボタンは微妙に日本語訳がおかしいので、「Twitter Button」に張り替えてみた。

ところで、この「Twitter Button」、TweetMemeが技術的なサポートをしているらしく、同時にTweetMemeとの提携も発表されたようだ。

同社は、TweetMemeとの提携も発表した。TweetMemeはTweet Buttonに関して技術的なサポートを提供するという。さらに、TwitterのFirehose(公開ツイートのリアルタイムデータ)での取り組みでも協力し、Firehoseを利用した新製品を公開していくとしている

早速、TweetMemeのボタンのページには、Twitter の Twitter Button を使うように勧めてあり、リンクもあった。TweetMemeのボタンは近くなくなるのかな?


追記:ちょっと失敗。URLだけじゃなく、ツイート内テキストもMTタグで書かなきゃいけないかも...。

Twitter Button を MT サイトに張る方法

(ちょっと間違えたので、内容を書き換えています)

Twitter Button をサイトに張るには、Twitterで用意している下記のページから簡単に作成できるコードをサイトに張ることになる。

Twitter / ツイートボタン

コードにはJavascriptが使われているため、Javascriptが許可されたサイトならOKだ。

作り方は比較的簡単。Twitterで日本語を選択していれば日本語での説明が。(英語を選択していたら英語でした)

twitter1.png

まずは、ボタンの種類。
大きめのものとコンパクトなものがある。このへんはTweetMemeに似てる。あとは、カウント無しのボタンのみのもの。お好みで選んで下さい。

そして、タブで切り替えてカスタマイズできるが、このままでも通常はOK。
カスタマイズ内容は次のとおり。

1、ツイート内テキスト
ツイッターに投稿する際にデフォルトで入るテキスト。通常はページのタイトル。MTで記事リストなどでほかのページに表示するときには、テンプレートで使うようにここで「他のテキストを入力してください」を選びます。(文言はテキトーに)

2、URL
通常はボタンが表示されるURL。MTで記事リストなどでほかのページに表示するときには、テンプレートで使うようにここで「他のURLを入力」を選びます。(URLはダミーで入れてみて下さい)

3、言語選択
お好きな言語で。このサイトでは英語にしてみてます。


twitter2.png

次ぎはオプションだが、「フォローするのにおすすめのユーザー(オプション)」というもの。デフォルトで自分のアカウント名が1番に入っていると思う。もう1個、入力できるのだが、これは、誰かが Twitter Buttonで投稿した際、自分をフォローしていなければ、投稿後にアカウントがオススメとして表示されるのだ。(すでにフォローしていると出てこない)


設定は、これだけ、最後にボタンのプレビューを確認しつつ右下のソースコードを確認する。

twitter4.png

ここで、ソースコードの中に「" data-url="http://ダミー.com"」「data-text="テスト"」というのがある。通常は、これはいらない。ボタンの張ってあるページのURLとページタイトルがTwitterに投稿されるからだ。

しかし、サイドバーや過去の記事のように、違うページにこのボタンを表示したいときは、この部分を編集して張ることになる。

Movable Typeの場合は、下記のように「data-url="http://ダミー.com"」の部分を「data-url="<$mt:EntryPermalink$>" 」とすれば良い。

同様に「data-text="テスト"」の部分を「data-text="<$mt:EntryTitle$>" 」とすることで、その記事のタイトルになる。ブログ名を付け加えても良いだろう。

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<$mt:EntryPermalink$>" data-text="<mt:EntryTitle$>" data-count="horizontal" data-via="pot_au_feu" data-related="podmusicstreet:Share Music with Creative Commons">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

これで、サイドバーや過去の記事などで、それぞれの記事ごとのカウント等も反映される。

ハッシュタグをつけたい

ふと、これで、ハッシュタグが任意で付けてみたいと思ったので、前出の「data-text="<$mt:EntryTitle$>" 」の部分に付け加えてみた。また、ついでに、当サイトではページタイトルでファビコン代わりに [ポ] というのをつけているので、サイト名は入れずに次のようにしてみた。
「data-text="[ポ] <$mt:EntryTitle$> #mycupoftea" 」

これで、ハッシュタグ付でTweetされるはずだ。

TweetMemeはどうなるのかな

TweetMeme でも Twitter Button を勧めているので、今後はTweetMemeのボタンは無くなるんじゃないかと思い、カトキチさんとBCNさんの電子書籍のサイトも、TweetMemeが張ってあったので変えてみました。

しかし、BCNさんは問題なかったけど、カトキチさんのほうは明らかにTweetされた数がTweetMemeより少ない。ということで、しばらく両方張ることに。動向を見つつですね。

しかし、この Tweet Button は Tweetを促すことができるのも良いですが、フォローしてくれていない人にフォローも促すのがいいですね。当サイトでも、あまり告知していない Pod Music Street のアカウントを2番目に設定してみました。フォローしていない人はTweetしてみて下さい。出てくるはずです。



Posted On
Last Updated On
  • Podcastで聴く
  • Google Podcasts
  • Listen to Stitcher