ソーシャルボタンをWordPressに設置してみる Twenty Thirteen向け

WordPress

facebookのいいねボタンなどをブログに設置

設置するコード

wordpressのプラグインやブログパーツを使わずに設置する方法。設置するコードは以下のとおりで、標準テーマTwenty Thirteenを前提にしたHTMLとしてある。

上から

facebook
twitter
google+
はてなブックマーク

としてある。

<div id='gallery-social' class='gallery gallery-size-thumbnail'>
	<dl class='gallery-item'>
		<dt class='gallery-icon landscape'>
                        <div class='fb-like' data-href='<?php the_permalink();?>' data-send='false' data-layout='box_count' data-width='450' data-show-faces='true'></div>
		</dt>
	</dl>

	<dl class='gallery-item'>
		<dt class='gallery-icon landscape'>
                        <a rel='nofollow' href='https://twitter.com/share' class='twitter-share-button' data-count='vertical' data-url='<?php the_permalink();?>' data-text='<?php the_title();?>'>Tweet</a><script type='text/javascript' src='//platform.twitter.com/widgets.js'></script>
		</dt>
	</dl>

	<dl class='gallery-item'>
		<dt class='gallery-icon landscape'>
                        <script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script><g:plusone size='tall' href='<?php the_permalink();?>'></g:plusone>
		</dt>
	</dl>

	<dl class='gallery-item'>
		<dt class='gallery-icon landscape'>
                        <a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php 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>
		</dt>
	</dl>
</div>

なお、facebookのいいねを表示するために以下のjavascriptコードも必要

	<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>

どこに記述すればよいのか？

twenty thirteenのcontent.phpの以下の部分にHTMLを追記した。

<footer class="entry-meta">
        
        //ココに追記

	<?php if ( comments_open() && ! is_single() ) : ?>

なお、記事の個別ページでのみソーシャルボタンを表示したいので、以下のようにwordpressのis_single()で個別エントリー内でのみ表示されるようにしている。下のようなコードにすることでトップページなどではソーシャルボタンが表示されないようになる。

<footer class="entry-meta">
	<?php if( is_single() ) : ?>
                //ココに追記
        <?php endif; ?>

	<?php if ( comments_open() && ! is_single() ) : ?>

facebookのjsコードはfooter.phpのbodyタグ終了直前に配置した。終了直前でも表示に問題はないが、facebookの公式ページには、bodyの先頭に記述したほうが良いと書いてあった気がする。

Twenty Thirteen以外でも利用できる汎用コード

HTML

汎用タイプのHTMLは、ul liで組んである。

<ul class='button-group even four-up list-details-none' title='social bookmarks'>
	<li>
		<div class='fb-like' data-href='<?php the_permalink();?>' data-send='false' data-layout='box_count' data-width='450' data-show-faces='true'></div>
	</li>
	<li>
		<a rel='nofollow' href='https://twitter.com/share' class='twitter-share-button' data-count='vertical' data-url='<?php the_permalink();?>' data-text='<?php the_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='<?php the_permalink();?>'></g:plusone>
	</li>
	<li>
		<a rel='nofollow' href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php 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>
	</li>
</ul>

CSS

cssはzurb foundationのButton Groupsを利用する案。以下のcssでリスト化されたHTMLをインラインで表示し、リストの個数に応じて等間隔で並べることができる。zurb foundationはおすすめのcssフレームワーク。

ul.button-group { list-style: none; padding: 0; margin: 0 0 12px; *zoom: 1; text-align: center; }
ul.button-group:before, ul.button-group:after { content: " "; display: table; }
ul.button-group:after { clear: both; }
ul.button-group li { padding: 0; margin: 0 0 0 -1px; float: left; }
ul.button-group li:first-child { margin-left: 0; }
ul.button-group.radius li a.button, ul.button-group.radius li a.button.radius, ul.button-group.radius li a.button-rounded, ul.button-group.radius li input[type="submit"].button, ul.button-group.radius li input[type="submit"].button.radius, ul.button-group.radius li input[type="submit"].button-rounded { -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; }
ul.button-group.radius li:first-child a.button, ul.button-group.radius li:first-child a.button.radius, ul.button-group.radius li:first-child input[type="submit"].button, ul.button-group.radius li:first-child input[type="submit"].button.radius { -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; }
ul.button-group.radius li:first-child a.button.rounded, ul.button-group.radius li:first-child input[type="submit"].button.rounded { -moz-border-radius-topleft: 1000px; -webkit-border-top-left-radius: 1000px; border-top-left-radius: 1000px; -moz-border-radius-bottomleft: 1000px; -webkit-border-bottom-left-radius: 1000px; border-bottom-left-radius: 1000px; }
ul.button-group.radius li:last-child a.button, ul.button-group.radius li:last-child a.button.radius, ul.button-group.radius li:last-child input[type="submit"].button, ul.button-group.radius li:last-child input[type="submit"].button.radius { -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; }
ul.button-group.radius li:last-child a.button.rounded, ul.button-group.radius li:last-child input[type="submit"].button.rounded { -moz-border-radius-topright: 1000px; -webkit-border-top-right-radius: 1000px; border-top-right-radius: 1000px; -moz-border-radius-bottomright: 1000px; -webkit-border-bottom-right-radius: 1000px; border-bottom-right-radius: 1000px; }
ul.button-group.even .button { width: 100%; }
ul.button-group.even.two-up li { width: 50%; }
ul.button-group.even.three-up li { width: 33.3%; }
ul.button-group.even.three-up li:first-child { width: 33.4%; }
ul.button-group.even.four-up li { width: 25%; }
ul.button-group.even.five-up li { width: 20%; }

Twenty Thirteenの領域になってしまうが、上のHTMLを

<aside id="social" class="widget widget_nav_menu">
    //リスト化されたHTML
</aside>

上のようにasideで囲めば、横一列で並んだソーシャルボタンの背景にTwenty Thirteenのカラーで色づけできたりする。本ブログではそのようにしている。

ソーシャルボタンの高速化
ソーシャルボタンを非同期化して高速化する方法

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

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

ソーシャルボタンをWordPressに設置してみる Twenty Thirteen向けの記事にコメントを投稿

テーマ