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

関連記事

twitterimage

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

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

記事を読む

linkwithin

関連記事を表示させるブログパーツLinkWithinの導入方法

LinkWithinについて ブログに関連記事を表示するパーツ『LinkWithin』を紹介します

記事を読む

outbrain_image1

関連記事を表示させるブログパーツOutbrainの導入方法

関連記事を表示させるブログパーツOutbrainの紹介です。 このOutbrainの長所は

記事を読む

capturefullpageimg1

指定URLのWebサイトの画面全体をキャプチャする方法

Webサイトのスクリーンショットを撮る方法としてはいくつかありますが、各方法ごとに調べたものを紹介し

記事を読む

jquery-icon

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

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

記事を読む

statusfollower

Twitterのフォロワーが有効かどうか評価するツール

ツイッターの自分のフォロワーがスパムや活動休止中か判定することのできるツールに『Status Peo

記事を読む

jqkotei2

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

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

記事を読む

61m2fdbtoTL._AA180_

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

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

記事を読む

PAK12_10naname500-thumb-500xauto-3071

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

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

記事を読む

nc23924

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

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

記事を読む

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

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

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

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

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

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

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

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

computer_server
格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

school_toshokan_hondana
kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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