WP Social Bookmarking LightのGoogle+1ボタンが表示されない時の解決方法

Google+1ボタンが表示されなくなった

以前は表示されていたGoogle+1ボタンがいつの間にか消え去っていました。

いつの間にかそうなっていたので原因が今ひとつ特定できないのですが、お名前.comの共用SDサーバーでPHPのバージョンを上げたタイミングだったように思います。

アイコンが見えないだけで、ソース自体にはGoogle+1用のコードは書かれている状態です。
色々試した結果、HTML5に対応させるために2箇所を変更する事で無事表示されました。

<head>内に記述を追加する

下記コードを header 内に追記します。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ja'}</script>

お使いのテーマにより多少異なるとは思いますが、基本的には「ダッシュボード」→「外観」→「テーマ編集」から画面右側に表示された一覧の中に「header.php」が見つかると思います。

「header.php」を開くと、その中に <head>と</head> で囲まれている部分があると思います。

この間であればどこに記述してもOKですが、もし </head> の一行前に <?php wp_head(); ?> という記述がある場合は必ずそれよりも上に追記します。

プラグインのソースにも追加する

続いて「WP Social Bookmarking Light」のソースを編集します。

「ダッシュボード」→「プラグイン」→「インストール済みプラグイン」でプラグインの一覧を出したら、「WP Social Bookmarking Light」を探して「編集」をクリックします。

画面右のプラグインファイル一覧の中から「wp-social-bookmarking-light/modules/services.php」を選択します。

ファイルが開いたら真ん中あたりにある「@brief Google +1」という部分を探します。
以下が該当部分の元のソースです。この部分の10行目を変更します。

    /**
     * @brief Google +1
     */
    function google_plus_one()
    {
        $options = wp_social_bookmarking_light_options();
        $button_size = $options['google_plus_one']['button_size'];
        $annotation = $options['google_plus_one']['annotation'];
        $width = $annotation == 'inline' ? 'width="'.$options['google_plus_one']['inline_size'].'"' : "";
        $raw = '<g:plusone size="'.$button_size.'" annotation="'.$annotation.'" href="'.$this->url.'" '.$width.'></g:plusone>';
        return $this->link_raw($raw);
    }

10行目は実際にコードとして書きだされる内容だと思われます。プラグインの設定であらかじめ選択しておいた「ボタンサイズ」や、バブルやインラインなどのデザインに関する「annotation」がこの記述で反映されます。

この中へ「class=”g-plusone”」を追記します。

        $raw = '<g:plusone class="g-plusone" size="'.$button_size.'" annotation="'.$annotation.'" href="'.$this->url.'" '.$width.'></g:plusone>';

ボタンはこれで表示されるようになりました。

g1button
デザインを整える

Google+1ボタンが再び表示されるようになりましたが、このままでは「WP Social Bookmarking Light」で設定したデザインが反映されません。上の画像でも微妙な大きさになってしまっています。

設定を反映させるために同じ行にある「size」と「annotation」に接頭語”data-“を付けて、それぞれ
「data-size」
「data-annotation」
へ変更します。

        $raw = '<g:plusone class="g-plusone" data-size="'.$button_size.'" data-annotation="'.$annotation.'" href="'.$this->url.'" '.$width.'></g:plusone>';

これでプラグインの設定で選択したデザインが反映されます。
このブログでは Button size を「midium」に、 annotation を「bubble」にしています。

横幅の余白が気になる場合は、CSSで幅を変更して整えます。

「設定」→「WP Social Bookmarking Light」を開いて「Styles」タブを選択します。
一番下あたりにでも「.wsbl_google_plus_one{}」と記入して中身は自由に書きます。

このブログでは横幅を元サイズの 90px から 60px に変えてみました。

.wsbl_google_plus_one{ width: 60px;}
plusonecss

コメント

 DISQUSコメントシステムとは?
DISQUSコメントシステムFacebook Twitter Google などのアカウントを使用してコメントを残すことができます。
また、それらを使いたくない場合でも メールアドレスのみ でコメントが可能で、その際のアドレスはもちろん非公開です。
YouTubeTweet などはURLを貼ると自動で埋め込み表示されますし、画像をアップすることもできます。
お気軽にコメント頂けると嬉しいです。

New Post



Random


CLOSE