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

このエントリーをはてなブックマークに追加

よく使う3つのソーシャルボタンをWordpressに挿入する際のソースと注意点を、
忘れないようにまとめておきました。←いつも忘れます…//

Facebook

●Facebook開発者ページにてアプリを作成する(新規の場合)
https://developers.facebook.com/apps
●Facbookソーシャルプラグイン
https://developers.facebook.com/docs/plugins/

1)<body>直下にFacebookのスクリプト挿入
2)プラグインを表示したい場所にコードを挿入
→Wordpress用にリンクを修正:

data-href="<?php the_permalink(); ?>"

注:Commentsboxをスマホで閲覧した際に、Commentsbox下に余白が出る
この問題については、こちらのサイトで解決しました▼
サイトに設置したFacebookのコメント欄をPCの時だけ表示してスマートフォンでは出さないJavaScriptのコード – 頭ん中
http://www.msng.info/archives/2013/04/facebook-comments-only-on-pc.php

twitter

twitterウィジェット(タイムライン)
設定>ウィジェット>新規作成より
プラグインを表示したい場所にコードを挿入

ツイートボタン
https://twitter.com/about/resources/buttons
プラグインを表示したい場所にコードを挿入
※「ページのURLを使う」がある為、Wordpress用の設定や修正の必要は無し

はてなブックマーク

はてなブックマークボタン
http://b.hatena.ne.jp/guide/bbutton?al=0
プラグインを表示したい場所にコードを挿入
→Wordpress用にリンクとタイトルを修正:

a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"
data-hatena-bookmark-title="<?php wp_title(''); ?>" 

ご意見・ご感想は下記にコメント頂くか、
@moco2
までメッセージやツイート頂けると嬉しいです。

Comments are closed.