Pocketのソーシャルボタンをブログ・サイトに設置する方法

公開日: : 最終更新日:2015/01/26 Pocket, サイト制作

スポンサーリンク

後で読みたい記事を保存することのできるPocketのソーシャルボタンの設置方法についてです。このボタンを設置するにはPocketのサイトから設置用コードを持ってきて貼りつけるだけなのですが、このPocket以外のソーシャルボタンも設置したい場合はこちらの記事も参考にしてみてください。

貼りつけるコードについては『Pocket 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>

ちょっとわかりずらいですが圧縮されているのを解凍すると次のようになります。

! 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");

見てみると”https://widgets.getpocket.com/v1/j/btn.js?v=1″のスクリプトを後から実行するようになっており、このファイルの中をさっと見てみるとどうやらクラス名が「pocket-btn」の「aタグ」全てになにか綺麗なボタンになるような細工をしていることがわかります。

なので記事と関係のないリンクについてもボタンの設置ができるのではないかと思い探してみると『Pocket Button Documentation』に詳細が載っているのを見つけました。

<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
data-save-url="ここにURLを記述"
data-pocket-count="vertical"
data-pocket-align="left"
>Pocket</a>

data-save-urlはPocketに保存させたいURLでdata-pocket-countはボタンの形式を表していて”none”,”horizontal”,”vertical”の3種類あります

data-pocket-count

最後にデモとしてYahooとhatenaのサイトのポケットのボタンを設置して終わります。

例)

<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
data-save-url="http://www.yahoo.co.jp/" data-pocket-count="vertical"
data-pocket-align="left"
>Pocket</a>
<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
data-save-url="http://b.hatena.ne.jp/"
data-pocket-count="vertical"
data-pocket-align="left"
>Pocket</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>

複数のPocketボタンを一度に設置する場合でも記述するスクリプトタグは一つで十分です。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

ニコニコ動画のユーザーおよびマイリストのRSSフィード

ニコニコ動画のユーザーページのRSSフィードおよびマイリストのRSSフィードは次のようになっています

記事を読む

PEARをレンタルサーバーにインストールする

共用レンタルサーバーにPEARをインストールしたときにてこずったところについてメモ。今回レンタルサー

記事を読む

ニコニコ動画の検索APIについて調べたのでメモ

ニコニコ動画にはAPIがあり、動画の情報(タイトルとか再生数とか)を取得したり、ランキング情報(RS

記事を読む

livedoorblogのタグのページが404 Not Found

別のブログとしてライブドアのものを使っているのですが、タグを編集していた際に特定のタグ一

記事を読む

iphone/ipadでページをオフラインで読めるように保存する方法

最近ipad miniのwifiモデルをを購入しました。出先で使えるwifiルータなど持っていなかっ

記事を読む

ブログのコメント欄をTwitterやFacebook、はてなのコメントで代用する方法

最近になってコメント欄にスパムっぽいものが大量に飛んでくるようになったのでどうにかしないと、と思い一

記事を読む

FC2ブログからWordPressへの引っ越しについて

今までFC2ブログでメモを残していましたが、WordPressに移行することにしました。理由としては

記事を読む

【CSS】beforeのcontentで改行する

.bsample1:before{ content:"★参考★\A"; } .bsampl

記事を読む

【PHP】Twitterのツイート数やはてぶ数を取得する

指定URLのTweet数の取得 Twitterでツイート数を取得するには指定のURLにアクセスする

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