Tumblrブログに『ShareThis』のSNS共有ボタンを表示させる方法
私のTumblrブログ『柒寶庵 - QiBao's Wunderkammer』ではWEBブラウザ用のカスタムテーマ「Vision」を採用し、HTMLを色々弄ってカスタマイズしています。
Tumblrを扱うのは数年振りで、WEBデザイン方面は全くの初心者ですが、ネットの海に遺された先人たちの知恵を掻き集め、試行錯誤を重ねております。
さて、そんなこんなでHTML編集のプレビューを眺めて「シンプルなデザイン良し。手軽にYouTubeやTwitterのウィジェットも置けた。Googleアナリティクス用のタグも追加できたぞ!」と喜んでいたのですが……
「あれ? 共有ボタン(ソーシャルボタン)がない!」
と気づきました。
Tumblr内のブログだと個別記事に「共有」が付いていますが……
「Vison」テーマのWEBブラウザブログの個別記事には、共有ボタンが無く、「リブログ」と「スキ」しか付いていない。
PCブラウザで閲覧する非Tumblrユーザーにとって、Facebook/Twitter/LINE等の各種SNSに共有しにくい状態ですね。
「スマホブラウザの場合はブラウザのメニューから『共有』を使えるけど、画面上にSNS共有ボタンが表示されてた方が便利そうだよな。何か手軽な導入方法はないかなあ?」
と思って色々調べ、まずは以下のブログを参照して海外の『AddThis』というサービスを使ってみました。
メールアドレス、またはGoogle/Twitter/Facebookアカウントの連携でログイン可能です。
AddThisを使ってSNS共有ボタンを作る方法 | Stepping Stones
で、TumblrカスタムテーマのHTML(の</body>のすぐ上)にAddThisのコードを設置したのですが……
ブラウザの広告ブロック機能が有効だと、AddThisの共有ボタンが表示されませんでした。
で、広告ブロック機能を無効化して、AddThisの共有ボタンからTwitterで共有してみると、URLにトラッキング目的のハッシュタグが入りました。
トラッキングコードの挿入がデフォルトで有効になっているようなので、以下のサイトを参考に無効化。
AddThisを使ってHugoに共有ボタン(Share Button)を追加する | Komaki's blog <(・`彡 )з
Removing Hashtags, Anchors, and Tracking Codes from Your URLs - AddThis
とはいえ、常日頃から広告ブロック機能を使ってるユーザーが見れないヤツなら、AddThisの共有ボタンを使う意義は無い。無さすぎる。
という事で、タイトル通り、AddThisの対抗サービスらしい『ShareThis』を採用することに。
日本語での情報が殆どありませんでしたが、AddThisと同じノリで導入出来ました。
①ShareThisトップページの「シェアボタンから始める」をクリック
③画面下の「付箋シェアボタンのカスタマイズ」をクリックして、好きなように共有ボタンをカスタマイズし、「次のページ」をクリック
④ログインを促されるので、メールアドレス登録またはGoogle/Appleアカウント連携でログインする
⑤「HTML」タブを選択し、ヘッドコードをコピーして、TumblrカスタムテーマのHTMLの</head>の上に貼り付けて保存する。
(Tumblrの場合、「配置コード」のコピペは不要です)
これでShareThisの共有ボタンが表示されるようになりました。
その後、ShareThisにTumblrブログのURLを登録し、
ShareThisの共有ボタンの設定がTumblrブログと同期されるようになりました。