‘Google+’

WordPressにソーシャルボタンを設置する

2012-07-04

WordPressでのソーシャルボタンの設置方法

WP Social Bookmarking Light等のプラグインを使って設置してもいいのですが余計なプラグインは使いたくないのでプラグインを使わない方法。

下記コードをヘッダー(header.php)またはフッター(footer.php)に貼り付ける。

※ (ppId=***************の*にはFacebookのAppIDを入れる。

<!-- Facebook -->
<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&appId=***************";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<!-- 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>
 
<!-- はてなブックマーク -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
 
<!-- Twitter -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 
<!-- Evernote -->
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

functions.php に下記のコードを貼る

// ソーシャルボタン
function socialbutton()
{ ?>
    <ul >
        <li class="hatebuButton"><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" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
        <li class="tweetButton"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="" data-lang="ja" >ツイート</a></li>
        <li class="likeButton"><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="72" data-show-faces="false"></div></li>
        <li class="gplusButton"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
        <li class="EvernoteButton"><a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a></li>
    </ul>
<?php }

ソーシャルボタンを貼り付けたい位置に下記コードを貼る。(single.phpなど)
<!-- ソーシャルボタン -->
<div class="socialbutton">
<?php socialbutton(); ?>
</div>

ソーシャルボタン用のCSSをstyle.cssなどに追加
/* ソーシャルボタン */
div.socialbutton ul{
margin: 0;
padding: 0;
}
div.socialbutton li{
list-style-type: none;
float: left;
margin-right: 10px;
}

以上です。

Facebook