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

関連記事

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

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

【TortoiseGit】複数のリポジトリを統合する

やりたいこと 最近WindowsにTortoiseGitを導入してリポジトリを作ったり、履歴をプッ

記事を読む

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

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

記事を読む

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

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

記事を読む

美人画像を表示してくれるブログパーツまとめ

美人時計など有名なものもありますが、美人画像を表示してくれるブログパーツをまとめました。暦や時刻を表

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

かわいい女の子のアイコンやアバター画像を作れるサイト

TwitterやFacebookなどでアイコンが欲しくなることってあるかと思います。私も色々検索して

記事を読む

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

→もっと見る

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