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

やったことメモ
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&send=false&layout=standard&width=360&show_faces=true&action=like&colorscheme=light&font&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;
}
参考サイト
- はてなブックマークボタンの作成・設置について
- Twitter / Twitter buttons
- +1 Your Website – Google
- Like Button – Facebook Developers
本格ビジネスサイトを作りながら学ぶ WordPressの教科書
posted with amazlet at 12.04.11
プライム・ストラテジー株式会社
ソフトバンククリエイティブ
売り上げランキング: 6628
ソフトバンククリエイティブ
売り上げランキング: 6628
関連エントリー
