Blogger(blogspot)にFeedlyとPocketのオリジナルSNSシェアボタンを設置する方法

自力でBloggerにFeedlyとPocketのオリジナルボタンを設置する！

人気のFeedlyという記事をスクラップするスーマートフォンアプリ。このFeedlyアプリに対応したシェアボタンをBloggerに設置する方法を考えました。まずはFeedlyの公式サイトに行き、どんなスクリプトなのか確かめます。FeedlyのボタンをBloggerに設置する方法はシンプルでとても簡単です。

• Feedly公式サイト

親切にもFeedlyは簡便なシェアボタンの設置方法の説明がありました。他のSNSではこんなに簡潔に説明してなくて、わざわざデベロッパーにとってはわかりにくいことがよくあります。試しにURL入力欄にYourBlogと入れてみました。ここのソースをコピペしてみましょう。もちろんコピペは自由です。

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2FYourBlog'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png' alt='follow us in feedly' width='131' height='56'></a>

このURLを前回説明しました「BloggerにTwitterとFacebookのSNS共有ボタンを表示する方法（自力で解決！）」で知恵を絞って作り上げたBloggerのコードに置き換えます。

<a href='&quot;https://cloud.feedly.com/#subscription%2Ffeed%2F&quot; + data:post.url' class='クラス名'>Feedly</a>

これでクラスを指定すれば簡単にFeedlyのシェアボタンが作れます。あるいはexpr:と + data:post.canonicalUrlを消してトップページのURLを追加するだけでもよいでしょう。

※重要な追記※
2018年3月20日、BloggerをSSL化したら正常にfeedlyに登録できないことがわかりました。修正したURLを追加しましたのでSSLでBloggerをFeedlyに登録できない人はURLを書き換えてみてください。

 <a href='https://feedly.com/i/subscription/feed/https://digiota.blogspot.com/feeds/posts/default' target='_blank' title='Feedly'>

はてなブックマークの共有ボタンをBloggerに設置する

お次ははてぶことはてなブックマークをBloggerに設置するリンクを作ります。はてぶは以前私が自作のスクリプトを作りましたのでそれをもとに考えてみたいと思います。

<a class='hatena-bookmark-button' data-hatena-bookmark-lang='ja' data-hatena-bookmark-layout='standard-noballoon' expr:data-hatena-bookmark-title='data:post.title' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only@2x.png' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>

canonicalURLを指定しますと、その記事のページがブックマークされます。おすすめなのはcanonical（カノニカル）URLです。カノニカルというのはいわゆる正式なURLですので正しいURLです。sharePostUrlはSNS共有用のURLでSSL対応ブログではhttpのsが付かないURLが書かれてしまいます。Bloggerはhttpsに自動リダイレクトされるのでどちらでもよいのです。

<a class='あなたの作成したクラス' data-hatena-bookmark-lang='ja' data-hatena-bookmark-layout='standard-noballoon' expr:data-hatena-bookmark-title='data:post.title' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'>Hatena</a>

あとはCSSでボタンを作るだけで、これではてなブックマークを設置することができました。

PocketボタンやGoogle +の共有ボタンを設置する

次はサクサクとPocketというスマホアプリのポケットボタンとGoogle Plusの共有ボタンの基本型を作ってみたいと思います。ソースは以前私が作ったものがありますのでコピペで取り出してきたいと思います。

Pocketボタン設置ソース

私のブログソースから・・・

<a class='pocket-btn' data-lang='en' data-pocket-count='none' data-pocket-label='pocket'/>
<script type='text/javascript'>!function(d,i){if(!d.getElementById(i)){var j=d.createElement(&quot;script&quot;);j.id=i;j.src=&quot;https://widgets.getpocket.com/v1/j/btn.js?v=1&quot;;var w=d.getElementById(i);d.body.appendChild(j);}}(document,&quot;pocket-btn-js&quot;);</script>

この部分は年に一度見るか見ないか、テンプレートを変えるまでは絶対に見ることのないソースなので、何の言葉か私でも意味がわかりません（苦笑）シンキングタイムです。

なぜかEnglishが指定してありますけどここはJPでよいでしょう。

このJavaScriptは既成のボタンを呼び出すものですから、もう一度公式ページに行って仕様を確認してみる必用がありそうです。

• Pocket Button Documentation

このページに個別に作ったボタンを設置する方法が書かれているはずですが・・・書いてありませんでした（爆）

あなた自身でコードを出力するには・・・と書かれていますからこれのことでしょうか？

<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
  data-save-url="ここを編集"
  data-pocket-count="vertical"
  data-pocket-align="left"
  >Pocket</a>
<script type="text/javascript">...

うーん。これじゃただの既成ボタンですね。オリジナルのボタンを作るには別のURLが必要なようです。では、Blogger用にちょこちょこっと編集してみましょう。ここから頭を捻って唸りましたよ。

今回はこちらのページを参考にさせてい頂きました。

[Pocket]オリジナルシェアボタンのカスタマイズ方法、ただし不細工 ...
http://hirashimatakumi.com/blog/1384.html#anchor06
（SSL非対応のためリンクできずにすみません）

<a expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Pocket</a>

仮設置して正常に動作していることを確かめて、デザインをCSSで記述すればPocketのオリジナルボタンの完成です。この方法は少々知識があればWord Pressや他の無料ブログなどにも応用できます。

次回はGoogle PlusやE-Mailでのシェアボタンの作成方法について考えてみたいと思います。私が紹介した方法で無事FeedlyとPocketのシェアボタンを自作できましたらこのページをみなさまのブログで参考になったよ！と紹介するかシェアしてください！スクリプトの無断使用をされる場合は・・・閑古鳥鳴けって感じです。ほんと、これ考えるのにどれだけ頭を悩ませ命を削ったか、その見返りは無償でいいので是非とも返してください（笑）

関連リンク

• 第一回 Bloggerシェアボタン設置講座「BloggerにTwitterとFacebookのSNS共有ボタンをオリジナルで表示する方法」
• 第三回 Bloggerシェアボタン設置講座「BloggerにGoogle Plusのオリジナルシェアボタンを設置する方法」