AddThisでBloggerにシェアボタンを追加してカスタマイズする方法
はじめに
単にブログを書くだけでは不十分になり、コンテンツが主要なソーシャルネットワークで簡単に共有できることが重要です。Bloggerは最近「共有ボタン」オプションを追加しました。Bloggerのダッシュボードから「デザイン」を選び、「記事」ボックスの下にある「編集」を開くとポップアップが表示されます。このポップアップ内の「共有ボタンを表示」を有効にし、ポップアップ内の「保存」とメイン画面の「保存」をクリックしてください。
投稿の横に共有ボタンが表示されます。
ただし、Blogger標準の共有ボタンは表示するSNSの選択やFacebookの「Like」／Twitterの「Tweet」を個別に追加する機能が不足しています。そこでAddThisを使って、FacebookやTwitterを含む各種シェアボタンをブログに追加・カスタマイズする手順を説明します。
AddThisのセットアップ
シェアボタンを追加する方法はいくつかあります。公式のFacebookやTwitterから直接取得する方法もありますが、私はAddThisを推奨します。設定が簡単で高い柔軟性があるためです。
- AddThisにアカウント登録します。
- メインページで「Get AddThis」を選び、ボタンのカスタマイズを開始します。
画面に表示されるHTMLコードをサイトに追加すると、プレビューと同様のデザインでボタンが表示されます。さらに細かく調整したい場合は「Customize」を選んでください。
「Customize」画面では、どのプラットフォーム用にするか、ボタンのスタイルを選べます。Platform（プラットフォーム）で「Website」を選ぶと、共有ボタンのフルHTMLコードが表示され、後で手動で編集できます。見た目に最も近いスタイルを選び、「Grab It」でコードをコピーします。
次に、このコードをBloggerに貼り付けます。Bloggerダッシュボードで「デザイン」→「HTMLを編集」を選ぶと、ブログ全体のHTMLが表示されます。「ウィジェットテンプレートを展開」(Expand Widget Templates) を必ず有効にしてください。
共有ボタンを表示したい位置に応じて、AddThisのHTMLを挿入します。私は記事本文の直後に表示するのが好きなので、記事本文を出力するタグの直下にAddThisコードを配置します。
貼り付け後に「テンプレートを保存」してブログを表示すると、ボタンが反映されます。
AddThisの共有ボタンをカスタマイズ
AddThisはBlogger標準のボタンより細かく設定できます。基本的にはAddThisが生成するHTMLコードを編集していきます。
デフォルトのコードは次のように提示されます（AddThis管理画面から取得したコードをそのまま貼り付ける想定です）：
一般的な機能
コード中の最初の部分はボタンの一般機能を制御します。このタグに以下のような属性を追加することをおすすめします（ここでは例示的に説明します）。
コード内の expr:addthis:title=’data:post.title’ 部分は、共有時に自動的に記事タイトルを使うための設定です。Twitterで共有すると、ツイート本文に現在の記事タイトルが組み込まれます。同様に expr:addthis:url=’data:post.url’ は現在の投稿の恒久的なURLを共有対象に設定します。
たとえばTwitterで共有すると、ツイートは次のようなフォーマットになります。
Make Tech Easier http://t.co/nCLRCEE via @AddThis
最初に記事タイトル、次にURL、最後に元ツイートしたアカウントが表示されます。
追加ボタン
次の部分は実際に表示する共有ボタンの種類を指定する箇所です。AddThisでは多くのサービスが用意されており、必要に応じて追加をリクエストできます。特定のボタンを表示したい場合は、該当するサービス名に合わせてタグを変更します。例えば：
a class='addthis_button_tweet' tw:via='abhiroopbasuu'/> この例はTweetボタンを表示し、tw:via=’abhiroopbasuu’ の部分でユーザー名を指定しています。これにより誰かがそのボタンで投稿したときにあなたのTwitterユーザー名が付加されます。
最終コードの例
私が使っているAddThisコード（上記設定を取り入れた簡易版）は次のようになっています。
ブログ上では次のように表示されます：
カスタマイズのヒントと運用上の注意
- モバイル表示を確認する：ボタン配置によってはスマホで重なったり縦長になったりします。レスポンシブであるか必ず確認してください。
- 表示するSNSはターゲットに合わせる：読者層がTwitter中心ならTweetボタン、ビジネス層ならLinkedInを優先するなど。
- 追跡と分析：AddThisは共有の統計を提供します。どのボタンからの流入が多いかを定期的に確認しましょう。
- 読み込みパフォーマンス：外部スクリプトを追加するとページ速度に影響が出る場合があります。必要最小限のスクリプトだけにする、非同期読み込みを検討するなどの対策を取ってください。
トラブルシューティング
- 反映されない場合：テンプレート保存後にキャッシュをクリアして再読み込みしてください。
- ボタンが表示崩れする場合：使用しているテーマのCSSと競合している可能性があります。AddThisのクラス名に対して上書きCSSを追加して調整してください。
- 共有時のタイトルやURLが間違う場合：expr:addthis:title / expr:addthis:url の設定が正しくテンプレート内の変数を参照しているか確認します。
便利資料とチェックリスト
導入手順（ミニ手順）
- AddThisでアカウント作成
- ボタンスタイルを選択し、PlatformをWebsiteに設定
- 生成されたコードをコピー
- Bloggerのデザイン→HTMLを編集→ウィジェットテンプレート展開
- 表示したい位置にコードを貼り付け、テンプレートを保存
- PC/モバイルで表示確認、必要ならCSSで調整
役割別チェックリスト
- 開発者：非同期読み込み、CSS競合チェック、アクセシビリティ（aria属性）を確認
- 編集者：表示順、ボタンの文言、ソーシャル用メタタグ（OGP/Twitter Card）を確認
- マーケター：分析連携、via指定、UTMの挿入方針を決定
テストケース / 受け入れ基準
- ページ読み込み時にコンソールエラーが出ないこと
- PC・スマホ・タブレットでレイアウトが崩れないこと
- シェア時にタイトルとURLが正しく反映されること
- Twitterでの共有にviaが反映されること（設定した場合）
よくある失敗例（適用外ケース）
- AMPページ：AddThisの通常スクリプトはAMPでそのまま動作しないため、AMP対応が必要です。
- 厳格なプライバシー要件（GDPR準拠）を満たす必要がある場合：外部サービスの利用に制約があるため、ホスト型のソリューションや同意取得の実装が必要です。
意思決定フロー（配置を決める簡易フローチャート）
flowchart TD
A[共有の目的は何か？] --> B{即時拡散が目的か}
B -- はい --> C[記事本文直下に表示]
B -- いいえ --> D{ブランド露出が目的か}
D -- はい --> E[ヘッダーまたはサイドバーに表示]
D -- いいえ --> F[フローティングボタンを検討]まとめ
AddThisを使えば、Blogger標準の共有機能よりもはるかに柔軟なシェアボタンの導入とカスタマイズが可能です。導入は比較的簡単で、表示位置や表示するSNS、via指定などを調整してサイトの拡散力を高められます。導入後はモバイル表示、ページ速度、プライバシーの観点から定期的にチェックしてください。
重要: AddThisなどの外部サービスを利用する際は、サイトのプライバシーポリシーにその旨を明記し、必要に応じて利用者の同意を取得してください。
