#share buttons

私の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 &lt;(･｀彡　)з

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ブログと同期されるようになりました。

夜遅くまで悪戦苦闘しましたが、

無事に共有ボタンを導入出来て良かったです。

How To Install AddThis On Tumblr dated on 17 SEP 2019 that is very clear as I notice them.

Google told me to put this blog on a diet

The screen real estate around these words should look a little neater now–not much thanks to my own editing instincts. Instead, I needed a scolding from Google.

That came from its PageSpeed Insights tool, a page you can use to check the performance of your own site or any other. It’s been around for years, but I didn’t think to use it until after I finally connected this site to Google’s Search…

Clever And Creative Hints For Social Media Marketing

By now, you are probably already aware of the fact that you can contact people, worldwide, through social media. On the other hand, you might be aware that these sites you already use in personal life can also help your business and professional life, too. Here are some great social media marketing tips that will help you expand your business.

If you have included Twitter in your social media…

Using Social Media As Part Of Your Marketing Strategy

Finding ways to engage customers is something that all businesses must think about. There are many ways to connect with people, and they have their own challenges. Social media is the perfect way for a dinosaur company to reinvent itself by marketing to millions of people at once via social media platforms. The article below gives you social media guidance to help you do just that.

If you’re…