BloggerのSVGアイコンの共有ボタンにはてなブックマークなどのデフォルト以外の共有先を追加する方法

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableでSVGアイコンの共有／シェアボタンが搭載されるようになった。記事やスニペットの上段や下段にスイッチが付いていて押すと「リンクを取得」と「Facebook」と「Twitter」と「Pinterest」と「メール」の五種類がデフォルトで表示されて使用可能になっている。世の中でブログの共有先は他にも数多くあって日本だと僕もやっているけれどもはてなブックマークが人気のソーシャルメディアの一つで、検索エンジンでのサイト評価を高めるSEO対策を含めてブログのアクセスアップに大きく役立つと考えられるから共有ボタンになるべく入れておきたい。以前はブログのテンプレートにBloggerのシンプルテーマを使って共有ボタンは外部のWebサービスの共有ボタンのAddToAnyが便利で、デザインもSVGアイコンだから小さいのに画質が落ちないのが美しいと気に入って取り入れていた。Bloggerで新たに追加されたSVGアイコンの共有ボタンと比べて全ての共有先を含めた「＋」が使用可能な機能面はAddToAnyが、依然、上回っている。しかし専ら人気のソーシャルメディアから共有先を幾つか選んで付けるだけならばもう気持ち良くできる状況に変わったので、内部のシステムを使うのがエラーの心配は減らせるし、動作上もスムーズで良いと思う。BloggerのSVGアイコンの共有ボタンのカスタマイズの二つの手順

BloggerのContempoテーマの共有ボタンにはてなブックマークを追加して開いている状態

共有先のデータとアイコンを用意する

共有ボタンのソースコードを編集する

Bloggerのデフォルト以外の共有先を使用可能にするには機能もデザインも用意されてないので、自分で必要な共有ボタンのデータとアイコンを事前に用意しなくてはならない。その上で、テーマのHTML編集かバックアップ／復元からソースコードを編集してテンプレートに組み込みながらブログで使用可能に持って行く。カスタマイズ①共有先のデータとアイコンを用意する共有先のデータはブログの共有ボタンから投稿画面を開いたり、適切なページへ移動するために、そしてアイコンを共有ボタンを表示するために必要だ。はてなブックマークの共通ボタンを追加する場合

共有先のデータ

https://b.hatena.ne.jp/entry/共有元のURL

共有先のアイコン

はてなブックマークのSVGファイルのロゴ

