WordPress/Movable Typeに公式ツイートボタンを設置する

WordPress/Movable Typeに公式ツイートボタンを設置する

Posted at September 14,2010 2:55 AM
Tag:[Twitter]

Twitterの公式ツイートボタンをWordPressやMovable Typeに設置する方法を紹介します。当サイトでも次のように設置してみることにしました。

記事表示サンプル

公式ツイートボタンは、ブログなどの記事に生成したコードを貼り付けることで、記事のツイートなどが簡単に行えるようにするためのものです。

数字の部分をクリックすると、該当記事の検索結果画面を表示します。また、「ツイートする」をクリックすれば、ポストに記事タイトルとユーザー名が埋め込まれたツイート画面が表示されます。

ツイート画面

ということで今更な感がありますが、設置方法を紹介します。ツイートボタンは公式ツイートボタンのページで作成します。

公式ツイートボタンのページ
公式ツイートボタンのページ

1.ボタンの形式選択

まず、ボタンの形式を選択します。

ボタンの形式選択

選択した形式は、ブログにコードに含まれるa要素のクラス属性「data-count」の値となります。それぞれの値は次の通りです。

  • 垂直方向にカウント数を表示 :vertical
  • 水平方向にカウント数を表示:horizontal
  • カウント数の表示なし:none

2.ツイート内テキストの形式選択

ツイートボタンを押してツイートするときに、ポストに埋め込みたいテキストを設定します。通常は、ツイートボタンを設置した記事の記事タイトルなどを表示するようにします。

ツイート内テキストの形式選択

メインページや月別ページ、カテゴリページなど、1つのページに複数記事が表示されているページにツイートボタンを(記事毎に)貼り付ける場合は、テキストフィールドに次の内容を設定します。

WordPressの場合、<?php the_title(); ?>を設定します。

WordPressの場合

Movable Typeの場合、<$mt:EntryTitle$>を設定します。

Movable Typeの場合

記事ページなど、1つのページに1つの記事しか表示されないページには、「ボタンが表示されるページのタイトル。」を選択すれば、ツイート時にtitle要素の内容をそのまま埋め込みます。title要素の内容を使いたくない場合は前述のテンプレートタグを設定しても構いません。

設定した内容は、テンプレートタグのまま、クラス属性「data-text」の値となります。「ボタンが表示されるページのタイトル。」を選択したときは、クラス属性「data-text」は設定されません。

4.URLの設定

ツイートボタンを押してツイートするときに、ポストに埋め込みたいURLを設定します。通常は、ツイートボタンを設置した記事のURLを表示するようにします。URLは、TwitterのURL短縮サービスt.coによって自動的に短縮表示されます。

URLの設定

3項と同様、メインページや月別ページ、カテゴリページなど、1つのページに複数記事が表示されているページにツイートボタンを(記事毎に)貼り付ける場合は、テキストフィールドに次の内容を設定します。

WordPressの場合、<?php the_permalink(); ?>を設定します。

WordPressの場合

Movable Typeの場合、<$mt:EntryPermalink$>を設定します。

Movable Typeの場合

記事ページなど、1つのページに1つの記事しか表示されないページには、「ボタンが表示されるページのURL」を選択すれば、ツイート時にページのURLをそのまま埋め込みます。前述のテンプレートタグを設定しても構いません。

選択した形式は、コードに含まれるa要素のクラス属性「data-url」の値となります。「ボタンが表示されるページのURL」を選択したときは、クラス属性「data-url」は設定されません。

5.言語選択

表示するツイートボタンの言語を選択します。

言語選択

選択言語によってツイートボタンの表示が変わります。選択した形式は、コードに含まれるa要素のクラス属性「data-lang」の値となります。それぞれの値は次の通りです。

  • 日本語:ja
  • フランス:fr
  • ドイツ:de
  • スペイン:es

「英語」を選択した場合は、クラス属性「data-lang」は設定されません。

6.フォローユーザーの設定

ポストに、フォローを促すユーザー名を設定します。設定したユーザー名は「via @ユーザー名」と表示されます。

フォローユーザーの設定

例えば、次のように設定しておけば、

フォローユーザーの設定例

ツイート後の画面で次のようなフォローを促すメッセージが表示されます。


フォローを促すメッセージ

1に設定したデータは、コードに含まれるa要素のクラス属性「data-via」の値となります。2の「関連アカウント」に設定したデータは、クラス属性「data-related」の値となります(関連アカウントと関連アカウントの説明はコロンで区切られます)。

7.コード

1~6項までを設定すれば、画面の一番下にツイートボタン生成用のコードが表示されるので、ブログの任意の位置に埋め込みます。

WordPressの場合、生成コード例は次のようになります。

<a href="http://twitter.com/share"
  class="twitter-share-button"
  data-url="<?php the_permalink(); ?>"
  data-text="<?php the_title(); ?>"
  data-count="vertical"
  data-via="foo"
  data-lang="ja">
    Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Movable Typeの場合、生成コード例は次のようになります。

<a href="http://twitter.com/share"
  class="twitter-share-button"
  data-url="<$mt:EntryPermalink$>"
  data-text="<$mt:EntryTitle$>"
  data-count="vertical"
  data-via="foo"
  data-lang="ja">
    Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

TwitterボタンやFacebookボタン、mixiチェックを配置 from Graffiti Capsule
Twitterのツイートボタン FacebookのLike ボタン Facebookのシェアボタン はてなブックマーク mixiチェック 以上を配置し... [続きを読む]

Tracked on February 22, 2011 4:24 PM

Twitterのツイートボタンを置きました from veefour's digital life
FC2拍手のボタンを置いてましたが、たくさんの拍手をいただきとても励みになりました。どうもありがとうございました。 なのですが、たまにスパムと思われる意味... [続きを読む]

Tracked on May 2, 2012 2:07 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)