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

関連記事

Twenty Fifteen カスタマイズ

WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと

no image

Google+ プラスワン(+1)ボタンの設置

Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式

プラグイン関連のJSやCSSの読み込みをフィルター

プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず

Lightbox (画像ポップアップ) プラグイン

WordPressで使用できるLightbox(画像ポップアップ)プラグインのまとめ ひとまずインストール・有効化するだけで使用可能です。(3.7/3.8/3.9) blueimp lig

管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな

「Contact Form 7」 メッセージの送信に失敗~

この修正はWordPress 3.5で行われているようです。(~3.4.2) Contact Form 7で以下のエラーメッセージが出る場合は、確認してみて下さい。 「メッセージの送信に失敗

Twenty Fourteenカスタマイズ用プラグインと派生テーマ

WordPressの現在のデフォルトテーマ「Twenty Fourteen」のカスタマイズに便利なプラグインと、「Twenty Fourteen」をもとに作成されたテーマのまとめです。 カスタマ

Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」

このブログでは、サイドバーウィジェットに「Tumblr」に投稿したブックマーク一覧を表示させています。プラグインは「Tumblr Widget」を使用しています。ダウンロード 「This plugi

Twenty Twelve カスタマイズ

何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。 目次 子テーマのつくりかた 他記事へのリンク アーカイブタイトル("カテゴリー別アーカ

Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更

標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