調べてSNSのシェアボタンの設置方法まとめ (サンプルコード付き)によるとはてなブックマークの共有先のデータは「https://b.hatena.ne.jp/entry/共有元のURL」となっている。共有先のアイコンははてなブックマークが公式の素材集でSVGファイルのロゴを出しているので、使い易い。企業のロゴには著作権がないけれども自分が関係者と偽るとか別のものに当て嵌めるなんて商標権に違反しないかぎり、ブログの共有ボタンに使って大丈夫だ。画像のSVGファイルはBloggerではアップロードできないけれどもインラインSVGとしてブログに表示できるし、デフォルトの五つの共有ボタンのSVGアイコンもそのようになっている。デバイスにダウンロードしたらアルバムではなくてHTMLエディターなどのアプリで開くとSVGファイルの画像データが得られる。はてなブックマークのロゴのSVGデータのカスタマイズオリジナルのはてなブックマークのロゴのSVGデータ<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'> <rect width='500' height='500' rx='101.9' ry='101.9' fill='00a4de'/> <g fill='#fff'> <path d='M278.2,258.1q-13.6-15.2-37.8-17c14.4-3.9,24.8-9.6,31.4-17.3s9.8-17.8,9.8-30.7A55,55,0,0,0,275,166a48.8,48.8,0,0,0-19.2-18.6c-7.3-4-16-6.9-26.2-8.6s-28.1-2.4-53.7-2.4H113.6V363.6h64.2q38.7,0,55.8-2.6c11.4-1.8,20.9-4.8,28.6-8.9a52.5,52.5,0,0,0,21.9-21.4c5.1-9.2,7.7-19.9,7.7-32.1C291.8,281.7,287.3,268.2,278.2,258.1Zm-107-71.4h13.3q23.1,0,31,5.2c5.3,3.5,7.9,9.5,7.9,18s-2.9,14-8.5,17.4-16.1,5-31.4,5H171.2V186.7Zm52.8,130.3c-6.1,3.7-16.5,5.5-31.1,5.5H171.2V273h22.6c15,0,25.4,1.9,30.9,5.7s8.4,10.4,8.4,20S230.1,313.4,223.9,317.1Z'/> <path d='M357.6,306.1a28.8,28.8,0,1,0,28.8,28.8A28.8,28.8,0,0,0,357.6,306.1Z'/> <rect height='151.52' width='50' x='332.6' y='136.4'/> </g> </svg>デフォルトのアイコンと並ぶので、新しく追加したアイコンだけバランスが崩れると辛い。Bloggerのソーシャルメディアを含めた新テーマで使用可能なSVGアイコンはブログ毎のURLの末尾に「/responsive/sprite_v1_6.css.svg」を付けたアドレスにアップロードされていて調べる（svgタグにsymbolタグが使われていてページにアクセスしても画像は表示されず、ソースコードからSVGデータを確認できるだけだ）と24px四方の中に20px四方で描画されて半径が2px：一辺に対して10%の角丸を付けたデザインが取られている。新しく追加するアイコンのバランスは全体の24pxにそこから20pxを引いた4pxの半分の2px：一辺に対して10%の余白を上下左右に持たなくてはならない。公式テーマのSVGアイコンのデザインを調べると大きさは「.svg-icon-24」のclassのCSSで横幅と縦幅が24pxで指定されるので、特に変更する必要はない。はてなブックマークのSVGアイコンは余白がないのがBloggerのSVGアイコンと違うので、同じ割合の余白を上下左右に付けると同じバランスで表示されるようになる。インラインsvgの方法で調整する。アイコン自体の角が直角なので、10%の角丸を付ける。そして元々の大きさが500px四方だから上下左右の余白を10%に合わせて追加する。上下左右に50pxずつ広げなくてはならないので、全体を縦と横の二つに分けて100pxずつさらに大きな四角：600px四方で囲って描画するとアイコン自体とその周りに10%の余白を持った状態に仕上がる。<svg viewBox='-50 -50 600 600' xmlns='http://www.w3.org/2000/svg'> <rect height='600' width='600' x='-50' y='-50' fill='none'/> <rect height='500' width='500' rx='10%' ry='10%'/> 中略 </svg>はてなブックマークのオリジナルのSVGデータのviewBoxの縦横の長さを「600 600」に広げて縦横の最小点（描画する座標の開始点に等しい）を「-50 -50」と追加する余白の分だけ左上へずらしてアイコン自体が新しく描画する大きな四角の真ん中に来るようにする。そして実際にrectタグでviewBoxに合わせて600px四方の四角を描画する。背景色は不要なので、fill属性に無色の「none」を指定する。インラインSVGの無色の値は他に透明の「transparent」でも見た目は同じで、クリック／タップできるのが「none」と違う。BloggerのデフォルトのSVGアイコンだと無色に「none」が使われているので、合わせている。アイコン自体のrectタグの500px四方のソースコードは角丸の値を10%に変更した。もう一つ、色付けのfill属性を外してもいる。テンプレートに取り入れる際にデフォルトの共有ボタンと同じclassを付けて同じデザインのCSSがかかるようにするためだ。色以外に大きさや位置取りやクリックのエフェクトなどが揃うようになる。Blogger用のはてなブックマークのSVGアイコンを含むソースコード<b:includable id='hatenaIcon'> <svg expr:class='"svg-icon-24 " + data:iconClass' viewBox='-50 -50 600 600' xmlns='http://www.w3.org/2000/svg'> <rect height='600' width='600' x='-50' y='-50' fill='none'/> <rect height='500' width='500' rx='10%' ry='10%'/> <g fill='#fff'> <path d='M278.2,258.1q-13.6-15.2-37.8-17c14.4-3.9,24.8-9.6,31.4-17.3s9.8-17.8,9.8-30.7A55,55,0,0,0,275,166a48.8,48.8,0,0,0-19.2-18.6c-7.3-4-16-6.9-26.2-8.6s-28.1-2.4-53.7-2.4H113.6V363.6h64.2q38.7,0,55.8-2.6c11.4-1.8,20.9-4.8,28.6-8.9a52.5,52.5,0,0,0,21.9-21.4c5.1-9.2,7.7-19.9,7.7-32.1C291.8,281.7,287.3,268.2,278.2,258.1Zm-107-71.4h13.3q23.1,0,31,5.2c5.3,3.5,7.9,9.5,7.9,18s-2.9,14-8.5,17.4-16.1,5-31.4,5H171.2V186.7Zm52.8,130.3c-6.1,3.7-16.5,5.5-31.1,5.5H171.2V273h22.6c15,0,25.4,1.9,30.9,5.7s8.4,10.4,8.4,20S230.1,313.4,223.9,317.1Z'/> <path d='M357.6,306.1a28.8,28.8,0,1,0,28.8,28.8A28.8,28.8,0,0,0,357.6,306.1Z'/> <rect height='151.52' width='50' x='332.6' y='136.4'/> </g> </svg> </b:includable>BloggerのSVGアイコンの共有ボタンをブログに表示するべく、マークアップへ同名のnameのincludeタグで呼び出すためにincludableタグに「hatenaIcon」のidを付けてはてなブックマークのカスタマイズしたアイコンのインラインSVGのソースコードを囲っている。注記：追加する共有ボタンのSVGアイコンのincludableタグのidは何でも良いわけではない。共有先のデータを設定するソースコードに影響するので、必ず「Icon」の文字列を後に付ける。前に付ける「hatena」のところは共有ボタンのリストを表示するソースコードの個別のトークンの「key」と同じでなくては反映しないので、両方を合わせて付ける。共有先のソーシャルメディアの名前の英数字にしておくと分かり易いし、他の共有ボタンの場合と重複しなくて良いと思う。デフォルトのSVGアイコンのデザインを引き継ぐためにはてなブックマークのsvgタグに特定のclassを追加している。gタグのfill属性がアイコン自体の文字色になっている。デフォルトは「#fff」の白で、変更する場合は他の色コードに書き換える。他のソーシャルメディアのSVGアイコンでもBloggerの公式テーマで使用する基本のマークアップは同じだ。デザインはアイコン自体に10%の角丸と上下左右の余白を付けて共有ボタンで呼び出されるincludableタグに一意のidを付けておく。共有ボタンの共有先のデータとアイコンが手元に揃ったらブログに新しく追加するカスタマイズは次の手順に進む。カスタマイズ②共有ボタンのソースコードを編集するおそよ三つのカスタマイズによってデフォルト以外の共有ボタンがブログに新しく設置される。

