ポッキー＆プリッツ食べました！Ardor(@ArdorOnline)です。
今回は、TwitterボタンをBloggerに設置する方法をご紹介します。
Twitterボタンの設置は、とても簡単です。
ほとんどカスタマイズする必要は、ありません。
設置したい方は、参考にしてみてください。
Twitterボタンを設置する手順は、次の通りです。
- Twitterボタン作成ページへ行く
- ボタンを選択する
- ボタンのオプションを設定する
- コードをコピーする
- Blogger用にカスタマイズ
- Bloggerテンプレートに貼り付けて完了
Twitterボタン作成ページへ行く
公式ページから元となるコードを取得しましょう。
ボタンを選択する
公式ページでボタンを作成するページまでいけたら、ボタンを選択します。
今回はツイートできるボタンを設置するので、
「リンクを共有する」を選択します。
ボタンのオプションを設定する
ボタンを選択すると下半分に、オプション画面が出てきます。
ここで、オプションを設定していきます。
「URLを共有」の欄にBloggerのURLを指定しておきます。
設定しなければ、表示中の記事ページのURLが設定されますが、
Bloggerは、リダイレクト仕様があるので、
ツイートされるURLは統一しておいた方が良いでしょう。
「言語設定」で、「日本語」を選択します。
これは表示されるボタンが日本語になるだけです。
コードをコピーする
画面右上にコードがあります。
コードをコピーしてください。
コードを整理すると、次のようになっています。
■取得したコード
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指定を変更します。
変更前：
変更後：
変更したコードは、次のようになります。
■カスタマイズコード
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'
オプション紹介
他にもオプションがありますので、参考までにご紹介します。
| 属性 | 説明 |
|---|---|
| data-text | タイトルやツイート内容を指定できます。 |
| data-via | ユーザーを指定できます。 「@」は不要です。 |
| data-lang | 言語指定です。 「ja：日本語」「en：英語」などが指定可能です。 |
| data-size | ボタンサイズの指定です。 大きくしたいなら「large」を指定します。 |
| data-related | 推奨を指定する。 |
| data-hashtags | ハッシュタグの指定です。 |
| data-dnt | オプトアウト指定です。 「true」「false」が指定可能です。 |
指定例は、次の通りです。
href="https://twitter.com/share"
class="twitter-share-button"
data-text="タイトル"
data-via="ArdorOnline"
data-lang="ja"
data-size="large"
data-related="ArdorOnline"
data-hashtags="Asterlist"
data-dnt="true"
>ツイート</a>
最後に
いかがでしたでしょうか？
Twitterボタンを設置できましたか？
設置できた方は、是非ツイートしてください！
この記事で設置できれば幸いです。
最後まで読んで頂きありがとうございます。
0 件のコメント:
コメントを投稿