私のブログの性質上、中々いいねとか皆しないと思うので、
後で読むができるpocketのソーシャルボタンをつけました。
全然むつかしくないので、気軽につけれます。
INDEX
pocketソーシャルボタン設置
こういうソーシャルボタンってなんかパターンありますよね。
Enchant.jsとかでプログラム作ってるんだろうか。
とりあえず2014/7/22時点でWordPressではこう設定します。
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink();?>"></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>
プロパティなど分かる範囲
どうやらこのAタグの中で色々調整するっぽいです。
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink();?>"></a>
該当記事を後で読む追加
このAタグのdata-save-urlのパラメータを該当記事にしてやれば、
その記事を後で読むに追加してくれるみたいですね。
This is the url that will be saved when the button is clicked. If the data-pocket-count attribute is set to show a counter, the counter will show the number of saves of the provided url.
getpocket.comより引用
だそうで。
表示をバルーンにしたい
data-pocket-countパラメータで後で読むに追加した数の表示方法を指定できます。
値はnone,horizontal,verticalです。
verticalにすればバルーンになって、horizontalならこのブログのようになります。
左寄せしたい
Webサイトの都合上このボタン左にしたいとか右にしたいとかあると思います。
そういう時たいてい、おらーってCSSごりごり書いたりするんですけど、これは大丈夫みたいですね。
data-pocket-alignプロパティがあるので。
設定できる値は
left,center,rightだと思います。
leftとrightだけ試しましたけど、centerやってません。
でも、このパターンならこれだと思います。
This property is really only useful when using a button with data-pocket-count set to horizontal. It sets how the button will align inside of the button's iframe.
getpocket.comより引用
水平にこのSNSボタンがセットされた場合にこのプロパティは有効
で、このインラインフレーム内の左、真ん中、右が設定できるよ
みたいな事言ってると思います。多分。
それでは・・・
一覧記事にしかついてないので、アカウントある人誰かためしに押してみて下さい！ﾅﾝﾁｯﾃｰ。
ではまたー。