共有先のSVGアイコンを格納する

共有ボタンのリストに表示する

共有先のデータを設定する

作業の順番は特に関係なくて追加する共有ボタンに必要な共有先のデータとアイコンが取得されるかぎりは三つのカスタマイズを着実に完遂する。共有先のSVGアイコンを格納するBloggerのContempoとSohoとEmporioとNotableの共有ボタンはインデックスページの記事の抜粋のスニペットと記事や追加の個別ページに表示される。デフォルトの共有ボタンのSVGアイコンはサーバーの専用ページに格納されていてソースコードから取り出される。インラインSVGのsymbolタグとuseタグの組み合わせで、同じ画像を同じページで幾つも表示するのに便利なマークアップだ。はてなブックマークなどのデフォルト以外の共有ボタンを追加する場合、所定のSVGアイコンはどのページからでも直ぐに取り出して使えるようにブログのソースコードのhead内のdefaultmarkups内のdefaultmarkupのCommonのtypeの中に記載しておくと良いと思う。<head> 中略 <b:defaultmarkups> <b:defaultmarkup type='Common'> 中略共有ボタンのSVGアイコンのincludableタグ（はてなブックマークの場合のソースコード） </b:defaultmarkup> 中略 </b:defaultmarkups> 中略 </head>Bloggerのdefaultmarkupタグはincludableタグを格納して様々なページにマークアップを送り届ける。Commonのtyseは全ページに共通のソースコードをどのページからでも取り出せるようにしてくれる。ブログのウィジェットのソースコードのwidget内で実際に共有ボタンを表示するincludeタグのnameに対応するidのincludableタグで記載しておく。サンプルははてなブックマークで「hatenaIcon」（はてなアイコン）とidを付けたincludableタグにSVGアイコンのためのインラインSVGのソースコードを入れている。共有ボタンのリストに表示するデフォルトの共有ボタンの並び替えを含めて必要な共有先を改めて選び直す。リストの枠組みのソースコード<b:includable id='sharingButtonsMenu'> <b:with value='[共有ボタンの個別のソースコード①, 共有ボタンの個別のソースコード②, 共有ボタンの個別のソースコード③, 共有ボタンの個別のソースコード④, 共有ボタンの個別のソースコード⑤, 共有ボタンの個別のソースコード⑥]' var='platforms'> <b:include name='super.sharingButtonsMenu'/> </b:with> </b:includable>withタグのvalueに共有ボタンの個別のトークンを入力すると順番通りに表示される。それぞれが複数の項目を持つので、半角の波括弧（{}）に入れて使う。複数の共有ボタンを指定する場合は個別のトークンを一つずつ半角コンマ（,）で区切って記載する。ブログに設置できるBloggerの共有ボタンの数は何個か。無制限ではなくてソースコードのオブジェクトとアイテム／共有ボタンと必要な項目の合計が三十九までに限定されるらしい。共有ボタンを一つ追加して概して五つずつ引かれるとすると三十九を超えない三十五の七個までになる。例外的にリンクを取得の共有ボタンはアイテム／項目が一つ少ないので、一つ使うと八個の共有ボタンを出せるように変わる。三十九の限界を超えるとエラーでウィジェットが表示されなくなるから注意しなくてはならない。デフォルトの五つの共有ボタンの個別のトークン

