pocketボタンを設置する方法

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

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

pocketボタンの設置方法

pocketボタンを作成するときはhttp://getpocket.com/publisher/buttonにアクセスし設置するボタンを選択します。

<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】と【タイトル】を設定します。

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

• pocket

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