Blogger記事にTwitter(ツイート)ボタンを設置する方法

ポッキー＆プリッツ食べました！Ardor(@ArdorOnline)です。
今回は、TwitterボタンをBloggerに設置する方法をご紹介します。
Twitterボタンの設置は、とても簡単です。
ほとんどカスタマイズする必要は、ありません。
設置したい方は、参考にしてみてください。

Twitterボタンを設置する手順は、次の通りです。

Twitterボタン作成ページへ行く
ボタンを選択する
ボタンのオプションを設定する
コードをコピーする
Blogger用にカスタマイズ
Bloggerテンプレートに貼り付けて完了

Twitterボタン作成ページへ行く

公式ページから元となるコードを取得しましょう。

Twitter / Twitterボタン

ボタンを選択する

公式ページでボタンを作成するページまでいけたら、ボタンを選択します。
今回はツイートできるボタンを設置するので、
「リンクを共有する」を選択します。

ボタンのオプションを設定する

ボタンを選択すると下半分に、オプション画面が出てきます。
ここで、オプションを設定していきます。

「URLを共有」の欄にBloggerのURLを指定しておきます。
設定しなければ、表示中の記事ページのURLが設定されますが、
Bloggerは、リダイレクト仕様があるので、
ツイートされるURLは統一しておいた方が良いでしょう。

「言語設定」で、「日本語」を選択します。
これは表示されるボタンが日本語になるだけです。

コードをコピーする

画面右上にコードがあります。
コードをコピーしてください。

コードを整理すると、次のようになっています。

■取得したコード

<a
href="https://twitter.com/share"
class="twitter-share-button"
data-url="http://blog.asterlist.com/"
data-lang="ja"
>ツイート</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>

URLを指定していない方は、赤字の部分がなく、
そのままBloggerに設置してOKです。
URLをリダイレクトに対応したい方は、先に進んでください。

Blogger用にカスタマイズ

ではBlogger用にカスタマイズしていきます。
Bloggerには、リダイレクトする仕様があるため、
同じ記事でもURLが異なることがあります。
※独自ドメインを導入されている方は、関係ないです。

リダイレクトに対応するためにURL指定を変更します。

変更前：

data-url="http://blog.asterlist.com/"

変更後：

expr:data-url='data:post.canonicalUrl'

変更したコードは、次のようになります。

■カスタマイズコード

<a
href="https://twitter.com/share"
class="twitter-share-button"
expr:data-url='data:post.canonicalUrl'
data-lang="ja"
>ツイート</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>

Bloggerテンプレートに貼り付けて完了

Blogger用コードまで作成できたら、あとはコードを貼り付けるだけです。
任意の位置にコードを貼り付けて、Twitterボタンを設置してください。

このブログでは、「data:post.body」の直下に記述して設置してあります。

貼り付け方は、
「テンプレート」→「HTMLの編集」
→「ウィジェットのテンプレートを展開」にチェックを入れて表示する。

設置したい箇所にコードを貼り付ける。
※バックアップを必ずとってから実施してください。

よくわからなかった方へ

説明がうまくできていなくてすみません。
コピーして貼り付ければOKのBloggerコードを用意しました。
ご自由にコピーして持っていってください。

Twitterボタン形状

Twitterボタンにも形状の指定が行えます。
タグ内に「data-count」属性を追加して、形状を指定してください。
指定できる形状をまとめておきます。

例：data-count='vertical'

指定値	形状
horizontal	ツイート
vertical	ツイート
none	ツイート

オプション紹介

他にもオプションがありますので、参考までにご紹介します。

属性	説明
data-text	タイトルやツイート内容を指定できます。
data-via	ユーザーを指定できます。「@」は不要です。
data-lang	言語指定です。「ja：日本語」「en：英語」などが指定可能です。
data-size	ボタンサイズの指定です。大きくしたいなら「large」を指定します。
data-related	推奨を指定する。
data-hashtags	ハッシュタグの指定です。
data-dnt	オプトアウト指定です。「true」「false」が指定可能です。

指定例は、次の通りです。

最後に

いかがでしたでしょうか？
Twitterボタンを設置できましたか？
設置できた方は、是非ツイートしてください！

この記事で設置できれば幸いです。
最後まで読んで頂きありがとうございます。

2012/11/11