Blogger専用のAddToAnyで記事下に共有ボタンを一発挿入

ルーブル美術館のホームページで作品の右上に共有ボタンのアイコンが付いていて押してみたらオリジナルではなくてWebサービスのAddToAnyが使われていて驚いた。世界で最も有名な美術館かも知れないし、そんな大きなところで使われているWebサービスならば相当に信頼できそうだ。共有ボタンとしてはデザインも確かに素晴らしくて無料でカスタマイズも自由自在でアカウントの登録も必要ないので、便利そのものだし、正しく望み通りの印象を抱いた。Bloggerで使えるかどうかを試そうとすると最初から専用の方法が用意されていた。日本で無料ブログというと他のサービスが人気だけど、しかし海外ではBloggerが人気の無料ブログだから多くの人が直ぐに簡単に取り入れられるように考えられているわけだろう。AddToAnyのトップページの「Get the Share Buttons」からBloggerのアイコンで入って「Install Blogger Widget」から直ちにブログにログインしてガジェットで取り込む形になる。実行するとどうなるかで、共有ボタンの表示を確認すると記事下に一発挿入だったので、本当に有り難いし、僕としては心から納得できた。些細な日常の記事下に表示されたAddToAnyのBlogger専用の共有ボタン

ガジェットにソースコードを追加しただけで記事下にデザインが付けられるというのはBlogger専用のAddToAnyならではではないか。大抵は無理だし、HTMLまで書き換えなくては記事下にコンテンツを追加できないはずだから如何にもスムーズだ。見出しは設定するとガジェットのところに出て来る。共有ボタンはそこにはないので、ブログに見出しだけ残さないためにはレイアウトから消すという説明がある。ソースコードによってブログの記事下で共有ボタンは機能している。AddToAnyのBlogger専用でのデザイン変更そのままでも十分に美しいけれども海外製のためか、Bloggerのテンプレートの文章と同じで、若干、位置取りがモバイルで厳しい。記事に近寄り過ぎるのを引き離さざるを得なかった。ガジェットなので、モバイルで共有ボタンを表示するためにはAddToAnyの取り込みでの説明にもあるけど、HTMLで所定のガジェットを含んだソースコードに「mobile='yes'」の指定が予め必要とされる。注記：Bloggerの2017年に追加された公式テーマのContempoとSohoとEmporioとNotableではブログのソースコードが大幅に変更されてAddToAnyの記事下への一発挿入は無理みたいなので、テーマのHTML編集から共有ボタンを表示する位置に合わせて記載しなくてはならない。Blogger専用のAddToAnyは記事と同じところに出て来てそのままでは動かし難いので、レイアウトのソースコードを新たに領域のdivタグにクラスを付けて囲っておいてカスタマイズの「上級者向け」のCSSで変更するようにした。モバイルの「mobile」と追加したクラスから「margin-top」を指定して共有ボタンの上の外側の余白を増やして記事と引き離す。属性値は「2em」くらいで良い感じがした。AddToAnyの共有ボタンのカスタマイズは「Customize」によって自由自在なので、色や大きさや並び順など、様々に変えられて至れり尽くせりの使い勝手だろう。ブログのレイアウトからガジェットのソースコードを選んで変更すれば殆ど反映する。稀に中寄せの配置（Center-Align Buttons）とかCSSまで変更しなくてはならないデザインもある。AddToAnyの共有ボタンはどれを出すかBlogger専用のデフォルトでは四つの共有ボタンとメニューが表示されているけれども一つだけ手を加えてみた。はてなブックマークを出したいので、右から二番目の共有ボタンを取り替えた。元々はPinterestで、写真のためのソーシャルメディアで、海外ではそれだけ人気なのかも知れない。しかし日本でははてなブックマークにどれだけ入るかでサイトのアクセスは大きく左右されると思うし、是非とも欠かせない。AddToAnyの共有ボタンの対象はソースコードのリンクのaタグのサービスコードを書き換えれば良いだけなんだ。共有ボタンの「Customize」の「Priority」のService Codes, Links, Bookmarkletsに幾つも載っていて「hatena」がはてなブックマークに対応しているから使ってブログに表示するようにした。ウェブサイト向けの一般的なソースコードだと日本語が反映しない可能性があるので、ランクアート（閉鎖）でAddToAnyを載せると読み込まれるタイトルが乱れた、ソースコードに言語やURLを指定しないと不味いかも知れない。Blogger専用のAddToAnyだと大丈夫みたいだ、何もしなくても。共有ボタンを幾つかチェックしてみて読み込まれるブログの記事のタイトルも本文もURLも乱れてなかった。たぶん文字エンコーディングが「UTF-8」でないと駄目だと思うし、旧来のサイト作成、HTML5以前のマークアップだと日本語は「Shift_JIS」が使われていたりしてランクアートもそうなので、何もしないままでは厳しいわけだろう。BloggerのマークアップはデフォルトでHTML5だから文字エンコーディングは「UTF-8」になっていてサイトでの外国語の互換性も高まっている。BloggerのモバイルでGoogleの+1ボタン（サービス終了）を消したいAddToAnyを使うから元々の共有ボタンは要らないので、レイアウトから消すようにした。ところがモバイルではGoogleの+1ボタンだけが消されずに記事下に残ってしまって本当に参った。調べてモバイル表示で自動追加されているGoogle+バナーを消してみる方法を見付けたけれども、全然、できなくてもう無理ではないかとAddToAnyの共有ボタンこそ止めるしかない気持ちにまで追い詰められてしまった。テンプレートによっても微妙に違うみたいだけど、HTMLの一部を削除しなくてはならない、デフォルトのシンプルで、結果的には<div class='post-footer-line post-footer-line-2'></div>で囲まれた内側の「mobile-share-button」というIDなどを含んだソースコードの全体がモバイルでGoogleの+1ボタンを出していた。気付くまでには見当たらなくて大変だった、とにかく。BloggerのHTML編集は画面が折り畳まれているせいだ。急いで探すと細かいところが飛んでしまうので、一行ずつ開くならば左側の行数を押さなくては確実ではないだろう。シンプルテンプレートで1380行辺りにGoogleの+1ボタンのソースコードが出て来た。やっと納得できるデザインが掴めた。AddToAnyの共有ボタンを取り入れながらブログをやって行くという。アイコンの描画も精細で、SVGファイルのベクター画像らしくてサイズが小さくても引かれた線は乱れない、とても鮮やかに表示されるし、記事下で訪問者の目を引くような形で使えるから嬉しい。

コメント