プラグインを使用しないでソーシャルボタンをWordPressに設置する方法についてのメモです。Twitterやfacebookなど、ひとつひとつ設定してコードを取得するのが大変なので、ひとくくりにして単純にコピペで使えるようにしました。このサイトについてるソーシャルボタンのようにオーソドックスな仕上がりになっています（2015/05月時点）。
【 環境 】WordPress : Twenty Fourteen
スポンサーリンク
[adSense]
function.phpに追記しよう！
やることとしては、上にある目次のような内容になってます。
まずfunction.php（子テーマ）ファイルに下記を追加します。
// ソーシャルボタン(Vertical)
function SocialButtonVertical()
{ ?>
<ul>
<li>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false">&nbsp;
</div>
</li>
<li>
<a href="https://twitter.com/share" data-count="horizontal" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-lang="en">&nbsp;</a>
</li>
<li>
<div class="wsbl_hatena_button"><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="standard" title="はてなブックマークに追加"> <img src="//b.hatena.ne.jp/images/entry-button/button-only@2x.png" alt="はてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
</div>
</li>
<li>
<div class="g-plusone" data-size="medium" data-href="<?php the_permalink(); ?>">&nbsp;
</div>
</li>
</ul>
<?php }
※functions.phpファイルの扱いにはバックアップをとって、十分にご注意ください。詳細については「WordPress functions.php 子テーマ作成～編集、追記方法について エラーを防ぐ！｜WP カスタマイズ」をご参考に。
もしWordPressを絶対リンクではなく意図的に相対リンクにしている場合は、Tweetボタンのバルーンが表示されずキチンと機能しません。
６行目のリンク
data-url="<?php the_permalink(); ?>"
を↓
data-url="http://example.com<?php the_permalink(); ?>"
のようにURLを追加しておくことで、不具合を防ぐことができます。
※WordPressが絶対リンクの場合は何もしないで大丈夫です。
content.phpに追記しよう！
content.php（子テーマ）のソーシャルボタンを配置したい場所、例えばTwenty Fourteenの記事下に挿入する場合は…
) ); ?> </div><!-- .entry-content --> <?php endif; ?> <?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?> </article><!-- #post-## --> </pre> 46行目と47行目の間に下記のコードを挿入して、function.phpのコードを呼び出します。 <pre class="brush:php"> <div class="scl_btn"> <?php SocialButtonVertical(); ?> </div>
footer.phpに追記しよう！
footer.php（子テーマ）ファイルの</body>タグのすぐ上に下記を追加してJava Scriptを読み込みます。
<!-- Facebook SclBtn -->
<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.async = true;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Twitter SclBtn -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- HtnSclBtn -->
<script type="text/javascript" src="//b.hatena.ne.jp/js/bookmark_button.js" charset="utf-8" async="async"></script>
<!-- GglOneBtn -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js" async="async">{lang: 'ja'}</script>
ソーシャルボタンのJavaScriptはページの読み込み時間を高速にする為に、「非同期読み込み」が可能です。
FacebookやGoogle+1では、非同期の読み込み方法が推奨されているようです。
例えばFacebookやTwitterの場合、js.async = true; を追加、はてなとgoogle＋1は、async=”async”を追加することで非同期化します。
style.cssに追記しよう！
各ソーシャルボタンの配置などのレイアウトはstyle.cssに追記して調整します。
下記はご参考まで。幅やマージンなどはブログなどのデザインに合うように編集してください。
/*social button******************/
.scl_btn {
max-width:652px;
margin:0 30px;
padding:8px 0 5px 0 !important;
border-top:1px dashed #ddd;
border-bottom:1px dashed #ddd;
}
.scl_btn ul {
list-style-type:none;
margin-left:0px;
}
.scl_btn li {
float:left;
margin-right:10px;
}
.fb_iframe_widget span {
vertical-align: baseline !important;
margin-left:0 !important;
}
ひとこと
ソーシャルボタンの設置については新旧いろいろな方法があって、どうしたものかと混乱した結果、コピペですぐできる方法を備忘録として残すことにしました。
自分の場合は「すぐ貼ってCSSで整えて完成！」が理想なので、各ソーシャルボタンのバルーンの位置など、表示するデザインにあきた場合は、またひとつひとつ設定することになると思います。
あと、メンテナンスは自分ですることになるので、Facebook などの仕様変更の情報はキャッチできるようにして対応します。
コメント