リンクを取得

{name: "リンクを取得", key: "link", shareMessage: "リンクを取得"}

Facebook

{name: "Facebook", key: "facebook", shareMessage: "Facebook で共有", target: "facebook"}

Twitter

{name: "Twitter", key: "twitter", shareMessage: "Twitter で共有", target: "twitter"}

{name: "Pinterest", key: "pinterest", shareMessage: "Pinterest で共有", target: "pinterest"}

メール

{name: "メール", key: "email", shareMessage: "メール", target: "email"}

※リンクを取得のトークンは「target」を含まない。項目が四つあって「name」はSVGアイコンの横に表示される名称、「key」は共有先のWebサービスの種別、「shareMessage」はブログの共有時の文章（検索エンジンなどの機械向けのマークアップとしてブラウザなどの人間向けには表示されないかも知れない）、「target」は共有ボタンの対象のWebサービスになる。変更して構わないのが「name」と「shareMessage」で、残りの「key」と「target」の二つは変更すると共有ボタンの設定が保てなくなる。前者は共有ボタンにWebサービスを選択してブログに表示するため、後者はブログで実際に共有ボタンが使われて特定のWebサービスを呼び出すための文字列だ。一意で決められていて敢えて変更する必要はない。はてなブックマークの共有ボタンの個別のトークン

はてなブックマーク

{name: "はてなブックマーク", key: "hatena", shareMessage: "はてなブックマークで共有", target: "hatena"}

