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

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

関連記事

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

Twitterのオリジナルサイズの画像ファイル(.jpg-large,.jpg-orig等)を一括リネームする

Twitterの画像をオリジナルサイズで保存しようとするとjpg-la

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

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

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

→もっと見る

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