【Feedlyの購読者数まで簡単表示!】「Pocket」と「はてなブックマーク」と「Feedly」ボタンをWordPressプラグイン「Tweet, Like, Google +1 and Share」に追加する方法




投稿日:

WordPressのプラグインで、twitterfacebook,hatena,Google+などのソーシャルボタンを出していましたが、「WP Social Bookmarking Light」プラグインは、どうもデザインがキレイではなかったり、表示できるボタンに制限があったりしてなかなか気に入るものがありませんでした。という訳で、なんとか満足のいくソーシャルボタンに仕上がらないか、検討してみました。

その結果、落ち着いたのがこの形。このサイトだとまだ全然カウントがないのが寂しすぎます(泣)。(ぜひポッチとしてください。)

ソーシャルボタン

しかも今回の方法は、
・挿入コードさえあれば、国内外問わず色々なソーシャルボタンに対応可能。
・簡単、シンプル、コード書かなくて設置可能。
という感じで、初心者でも簡単に設定可能というのが良い所だと思います。

【手順】

1, 「Tweet, Like, Google +1 and Share」プラグインをインストールします。
   プラグイン > 新規追加 で普通に登録しましょう。

2, 「Feedly Insight」プラグインをインストールします。
   プラグイン > 新規追加 で普通に登録しましょう。
   このプラグインを利用することにより、現在は公式に提供されていない、Feedlyの購読者数を取得し、他のソーシャルボタンと並列で置く事も容易になります。将来的に公式にボタンが提供されればこれは必要ないかも知れません。

3, 「Tweet, Like, Google +1 and Share」プラグインの設定

その1 「6,Display Custom Buttons」にチェックを入れる。

設定1

その2  カスタムボタンの記述場所に、複数のボタンのコードを記述します。

こちらの部分です。

設定2

「Add your own Custom Buttons > Place Large button Code in this box」に以下をコピーしてください。
ただし、feedlyのみ、自分のサイトURLに変更する必要があります。
以下のコードは、はてな、pokect、feedlyの順です。

<a href="http://b.hatena.ne.jp/entry/%%URL%%" class="hatena-bookmark-button" data-hatena-bookmark-title= "%%TITLE%%" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></div>
 
<div class="socialicons s4custombtn-1" style="float:left;margin-right: 10px;"><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></div>
 
<div class="socialicons s4custombtn-1" style="float:left;margin-right: 10px;">[fi_button size="vertical"]

Feedlyは、「Feedly Insight」プラグインを利用することにより、[fi_button size="vertical"]の記述で挿入可能です。また、Feedlyは数値の反映まで1時間以上はかかるそうです。

こちらのコードのポイントは、以下のようなルールで書く事です。

■ 2つ追加したい場合
<カスタムボタン1></div>
<div><カスタムボタン2>

■ 3つ追加したい場合
<カスタムボタン1></div>
<div><カスタムボタン2></div>
<div><カスタムボタン3>

つまり、最後のボタンは、</div>で終わりません。同様に最初にも<div>は必要ありません。

最後に、「Save Changes」を押して保存して完了。これで登録が出来ているはずです。これでデザインも満足でき、様々なソーシャルボタンも使えるようになりました。他のボタンもこの応用で出来そうです。

【参考】

以下のサイトにとてもお世話になりました。ありがとうございます。

「Pocket」と「はてなブックマーク」ボタン を WordPressプラグイン「Tweet, Like, Google +1 and Share」に追加する | WordPress 不動産プラグインで不動産ホームページ

Pocket向けのShareボタンを追加してみた[プラグイン: Tweet, Like, Google +1 and Share]

Tweet, Like, Google +1 and Share で、はてなブックマークの設置ができない | ちゃもねっと

たった1行でFeedly購読者数カウンターを設置する WordPressプラグイン『Feedly Insight』がアップデート | 代助のブログ

ソーシャルボタンを設置するWordPressプラグイン「Tweet, Like, Google +1 and Share」 | Web’Notes