WordPressでソーシャルボタンを設置したい

WordPress本を参考に、はてなブックマーク、twitter、Google+、Facebookのソーシャルボタンを設置した。(/wordpress/wp-content/themes/twentyten_edit/配下を編集)
Screen Shot 2012-04-27 at 11.26.06

やったことメモ
social-button.phpを追加

<ul class="social_buttons">
	<!-- はてなブックマーク -->
	<li><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="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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>
	<!-- twitter -->
	<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
	<!-- Google+ -->
	<li><div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://yamakadoh.net/blog/"></div></li>
	<!-- Facebook -->
	<li><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyamakadoh.net%2Fblog%2F&amp;send=false&amp;layout=standard&amp;width=360&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=26" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:360px; height:26px;" allowTransparency="true"></iframe></li>
</ul>

social-script.phpを追加(Google+で必要)

<script type="text/javascript">
  (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>

loop-single.phpを編集(get_template_partの行を追加)

...
<div class="entry-content">
	<?php the_content(); ?>
	<?php get_template_part('social-button'); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
...

header.phpを編集(bodyとdivの間にget_template_partの行を追加)

...
<body <?php body_class(); ?>>
<?php
if (is_single() && in_category('未分類')):
	get_template_part('social-script');
endif;
?>
<div id="wrapper" class="hfeed">
...

style.cssを編集(末尾に追加)

ul.social_buttons {
	margin: 10px 0 0;
}

ul.social_buttons:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;}

.social_buttons li {
	float: left;
	list-style: none;
	padding-right: 10px;
}

参考サイト

本格ビジネスサイトを作りながら学ぶ WordPressの教科書
プライム・ストラテジー株式会社
ソフトバンククリエイティブ
売り上げランキング: 6628

関連エントリー

  1. twitter API (Search API Methods)
  2. twitter API (REST API Methods) でpublic_timelineを表示
  3. WordPressプラグインX個
  4. HTTP_OAuthで認可を受けて twitter API (REST API Methods) を使う
  5. jQuery mobileでボタンを無効化/有効化したい
This entry was posted in 未分類 and tagged , , , , . Bookmark the permalink.