メシのタネ

めしのたねになるIT情報配信サイト


【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.

若い頃、「仕事中にハマったこと」や「誰かに共有したい技術的な気づき」をアウトプットしたくてブログを始めましたが、勢い任せでよく分からない記事を大量生産し、あえなく飽きて終了。

改めて今、キャリア15年分の経験や知識が、これからITエンジニアを目指す方や、同じような課題で悩んでいる現役エンジニアの「メシのタネ」になるような記事を残したいと思っています。
※過去の記事は見ると精神が崩壊するため、そっとしておいてください。

🛠 経歴という名の珍道中:
文系Fラン → 広告営業 → Web営業 → 通信営業 → Web進行 → 出版 → Web媒体運用 → ソフトウェアハウス → SES → フリーランス

専門教育も受けず、転職歴も多数。履歴書はまるで時系列の事故記録のようですが、試行錯誤を重ね、なんとかエンジニアとして食べています。

このブログでは、そんな「履歴書クラッシャー型エンジニア」が送る、
名古屋一敷居の低い、実務に役立つ技術ブログを目指します。

Laravel
Laravel 12、「コード 1 行も書き換えず未来へ」──静かな革命の手順書New!!
Laravel
LaravelのMiddlewareって意味あるの?仕組み・使いどころ・やらかしまで整理してみたNew!!
Laravel
ServiceProviderって何してるの?DIの背後で動いてるやつの正体New!!
Laravel
LaravelのサービスコンテナとDI、「書いてるだけで動く」コードの正体New!!
Laravel
Laravelのアーキテクチャ、実は誰もわかってない説New!!
ガジェット
【解説】Bluetoothヘッドホンでマイクが使えない理由と回避策まとめ(Mac対応)