Pocketボタン設置

2014/04/08

各種ソーシャルメディアへの共有ボタンを設置している当サイトですが、共有を目的とした既存のボタンとは少し毛並みの違う、いわゆる「あとで読む」機能を持つPocketボタンを設置しました。

設置方法はPocket提供元のRead It Later社が提供するPocket Buttonページに行き、好きなボタンの形状を選択して表示されたコードをコピーして各ページの任意の場所に記述するだけです。

この方法だと表示しているページが後で読む対象となるので、1ページに複数のボタンを配置したい場合はさらにPocket Button Documentationページを参照してaタグのdata-save-url要素に各ボタンの対象となるURLを指定すればOKです。

<!-- 1つめのボタン -->
<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
  data-save-url="<URL1>"
  data-pocket-count="vertical" 
  data-pocket-align="left"
  ></a>

<!-- 2つめのボタン -->
<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
  data-save-url="<URL2>"
  data-pocket-count="vertical" 
  data-pocket-align="left"
  ></a>

<script type="text/javascript">...

細かい見た目の調整はCSSで指定すればよいでしょう。

その他の共有ボタン設置については以下の資料をご覧下さい。

関連資料・記事