脱プラグインで高速化! WordPressでソーシャルボタンを埋め込みコードで表示する方法

2013/10/23

WordPressでソーシャルボタンを表示するのに「WP Social Bookmarking Light」プラグインを使っていました。

プラグインを使うと、WordPressやテーマのバージョンアップの影響を受けにくいので、メンテナンスの手間が少なく便利です。

しかし、今回はページ表示時間を短縮するために、プラグインの使用をやめ、PHPコードを埋め込んでソーシャルボタンを表示するよう変更しました。

Step0. 準備

WordPressの管理画面の [プラグイン]から「WP Social Bookmarking Light」を[停止]します。

Step1. PHPコードを追加

[外観] – [テーマ編集]を開き、テーマのための関数(functions.php)を選択します。

下のようなコードを追記します。

// Social button
function content_for_social_button($content){
    if (is_single()) {
        $twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-via="<あなたのTwitterアカウント名>" data-lang="ja" data-count="vertical">ツイート</a>';
        $facebook = '<div class="fb-like" data-href="' . get_permalink($post->ID) . '" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>';
        $googleplus = '<div class="g-plusone" data-size="tall"></div>';
        $hatena = '<a href="http://b.hatena.ne.jp/entry/' . get_permalink() . '" class="hatena-bookmark-button" data-hatena-bookmark-title="' . get_the_title() . '" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>';
        $social = "<div class='bottomtopsy'><ul>";
        $social .= "<li>" . $twitter . "</li>";
        $social .= "<li>" . $facebook . "</li>";
        $social .= "<li>" . $googleplus . "</li>";
        $social .= "<li>" . $hatena . "</li>";
        $social .= "</ul></div>";
    }
    $content .= $social;
    return $content;
}
add_filter( 'the_content', 'content_for_social_button');

// ツイートボタン用スクリプト
function scritp_for_tweet_button() {
    if (is_single()) {
        $twitter_script = '<script type="text/javascript" async="async" src="http://platform.twitter.com/widgets.js"></script>';
        echo $twitter_script;
    }
}
add_action( 'wp_footer', 'scritp_for_tweet_button');

// いいね!ボタン用スクリプト
function scritp_for_facebook_button() {
    if (is_single()) {
        $facebook_script = '<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=<あなたのFacebookアプリID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, \'script\', \'facebook-jssdk\'));</script>';
            echo $facebook_script;
    }
}
add_action( 'wp_footer', 'scritp_for_facebook_button');

// Google+ボタン用スクリプト
function script_for_googleplus_button() {
    if (is_single()) {
        $googleplus_script = '<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>';
        echo $googleplus_script;
    }
}
add_action( 'wp_footer', 'script_for_googleplus_button');

Step2. スタイルシートで表示を整えます

[外観] – [テーマ編集]を開き、スタイルシート(style.css)を選択します。

下のようなコードを追記します。

.bottomtopsy {
    background-color: #F7F7F7;
    height: 88px;
    padding: 15px 15px 5px;
    border: 1px solid #ccc;
    margin: 15px 0;
}
.bottomtopsy ul {
    list-style-type: none;
    margin: 8px 0 0 0;
}
.bottomtopsy li {
    float: left;
    margin-right: 15px;
}

以上で完成。

コード説明

Twitter

$twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-via="<あなたのTwitterアカウント名>" data-lang="ja" data-count="vertical">ツイート</a>';

の<あなたのTwitterアカウント名>部分は、あなたのTwitterアカウント名に変更してください。

Twitterの用意しているTwitterボタン作成ページでは、カスタマイズできる範囲が限られていますが、
Tweet Button | Twitter Developers」を読むと、カスタマイズの方法が分かります。

縦吹き出し(上吹き出し)にするために、data-count=”vertical” を指定しています。

また、スクリプトには、非同期読み込みするために async=”async” を追加しています。

はてなブックマーク

はてなブックマークのコードは、はてブの公式サイトで作成したものだと、「ページのアドレス」に入力したURLへのブックマークとなり、各個別記事がブックマークされません。

Screen Shot 2013-10-25 at 6.25.03

そこで、各記事がブックマークされるように、WodPressのget_permalink()関数とget_the_title()関数を使って、カスタマイズしました。
この部分です。

$hatena = '<a href="http://b.hatena.ne.jp/entry/' . get_permalink() . '" class="hatena-bookmark-button" data-hatena-bookmark-title="' . get_the_title() . '" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>';

リストをスタイルシートで表示調整

各ソーシャルボタンはリストで表示して、”list-style-type: none;”でスタイルシートでアイテムヘッダーが表示されないように調整しています。

こんな感じに仕上がりました。

Screen Shot 2013-10-25 at 6.38.33

参考文献

参考にさせていただきました。感謝。

反応して頂けると励みになります。ありがとうございます

No Comments

Be the first to start the conversation.

コメントを残す

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

*