wordpressのインデックステンプレートにソーシャルボタンを追加

wordpressのインデックステンプレートにソーシャルボタンを追加ASのおもちゃ箱開発ブログ各記事ページに設置するのは、プラグインで簡単にできますが、インデックステンプレートに設置できるものは見つからなかったので、自力で設置しました。
Facebookいいね!、Twitter、はてぶ、g+です。
mixiチェックは、パートナー登録が必要だったので、未確認。
Facebookのapp_idは、facebook developersで取得して、書き換えてください。

メインインデックスのテンプレート (index.php)
まずは、the_content()の下に以下のように設置。

<?php the_content(); ?>
<iframe src="//www.facebook.com/plugins/like.php?app_id=(app_id)&amp;href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>

<a href="https://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?> | <?php bloginfo('name'); ?>" data-url="<?php the_permalink(); ?>" data-lang="jp">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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!--
<a href="http://static.mixi.jp/share.pl" class="mixi-check-button" data-button="button-1" data-key="(data-key)" data-url="<?php the_permalink(); ?>" data-show-count="yes">チェック</a><script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
-->
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php the_title(); ?> | <?php bloginfo('name'); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-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>
<div class="g-plusone" data-href="<?php the_permalink(); ?>" data-annotation="inline" data-width="250"></div>

次に、get_footerの前に以下のように設置。

<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<?php get_footer(); ?>

コメントを残す

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


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>