WordPressでソーシャルボタンを非同期化して高速化

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

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
ページキャッシュを実装して高速化

WordPressでソーシャルボタンを非同期化して高速化」への4件のフィードバック

  1. 記事を参考に設置したところ、「ul」タグの前に「Untitled」というテキストも挿入されるようになりましたが、これを削除する方法はあるのでしょうか?

    1. 状況を把握できていませんが、考えられる状態として、

      $title = the_title();

      の部分で記事のタイトルを取得できずに、Untitledと表示されている可能性が考えられます。

      $title = get_the_title();

      もしくは、

      $title = the_title(”, ”, false);

      とするとどうでしょうか?

      1. お返事遅くなり申し訳ございません。
        アドバイス通り試してみたところ、「ul」タグの前に「Untitled」というテキストは表示されなくなりましたが、肝心のシェアボタンを押した際にタイトルが「Untitled」になってしまいします。
        「$title = the_title();」の方がシェアボタンとしては機能しますので、ulの前の「Untitled」はdisplay:noneで対応したいと思います。
        ありがとうございました。

Webエンジニアブログにコメント

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

WordPressでソーシャルボタンを非同期化して高速化の記事にコメントを投稿

高速化