共有ボタンを追加するためには四つの項目を全て任意で決める。およそ「name」と「shareMessage」はデザイン、「key」と「target」は機能に影響すると捉えて注意しながらそれぞれに文字列を入力する。取り分け「key」は格納したSVGアイコンのソースコードを囲ったincludableタグのidの前の部分と同じでなくては共有ボタンが表示されなくなるから注意を要する。共有ボタンのリストの枠組みに共有ボタンの個別のトークンを入れて完成したソースコードのsharingButtonsMenuのidのincludableタグはブログの共有ボタンを使いたいwidget内に記載する。デフォルトだと注目とブログと人気の投稿のウィジェットに付いていてHTML編集ではFeaturedPostとBlogとPopularPostsのtypeのwidgetタグに対応している。Bloggerのincludableタグを何等かのwidget内に記載する場合は内側のwidget-settingsタグと他のincludableタグの中に入らないようにしなくてはならない。同名のnameのincludeタグに呼び出されるソースコードなので、二つのパターンのエラーを避けるかぎり、どこに記載しても構わない。共有先のデータを設定する共有ボタンが押されたらブログの当該URLを選択済みの共有先へ結び付けて画面を開くようにする。はてなブックマークを設定するソースコード<b:includable id='sharingButton'> <b:if cond='data:platform.key == "hatena"'> <span expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:data-href='"https://b.hatena.ne.jp/entry/" + data:post.url.canonical' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'><b:include name='sharingPlatformIcon'/><span class='platform-sharing-text'><data:platform.name/></span></span> <b:else/> <b:include name='super.sharingButton'/> </b:if> </b:includable>デフォルトの五つの共有ボタンは<b:include name='super.sharingButton'/>でサーバーの予め設定済みの内容が出力される。それをBloggerの条件分岐のifタグとelseタグで後半に置きながら前半で新しく追加する共有ボタンのカスタマイズを行う。振り分けの条件に「data:platform.key」の「hatena」を使って共有ボタンのリストの個別のトークンを設定する。Ifからelseまでの内容は共有先のデータを出力する「expr:data-href」の内容の「"https://b.hatena.ne.jp/entry/" + data:post.url.canonical」が特定のカスタマイズの対象になる。他は雛型としてはてなブックマークなどのデフォルト以外の共有ボタンを設定する際に全てに共用できる部分だ。サンプルははてなブックマークの投稿用のURLで、前半がはてなブックマークからの共有のアドレスで、後半が共有元のURLを追加するようになっている。Bloggerの記事毎のURLを出力する独自タグの「data:post.url.canonical」を使って「+」で「"https://b.hatena.ne.jp/entry/"」に組み合わせて「expr:data-href」から実際にソースコードに書き込むようにプログラムしている。はてなブックマーク以外の共有先を追加する場合には「key」の条件分岐と「expr:data-href」の出力される共有先のデータの二つの値が異なる。前者は一つの文字列という共有ボタンのリストの作成で個別のトークンに入れた「key」だけど、しかし後者は共有先の投稿用と記事毎のURLを組み合わせるプログラムが欠かせない。基本的に固定の文字列は半角の二重引用符（""）で囲って繋ぐには「+」を使って記事毎のURLは「data:post.url.canonical」を入力して記載する方法が挙げられる。二つの共有ボタンを設定する場合の振り分けのサンプル複数の共有ボタンを設定するにはマークアップを途中で振り分ける独自タグのelseifを新しく使う。僅かだけれども作業を付け加えるだけではなくて一つの場合とは別の仕方で記載しなくてはならない。<b:includable id='sharingButton'> <b:if cond='data:platform.key == "一つ目の共有ボタンのkey"'> <span expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:data-href='一つ目の共有ボタン記事のURLを付けた共有先のデータ' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'><>b:include name='sharingPlatformIcon'/><span class='platform-sharing-text'><data:platform.name/></span></span> <b:elseif cond='data:platform.key == "二つ目の共有ボタンのkey"'/> <span expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:data-href='一つ目の共有ボタン記事のURLを付けた共有先のデータ' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'><b:include name='sharingPlatformIcon'/><span class='platform-sharing-text'><data:platform.name/></span></span> <b:else/> <b:include name='super.sharingButton'/> </b:if> </b:includable>一つ目の共有ボタンの設定のソースコードを振り分けるifタグとデフォルトの共有ボタンのためのelseタグの間に二つ目の共有ボタンの設定のソースコードを途中から振り分けるelseifタグを挿入する。二つ目の共有ボタンの条件を付けるcond属性の書き方は一つ目の共有ボタンと変わらず、共有ボタンのリストで指定する「key」の値を入力するための「data:platform.key」を指定する。三つ以上の共有ボタンを設定する場合には二つ目の共有ボタンの設定のソースコードに使った途中から振り分けるelseifタグを挿入して一つ目の共有ボタンを含めてデフォルト以外の共有ボタンの全てに共通する共有先のデータを含んだソースコードを記載する。共有先のデータを入力して設定するのを完了したソースコードのsharingButtonsMenuのidのincludableタグはブログの共有ボタンを使いたいwidget内に記載する。デフォルトだと注目とブログと人気の投稿のウィジェットに付いていてHTML編集ではFeaturedPostとBlogとPopularPostsのtypeのwidgetタグに対応している。Bloggerのincludableタグを何等かのwidget内に記載する場合は内側のwidget-settingsタグと他のincludableタグの中に入らないようにしなくてはならない。同名のnameのincludeタグに呼び出されるソースコードなので、二つのパターンのエラーを避けるかぎり、どこに記載しても構わない。三つのカスタマイズが成功する作成したSVGアイコンがブログの共有ボタンのスイッチから表示されて押すと所定のソーシャルメディアの投稿画面へ移動するように機能する。

参考サイト

コメント