「Tweet, Like, Google +1 and Share」プラグインの Custom Buttons のところに「はてなブックマーク」ボタンをいれてたのですが 流行?の「Pocket」ボタンを追加しようとしました。
しかしCustom Buttonsの欄は1つしか無いのでCustom Buttons欄に2つくっつけて入れてみました。

Pocket-4
*Select Icons to display の 「6 Display Custom Buttons」 にチェックを入れるのをお忘れなく


<!-- 「はてなブックマーク」ボタンコード  -->
<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>
<!-- 「Pocket」ボタンコード  -->
<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 class="pocket-btn"> のところで段落ちしているようです。
これは「Pocket」ボタンのscriptが生成していますのでこちらで変更する事はできません。


Pocket-2


スポンサードリンク



しかし、よくよくソースを見ると各ボタンが
<div class="socialicons s4custombtn-1" style="float:left;margin-right: 10px;">~</div>
で挟まれていますので、ちょっと強引に<div>タグを挟みこみました。


<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;">



Pocket-3

これできれいに横ならびになりました。


参考
はてなブックマークボタンの作成・設置について
http://b.hatena.ne.jp/guide/bbutton

Pocket Button
http://getpocket.com/publisher/button


スポンサードリンク

Posted by on 2016/04/18



不動産プラグインポータル