Twitterのツイートボタンを設置

ツイッターと連携するため、ブログ記事のURLをツイートするボタンを記事タイトル下に設置しました。ボタンを押すと以下のようなポップアップが表示されて記事リンクをツイートすることが出来ます。

簡単にですがツイートボタンの設置手順をご紹介しておきます。（Bloggerの設置サンプルもあります）

HTMLソースの生成

1. 「Twitter/ツイートボタン」へアクセスします。
2. ボタンの種類を選択します。
3. ツイート内テキストを入力します。私の場合はダミーで入力しておき、後で変更しました。
4. URLを入力します。サイトアドレス固定とする場合はここで本物のURLを入力しますが、記事毎に変更する場合はダミーURLを入力しておき、後で変更します。
5. フォローユーザーとして自分のアカウントを記入します。不要な人は空欄で良いでしょう。（ここでの入力値は「via @dottore_emmett」のような形でツイートの最後に付加されます）
6. 生成されたコードをコピーします。
7. ダミーとしておいたものを本物に入れ替えてサイトに挿入します。（Bloggerの場合は以下を参照）

Bloggerへの設置

生成したソースコードをBloggerへ導入した場合の例をご紹介します。例に習って生成したHTMLソースコードを挿入してみてください。
（以下、「HTMLの編集」+「ウィジェットテンプレートを展開」で行います）

ツイートボタン用のJavaScriptファイルロードを</head>タグ直前あたりに埋め込みます

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

<div class='post-header-line-1'>の下あたりに以下を埋め込みます

<a class='twitter-share-button' data-count='none' data-lang='ja' data-via='dottore_emmett' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>

ツイートボタンは「Evernoteサイトメモリーボタン」の時と違って割とすんなり出来ました。

Twitter連携を検討している方は、ぜひ参考にしてみてください。

関連記事

• Evernoteにブログ記事をクリップするボタンを設置
• はてなブックマークボタンを設置
• Facebook いいねボタンを設置