Blogger(blogspot)にTwitterとFacebookのSNS共有ボタンをオリジナルで表示する方法（自力で解決！）
BloggerにtwitterやFacebookなどSNS共有ボタンを表示する方法
これまでBloggerの旧テンプレートには以下のような小さなソーシャルブックマークボタンが標準で設置されていました。しかし今度の2017年の新テンプレートではソーシャルボタンはファーストビューから消えてしまいました。
Bloggerのソーシャルブックマークボタン（旧デザイン、右は筆者が付け足したもの）
旧デザインのソーシャルブックマーク（共有）ボタンは次の種類があります。
- メールでURLを送信して共有
- Bloggerでリンクして共有
- twitter共有
- facebookのいいね！
- PinterestのPinするボタン
- Google Plusの共有ボタン
この組み合わせにどんな意図があるのか不明ですが、これらのボタンは小さくて視認性が悪く、99.9%以上の確率で誰も共有してくれないことが欠点でした。
このようなSNSボタンは無駄ですのでデザインから排してしまったほうがよいと考えたのかわかりませんが2017年の新テンプレートではSNSボタンは見当たらなくなりましたので世間とのつながりを重要視する場合は追加してやる必要があります。
どのようにすればBloggerにSNS共有ボタンを表示できるのか、まずは私の旧ブログのテンプレートを解析して新たなソーシャルボタンとともに目立つようにデザインしてみたいと思います。
SNS(ex. Facebook)の仕様を確認する
まずはフェイスブック等のSNSのデベロッパー向けサイトに行き共有するための仕様を確認します。今回は例としてフェイスブックで試してみましょう。
Facebookのデベロッパーサイトに行くと自分のウェブページのURL入力欄があってコードを取得すると次のようになります。
Facebookのコードを見てみると「<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" ></div>」どうやらこの辺りを自分のページのURLに変更するだけでよいことがわかります。
Blogger Facebookのいいね！ボタンの基本仕様
ではBloggerの個別のSNS共有用ののURLをどのようにして表示させるかスクリプトを見ていきましょう。Bloggerテンプレートのhtml編集画面を見ると、個別のURLの書き方は次のようになっています。
expr:href='data:post.sharePostUrl + "&target=facebook"'
つまり、この文字列を応用してSNSボタンを作成すればよいのです。ちなみに筆者が自力で作成したFacebookの共有ボタンの全容は以下の通りになります。
<b:if cond='data:top.showFacebookButton'>
<a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
</b:if>
<a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
</b:if>
いいね！ボタンを押すと新しいウィンドウが表示されFacebookへのログイン画面が表示される仕組みになっています。このほかに<body>内にも決められたスクリプトをコピペします。Bloggerの場合既にFacebookが仕様に組み込まれていますのでわかる人はこれを利用します。つまり、ここのCSSのクラスを自分のデザインに変更するだけでよいです。
<div class='facebook'>
<a expr:href='"https://www.facebook.com/share.php?u=" + data:post.url + "&target=facebook"' title='Facebook' target='blank_'><span class=''>Facebookで共有する</span></a></div>
Facebookで取得したスクリプトをbody内に貼り付けます。
Bloggerの場合既にFacebookが仕様に組み込まれていますのでどちらのソースを使ってもいいね！ボタンを設置することが可能です。
筆者設置のFacebookの共有ボタンのテキストリンク
私のカスタマイズしたFacebookのいいね！ボタンは次の通りです。<div class='facebook'>
<a expr:href='"https://www.facebook.com/share.php?u=" + data:post.url + "&target=facebook"' title='Facebook' target='blank_'><span class=''>Facebookで共有する</span></a></div>
Facebookで取得したスクリプトをbody内に貼り付けます。
モバイルページでFacebookアプリを立ち上げるリンクをBloggerに実装する方法
実は上記のリンクはPC版ともいえ新しいウィンドウが立ち上がりそこにFacebookのログイン画面が表示されます。いちいちログインするのはスマホでは無理ですからアプリが立ち上がるようにしましょう。いろいろ調べたところ、次のサイトが役に立ちましたので紹介したいと思います。この方法はBlogger以外のブログでも応用可能です。
htmlからFacebookのアプリを立ち上げる方法は意外と単純なんですよ！
冒頭のhttps://をfb.//に変えてやればいいのです。Blogger用に私が考えたFacebookアプリを立ち上げるリンク方法は次の通りになりました。
<a expr:href='"fb://www.facebook.com/share.php?u=" + data:post.url + "&target=facebook"' expr:title='data:top.shareToFacebookMsg' target='blank_'><span class=''>Facebook</span></a>
これでBloggerのブログページからモバイル版Facebookアプリが立ち上がるリンクを作ることができました。
titleは単にtitle='Facebookで共有'としてもよいですが、日本語以外の人もいますからBloggerのタグを付けたほうがよいでしょう。
titleは単にtitle='Facebookで共有'としてもよいですが、日本語以外の人もいますからBloggerのタグを付けたほうがよいでしょう。
SNS共有ボタンをデザインする
SNSの共有リンクを設置する前に少しだけデザインについて考えてみましょう。まず最低限必要なのがソーシャルメディアのイメージカラーをRGBで取得しておくことです。SNSの基本色はグラフィックソフトのカラーピッカーなどから取得可能です。
それで、どんなボタンを作るかといいますと、シンプルに四角のパネルボタンを作ってみたいと思います。
まずはSampleというクラスを作ってみますね。
.sample{
margin:5px;
padding:12px;
background-color:#E50086;
position:relative;
width:150px;
height:40px;
}
.sample a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:#FFFFFF;
}
margin:5px;
padding:12px;
background-color:#E50086;
position:relative;
width:150px;
height:40px;
}
.sample a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:#FFFFFF;
}
共有ボタンの作り方は最終回で詳しく説明していますので、そちらを参考にしてください。
twitterのシェアリンクを作る方法
次はSNSのリンクの作り方です。SNSに何かURLを付け足す指示がある場合は「'data:post.sharePostUrl'」をコピペして利用します。
twitterの自前仕様を見てみると・・・
<a href="http://twitter.com/share?url=[シェアするURL]&text=[ツイート内テキスト]&via=[ツイート内に含むユーザ名]&related=[ツイート後に表示されるユーザー]&hashtags=[ハッシュタグ]" target="_blank">
参考サイト様：http://blog.yuhiisk.com/archive/2015/10/12/twitter-share.html#i-2
となっています。参考サイト様：http://blog.yuhiisk.com/archive/2015/10/12/twitter-share.html#i-2
この仕様を見てみると、Bloggerに自動挿入できないタグにはハッシュタグと言うものがあります。ユーザー名はちょっと今の自分には意味がわからないので消しておきましょう。Bloggerで使えそうなところは「URL」と「テキスト」あたりです。
この「URL」のところに先ほどのBloggerの記事共有用のテキストをコピペしてみましょう。ついでに「テキスト」のところにはBloggerの「記事タイトル」のタグを挿入してみましょう。
<a expr:href='"https://twitter.com/share?url=" + data:post.sharePostUrl + "&text=" + data:post.title'>twitterでシェアする！</a>
こんな感じですね。実はこの1文をひねり出すのに小一時間悩んで頭がボンバーとなり脱糞してました（笑）
&を特殊文字に変換することや「+」で文字列をつなぎ合わせることに苦労しました。
ここまででFacebookとTwitterボタンのBloggerへの設置はわかりましたね。はぁ。疲れた。ここまで執筆するのに4時間くらいかかってます。次は気を取り直して人気のFeedlyのBloggerへの設置ボタンを作りたいと思います。と思ったけどもう脳みそがフル回転したのでFeedlyのシェアボタンの説明は次回にしたいと思います。きっと数学やプログラミングの才能がある人はこういった時に緊張して頭が爆発せずに冷静でいられるのでしょうね（笑）
このスクリプトを設置する場合は絶対シェアしてくださいね！じゃないと苦労が報われません。このページをシェアしない人？閑古鳥鳴いちゃえ！
