Bloggerでtwitter等のシェアボタンをオリジナル画像で作る方法とexpr:とか独自タグとか
twitterやFacebookの公式シェアボタンは少し小さいし統一感が無いのでオリジナルボタンでSNSのシェアボタンを作ろうと思い立ったのですが、個別記事のＵＲＬを取得するBlogger独自のカスタムコードの使い方やら、その記述方法やら謎なことが多すぎました。
一応画像のような感じで完成はしましたが、
また同じようにつまづくことのないようにメモを残しておきます。
オリジナル画像での個別記事のシェアボタンを作るタグ
まずは結論から。オリジナルのシェアボタンを作るタグです。
WebScripter.jp様のSNS投稿ボタンをオリジナル画像にするためのカスタマイズを元に、twitterとFacebookのタグをBloggerっぽい記述にしたものになっております。
Facebookは未所持につき動作確認ができていないため、
多分大丈夫だとは思いますが念のため使うときはチェックをお願いします。
Facebook シェアボタン
(アカウント未所持につき動作チェックなし)
はてなブックマークボタン
MBA-HACK様のBloggerのカスタマイズまとめ記事の、
公式SNSボタンを使う方法の丸パクリに近いので、タグの取得はそちらからどうぞ。
やったことといえば、<a>タグの間の部分だけ切り取ったこと、
はてな公式素材集からアイコンをダウンロードしたことくらいです。
苦労したこと+解説
expr:hrefとBlogger独自のカスタムコードをURLに埋め込む
Blogger独自のカスタムコードを理解するのに時間がかかりました。
僕はまずブログのタイトルとか個別記事のＵＲＬを取得するコードを探しました。
こちらのコードもMBA-HACK様のBloggerのカスタマイズまとめ記事より頂戴しました。
| ブログのタイトル | data:title |
| 個別記事のタイトル | data:post.title |
| 個別記事のURL | data:post.url |
カスタムコードが分かったのは良いのですが、
これをURLの中で展開する方法がわけわかめさっぱりタラちゃんでした。
http://share=data:post.url&title=data:post.title
仮の話ですが、もしこのＵＲＬが、
青地の部分のURLとタイトルがシェアされるものであったとしても、
data:post.urlという意味のない文字列が共有されるだけです。
記事のＵＲＬとして認識してもらうためにはこれを正しい記述式に直す必要がありました。
そしてそれがめちゃめちゃ分かりにくくて泣きそうでした。
A Consuming Experience: New Blogger: expr - how to convert template tags to data tags for social bookmarking badges etc
やっとこ海外の記事を見つけ、全部英語で死にそうになりながらも頑張って読みました。
まず分かったことは、
URLの中でBloggerのカスタムコードを使いたい場合、
expr:という呪文を唱える必要があるということ。
どういうことかというと、
<a href=”http://share=data:post.url&title=data:post.title”>シェア</a>
というタグを書いたとしても、data:post.urlは個別記事のURLとして認識されません。
data:post.titleも個別記事のタイトルとしては認識されません。
このカスタムコードが指している対象を正しく認識させるためには、
<a expr:href=”http://share=data:post.url&title=data:post.title”>シェア</a>
という風に、hrefをexpr:で装飾しなければならないみたいです。
ちなみにこれはhref以外でもカスタムコードを使う場合は共通することみたいですね。
そしてさらに問題なのは、
expr:をつけた時には正しい記述式を使わなければならないということ。
expr:をつけた状態で記述方法を間違った場合、
ページ全体を巻き込んでレイアウトが崩壊します。
さっきのように、ただ単にexpr:をつけただけでは100%アウトです。
href=”http://share=【個別記事のURL】&title=【個別記事のタイトル】”
例として、これを正しい記述に変換してみます。
その時の変換のルールや流れはこんな感じになります。
- Blogger独自のコードを使いたい属性の前にexpr:をつけ、カスタムコードを挿入し、アドレス全体をシングルクオーテーションで囲む
expr:href=’http://share=data:post.url&title=data:post.title’ - Blogger独自のコードではない部分をダブルクオーテーションで囲む
expr:href=’”http://share=”data:post.url”&title=”data:post.title’ - Blogger独自タグを + で囲む。
+の前後には半角スペースを入れる。
ただし、最初と最後のBlogger独自タグについてはそのまま。
繋ぎの部分に+を挿入するイメージで。
expr:href=’”http://share=” + data:post.url + ”&title=” + data:post.title’ - &など、Bloggerに怒られるモノを変換する。
この場合は、&を&に書き換え。
expr:href=’”http://share=” + data:post.url + ”&title=” + data:post.title’
他のSNSについても、このルールに則ってURLを変換していけば、
Blogger用のシェアボタンを作ることが出来ます。
Blogger公式のシェアボタンからタグを借りる場合
ちなみに、こんなことをしなくてもBlogger用のオリジナル画像のシェアボタンを作る方法があります。それはBloggerの公式のシェアボタンからタグを拝借することです。
先ほど紹介したURLの変換よりずっと簡単で、僕が先にたどり着いたのはこちらの方法でした。
ただこの方法を使った場合、レイアウトのブログの投稿ガジェットの編集ボタンで、共有ボタンを表示するのチェックを入れている状態じゃないと動作しないという弱点があります。
share-button sbでテンプレートを検索すると、
Blogger公式のシェアボタンのHTMLがヒットします。
例えばtwitterの場合、
<b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if>
という部分を見つけられます。
ここからオリジナル画像でシェアボタンを作るのに必要ないものは取っ払って、
<a expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>【ここに画像など】</a>
という形にしてしまえば簡単に共有できます。
たださっきも言ったとおり共有ボタンを表示するにチェックを入れている必要があるので、人によってはそれが問題になるかもしれません。
