pocketボタンを設置する方法

pocketボタンをWebサイトに設置する方法を紹介します。

pocketボタンを設置する方法
  1. pocketボタンの設置方法
  2. 独自アイコンを利用する場合

pocketボタンの設置方法

pocketボタンを作成するときはhttp://getpocket.com/publisher/buttonにアクセスし設置するボタンを選択します。
pocket
Code
<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>

コピーしたコードの中でスクリプトの部分はページ内に1つあれば問題ないため、2つ目のボタンを貼り付けるときは以下の部分を除いてコピーします。

スクリプト部分
<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>

※pocketボタンでは、ページの指定ができないためボタンを配置したページのURLが追加されます。

独自アイコンを利用する場合

独自アイコンを使用して表示する場合は、aタグを利用して設定を行います。

独自アイコン設置のソース
<a class="pocket-color sns-color" href="http://getpocket.com/edit?url=【URL】&title=【タイトル】" rel=”nofollow” onclick="javascript:window.open(encodeURI(decodeURI(this.href)), 'pkwindow', 'width=600, height=600, personalbar=0, toolbar=0, scrollbars=1');return false;" >Pocketアイコン</a>

独自アイコンを設置する場合は、【URL】と【タイトル】を設定します。

実際に設置したものがこちらになります。アイコンについてはこちらを参考にしてください。

※タイトルがうまく設定できない場合がありますが、原因は今のことろ調査中です。

divider

Trackback URL

http://webnonotes.com/web/pocket/trackback/

No Comments Yet

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>