プラグイン非依存で簡単にソーシャルボタンを非同期化する

WordPressのAjaxインタフェースを利用

表示の高速化という観点では、いいねボタンなどはHTMLページのレンダリング時に妨げとなっている。

ソーシャルボタン部分HTMLの読み込みをページのレンダリング後に非同期で行うことで表示の高速化に貢献することができる。

やり方

content.php

テーマのcontent.phpにソーシャルボタンの部分HTMLを非同期で挿入するためのタグを追加しておく。

<?php if( is_single() ) : ?>
        <aside id="social" class="format-aside entry-content"></aside>
<?php endif; ?>

今回は公式テーマtwentyfourteenのソーシャルボタン群を非同期化した。上のHTMLで設定してあるclass属性はtwentyfourteenのものになる。is_singleで囲むことで個別記事ページにのみボタンを表示するようにした。

functions.php

functions.phpの末尾に下のコードを追加した。

add_action('wp_enqueue_scripts', 'enqueue_script');
add_action('wp_ajax_load_social_button', 'load_social_button_callback');
add_action('wp_ajax_nopriv_load_social_button', 'load_social_button_callback');

function enqueue_script($hook) {

    if( is_single() )
	{
		wp_enqueue_script('ajax-script',
			get_stylesheet_directory_uri().'/js/ajax_requester.js', __FILE__,
			array('jquery')
		);
		
		$ajax_nonce = wp_create_nonce("load_social_button");
	
		wp_localize_script('ajax-script',
			'ajax_object',
	    	array(
				'ajax_url' => admin_url('admin-ajax.php'),
				'action' => 'load_social_button',
				'nonce' => $ajax_nonce,
			)
		);
	}
}
	
function load_social_button_callback() {

	check_ajax_referer('load_social_button', '_security');
	
	$permalink = the_permalink();
	$title = the_title();

$html = <<< EOF
	<ul class='button-group even four-up list-details-none' title='social bookmarks'>
		<li>
			<div class='fb-like' data-href='{$permalink}' data-send='false' data-layout='box_count' data-width='450' data-show-faces='true'></div>
			<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";
			  fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));</script>
		</li>
		<li>
			<a href='https://twitter.com/share' class='twitter-share-button' data-count='vertical' data-url='{$permalink}' data-text='{$title}'>Tweet</a><script type='text/javascript' src='//platform.twitter.com/widgets.js'></script>
		</li>
		<li>
			<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script><g:plusone size='tall' href='{$permalink}'></g:plusone>
		</li>
		<li>
			<a href="http://b.hatena.ne.jp/entry/{$permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{$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>
		</li>
	</ul>
EOF;

	echo $html;
	die();
}

コードの詳細についてはWordPressのAjaxについての記事WordPressでAjaxを利用を参考にしてほしい。

<ul class='button-group even four-up list-details-none' title='social bookmarks'>

ul部分のclass属性については、ソーシャルボタンをWordPressに設置してみるのエントリーに具体的なcssの記述を載せてあるので参考にしてほしい。

Ajaxリクエスト用js

テーマのルートディレクトリにjsというフォルダを作成し、

ajax_requester.js

というファイル名で下のコードを作成する。

jQuery(document).ready(function($) {
	var data = {
		action: ajax_object.action,
		_security: ajax_object.nonce,
	};
	
	jQuery.ajax({
		type: 'POST',
		data: data,
		url: ajax_object.ajax_url,
		dataType: 'html',
		success: function(response){
			$('#social').append(response);
		},
		error: function(response){
			console.log("error");
		}
	});
});

Ajaxリクエストの送信から部分HTMLをレスポンスとして受けとり、HTMLに追加する処理を行っている。

参考
遅延ロードとjQuery.ajax
ページキャッシュを実装して高速化