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

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

プラスワン(+1)ボタンの設置コード

公式サイトから拝借

公式のサイトにあるコードを表示したい場所にそのまま貼り付ければ実装することが可能です。
+1 ボタン

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-annotation="none"></div>

<!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
  • *data-annotationは、「+1情報」(何件+1されたか)の表示の仕方を設定
    なし、インライン、バルーンなどがある。

plusoneのjsファイルを非同期で読み込む

公式サイトの詳細オプションで同期・非同期を選択するチェックボックスが用意されています。標準では、非同期になっています。念のため、async = trueであるかは確認してみて下さい。

プラグインライクに実装

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

// プラスワン(+1)ボタン要素
function content_for_plusone_button($content){
    if (is_single()) {
        $plusone= '<div class="g-plusone" data-annotation="none"></div>';
    }
    $content .= $plusone;
    return $content;
}
add_filter( 'the_content', 'content_for_plusone_button');

// プラスワン(+1)用スクリプト
function scritp_for_plusone_button() {
    if (is_single()) {
        $plusone_script = '<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>';
        echo $plusone_script;
    }
}
add_action( 'wp_footer', 'scritp_for_plusone_button');
  • このエントリーをはてなブックマークに追加

関連記事

ポップアップが実装できるプラグイン「Anything popup」「Easy Modal」

ポップアップ 「Anything Popup」 「Anything popup」は、ページにポップアップが実装できるWordPressプラグインです。ポップアップ要素を投稿ページと同様に作成できるた

翻訳ファイルの子テーマ化

子テーマでfunctions.phpなどを変更していくと翻訳すべき項目にぶつかっていくと思います。例を挙げると_()の部分で、Wordpressが翻訳を行ってくれる部分です。 個人的には、日本語

ウィジェット関連のカスタマイズ・プラグイン

リンクマネージャー WordPress 3.5バージョンアップ以降にリンクマネージャーを追加するには以下のフィルタを設定もしくはプラグインをインストールして下さい。 プラグイン Link M

「Google Analytics for WordPress」投稿URLにやたら長いパラメータがついてしまう

Google 検索結果をみていたら、Wordpressの投稿のURLが実際のものより異様に長くなっているので何かなと思って調査してみました。 このような感じで http://kwski.net/ca

Twenty Ten カスタマイズ

Twenty Tenのカスタマイズについてのまとめです。 目次 コンテンツナビゲーション 非表示 「投稿日」を非表示 「作成者(投稿者)」を非表示 "コメントをどうぞ"("leave a

ナビゲーションメニューに検索フォームを追加

メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく

no image

アイキャッチにマウスオーバーすると投稿タイトルを表示

WordPressのフォーラムから定期的に流入があるため、対応をいくつか探ってみました。トピックは、「サムネイルにマウスオーバーするとタイトルが表示されるようにしたい」 ちなみに、投稿内のキャプ

開発やテストに便利なプラグイン

開発やカスタマイズに使えそうなプラグインを集めてみました。 テーマのカスタマイズには、使用中のテンプレートファイルなどを表示してくれると便利ですね。個人的には、テーマ開発の際に、実行しているSQ

"コメントを残す" 削除・文言を変更する方法

コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹

投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ

ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