BloggerにGoogle PlusとPinterestのオリジナルシェアボタンを設置する方法
Bloggerに自作ののGoogle PlusとPinterestの共有ボタンを設置する方法を考えました
Bloggerのテンプレートが刷新され、シェアボタンが標準で搭載されなくなりました。共有ボタンはあったほうがいいと思いましたので新規にボタンを作り直しました。前回までは主要なtwitterとFacebook、FeedlyとPocketのシェアボタンを作成しました。今回はGoogle PlusとPinterestの割と人気のある共有ボタンのリンクのコードを作りたいと思います。目次
G+のオリジナル共有ボタン
まずは公式サイトに行きG+ボタンの設置ガイドを閲覧します。ただ単にボタンを置きたいというだけの人は…
これだけでいいみたいです。
ほかに「+1」を付けたい場合は…
<g:plusone size="tall"></g:plusone>
とtallという値をさきほどのタグの中に追加します。
それじゃ他のシェアボタンとデザインのバランスが取れませんのでオリジナルボタンが必用です。
このデベロッパー向けのページを見ても理解できませんので、やっぱり自分のブログのBloggerテンプレートから考えたいと思います。
Bloggerのリンクを見てみると…
https://plus.google.com/share?app=110&url=ブログのURL
となっていました。
単純にブログのURLにタグを挿入すればいいだけの話なのか？ちょっと簡単すぎるかな？と疑ってしまいました。app=110というところがそのまんまで大丈夫か怪しげですので特にいらないっぽいので消しておきましょうか。
Bloggerに合わせたGoogle Plusのオリジナルボタンのカスタマイズタグは次のようにできました。
<a expr:href='"https://plus.google.com/share?&url=" + data:post.url'>Google+</a>
これでCSSでデザインを定義すればオリジナルのG+共有ボタンの完成です。ポイントは「"」を特殊文字に変換して「"」として書くことです。
Pinterestのオリジナル共有ボタンを作成
次はいよいよ2016年あたりに大流行したPinterestというウェブ上の写真の共有サイトのボタンを作ります。私はこのPinterestというサービスは利用していませんが、女性や仕事でネット上の画像のスクラップが必要な人を中心に爆発的に流行しBloggerの標準のテンプレートにも共有ボタンがありましたので、オリジナルのボタンを作ってみようと思いました。おそらくPinterestのシェアボタンのリンクの作成方法はとても簡単であると思います。
ではさっそくPinterestの公式サイトへ行き仕様を確認します。サイト内検索をしないとこのページは出てきませんでした。ちょっと不親切かも。内容を読んでみましたが、やっぱり不親切で単なるJavaScriptによる既成ボタンの表示方法しか書いてありませんでした。
意味の通らない日本語のページをクリックしてみました。ほんと日本語としてこの表現は別の意味を持つのですが、もしやと思って内容を確認してみるとブログへの共有ボタンの作成方法が書かれていました。…と思ったら重要なところが書かれてませんでした（爆）
どうやら<body>タグの中に<script async defer src="//assets.pinterest.com/js/pinit.js"></script>という一文を書いて、リンクには<a data-pin-do="buttonFollow" href="https://www.pinterest.com/pinterest/">Pinterest</a>これを書くだけで一応形にはなると思います。
しかしこれでは単に既成ボタンが出るだけで肝心のURLをピンポイントでピンすることはできませんので、いったんBloggerのテンプレートからソースを考えたいと思います。
<b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.PinterestMassagespan class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if>
Bloggerの標準でのPinterestのタグは上記のようになっています。
余計なタグを削っていきましょう。
余計なタグを削っていきましょう。
<a class='クラス名' expr:href='data:post.sharePostUrlまたはdata:post.url+ "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'>Pinterest</a>
正常に動作していることを確かめました。これでPinterestのボタンを自在にカスタマイズ可能な状態になりました。このコードをシェアボタンを表示させたい場所に記入し、CSSでボタンをデザインすればPinterestのオリジナル共有ボタンの完成です。
別の表示方法がありましたので紹介したいと思います。今回参考にしたサイトは次の通りです。
別の表示方法がありましたので紹介したいと思います。今回参考にしたサイトは次の通りです。
上記ページをもとにBlogger用に書き直してみました。
<a class='あなたの作成したクラス' expr:href='"http://www.pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank'>Pinterest</a>
動作を確かめて正常に動いていることを確かめたらCSSを編集してデザインして完成です。
ポイントは半角スペースと+でBloggerのデータタグを囲むことと、特殊文字の変換です。必用に応じて画像や説明タグを消したり変えたりしてみましょう。
これでPinterestの共有ボタンの作成ができました。
このカノニカルURLについてですがBloggerの場合は「.com」で表示されますので「.jp」がよい方はdata:post.sharePostUrlに置き換えてください。
残るははてなブックボタンのみとなりました。次回は「はてぶ」のオリジナルボタンを作ってボタンのスタイルシートでのデザインについても挑戦してみたいと思います。
ポイントは半角スペースと+でBloggerのデータタグを囲むことと、特殊文字の変換です。必用に応じて画像や説明タグを消したり変えたりしてみましょう。
これでPinterestの共有ボタンの作成ができました。
このカノニカルURLについてですがBloggerの場合は「.com」で表示されますので「.jp」がよい方はdata:post.sharePostUrlに置き換えてください。
注意点
2017年時点で上記のPinterestのリンクは動きはするももの、Pinterestの公式サイトではエラーを返しますので事実上使用不可になりました。Pinterestは公式サイトにPinするJavaScriptがありますのでそれを利用するか、もしくはBlogger備え付けのPinterestのコードを編集して作ったほうがよいでしょう。
残るははてなブックボタンのみとなりました。次回は「はてぶ」のオリジナルボタンを作ってボタンのスタイルシートでのデザインについても挑戦してみたいと思います。
