メシのタネ

メシのタネになる、Laravelや設計思想の技術配信サイト


【Web】pocketボタンをつける方法

,

  1. API
  2. 【Web】pocketボタンをつける方法

ahiru
私のブログの性質上、中々いいねとか皆しないと思うので、
後で読むができるpocketのソーシャルボタンをつけました。
全然むつかしくないので、気軽につけれます。

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ボタンがセットされた場合にこのプロパティは有効
で、このインラインフレーム内の左、真ん中、右が設定できるよ

みたいな事言ってると思います。多分。

それでは・・・
一覧記事にしかついてないので、アカウントある人誰かためしに押してみて下さい!ナンチッテー。

ではまたー。

参考はこっちらー


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.