Broach（ぷららブログ）にTwitterボタンを追加する方法

公開日：2012/09/08 最終更新日：2014/09/16

すいません m(_ _)m、本記事はブログ引越時に書式が崩れました。順次修正中です。

ℹ️本記事にはPRが含まれています。

当ブログは、PlalaのBroachというブログシステムを使っています。何かとカスタマイズ情報が少ないのですが、友人がヒントをくれたので、Twitter（ツイート）ボタンを設置してみました。やり方は案外簡単だったので、解説します。

細かい手順を書こうと思ったのですが、新人歓迎会で酔っぱらっていまして、うー、いつものような筆の進みというか、キーボードの進みがでてきません…す、すいません。そんなわけで、ちょっとポイント説明になってしまうのですが、大事なところだけは書いておきます。

■Twittterボタンコードの入手

Twitterボタン（ツイートボタン）のコードは、Twitterのホームページから入手します。いろいろカスタマイズできますが、とりあえず、デフォルトで（言語だけ「日本語」にしてみましたが、何か変化があるのかな？）使ってみました。本ブログでは、「ボタンを選択」で「リンクを共有する」を選択しています。

Twitter / Twitterボタン

設定が完了すると、「コードのプレビューを見る」というところの下にコードが表示されますので、これをコピーします。今回取得したコードは、以下のようなものです。生成コードをサンプルとして掲載していますが、変更されている可能性がありますので、必ず、Twitterのホームページからの取得をお願いします。

<a href=”https://twitter.com/share” class=”twitter-share-button”>Tweet</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>

■Broachテンプレートへの挿入

これを、ブログテンプレートの「MainIndex」に挿入します。本ブログでは、各エントリの一番下につけていますが、挿入場所については、以下のエントリを参照してください。