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
  • このエントリーをはてなブックマークに追加

関連記事

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

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

記事を読む

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

Windows7でVirtualBoxとVagrantを使ってローカル開発環境を構築する

Vagrant(ベイグラント)とは http://www.vagrantup.comで入手できる仮

記事を読む

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

なるべく安くロリポップを申し込む方法

ロリポップというレンタルサーバーは元々比較的安く、よくキャンペーンなどで割引をやっているので安価にC

記事を読む

さくらサーバーにフォルダをアップロードする方法

さくらサーバーにフォルダをアップロードする…という機能は無いみたいで個別にFTPソフトを使う必要があ

記事を読む

【jQuery】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

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

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

記事を読む

さくらとロリポップのcronについての比較

私は今さくらのレンタルサーバーとロリポップのレンタルサーバーを両方試してみているのですがそのcron

記事を読む

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

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

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

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

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

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

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

→もっと見る

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