Pocketボタンの設置

日本のブログでは、4大SNS(Twitter, はてな, Facebook, Google+)に加えて最近では、Pocket(以前は、Read it later)もよく見かけますよね。追加してみましたので、それらの方法をいくつかのパターンでまとめてみました。

公式サイトから拝借

公式のサイトにあるコードを表示したい場所にそのまま貼り付ければ実装することが可能です。Pocket for Publishers: Pocket Button

<a data-pocket-label="pocket" data-pocket-count="horizontal" 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>

ボタンの種類は、data-pocket-countで設定できます。左から "none"、"horizontal"、"vertical"

また、classを指定しておき、そこにCSSでスタイリングしておけば、横並びなどができます。

<style>
.pocket-btn {
    display: inline;
    margin-right: 20px;
}
</style>

Pocketのbtn.jsを非同期読み込み

こちらも公式に書かれていないですが、以下のようにasync=trueを付与することでPocketのサイトからjsファイルを非同期にインクルードするようになります。

<a data-pocket-label="pocket" data-pocket-count="horizontal" 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.async=true;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>

プラグインライクに実装

下の例では、フィルターフックでコンテンツ下部にボタン要素を追加して、スクリプトをfooterに追加します。

// Pocketボタン要素
function content_for_pocket_button($content){
    if (is_single()) {
        $pocket= '<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>';
    }
    $content .= $pocket;
    return $content;
}
add_filter( 'the_content', 'content_for_pocket_button');

// Pocketボタン用スクリプト
function scritp_for_pocket_button() {
    if (is_single()) {
        $pocket_script = '<script id="pocket-btn-js" src="https://widgets.getpocket.com/v1/j/btn.js?v=1"></script>';
        echo $pocket_script;
    }
}
add_action( 'wp_footer', 'scritp_for_pocket_button');

Related

Googleマップの吹き出し(infowindow)内にコンテンツを表示する Googleマップ上に複数マーカー・吹き出しを表示する 「jqPlot」を使って棒グラフを作成 Twenty Fourteen 「投稿日」や"先頭固定表示"を非表示 投稿タイトル(entry-title)を非表示にする ナビゲーションメニューに検索フォームを追加 開発やテストに便利なプラグイン 折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」