WordPressにFacebookのlike(イイネ)ボタンとmixiチェックボタンをつけてみた

最近、mixiチェックという新機能がリリースされました。自分が気に入ったサイトやニュースを見つけた時に「チェック」ボタンを押すと、つながっている友だちにそのサイトのタイトルとURLなどを教えられるというサービスです。

これはFacebookの「イイネ!(Like!)」ボタンを模したもの。twitterで言えば、気に入ったサイトをツイートするようなものです。下のようなボタンがコンテンツの下部や上部に並んでいるのを見たことがある方もいらっしゃるのでは。

facebook_blog.png

対応しているブログやサイトもちょこちょこ見かけていて、気になっていたので、自分のブログにも導入してみることにしました。



Facebookのイイネボタンをつける方法

【簡単】WordpressにFacebookのLike(いいね)ボタンを設置する方法 | Last Day. jpを参考にさせていただきました。

まずは、アプリケーションを作成 – Facebook開発者で登録をすませます

facebook_making.png

facebook_key-2.png

なんか日本語がおかしいですが、この最後の「アプリの秘訣」がApp IDです。Wordpressのプラグインを動かすのに必要となるのでコピーしておきましょう。このApp IDはFacebook | 開発者で確認することが出来ます。

次に、WordPress › Facebook Like Button « WordPress Pluginsをpluginフォルダにインストールして、プラグインを有効化すると、Wordpressのサイドバーに「Facebook Like」というタブが作られます。

そこを開いて設定します。

wordpress_facebook.png

AppID for XFBML versionのところと、Admin IDのところに、先程コピーしたApp IDを入れます。後は自分の好みで設定してください。私は単体記事のみ表示させたいので、「Show in Posts」にチェックを入れ、位置はコンテンツの下がいいので「After Content」を「Left」に。

Facebookのイイネボタンの設置はたったこれだけ。反映されるまでちょっとだけ待つ必要がありますが非常に簡単。このイイネボタンを押すと

facebook_blog_iine.png

こんな風に誰が「イイネ!」と言ってくれたのか一目瞭然。Facebook上でもつながっている人たちのトップに最新情報として、誰がどんなサイトを「イイネ」と言ったのかが掲載されます。

mixiチェックボタンをつける方法

mixiチェックをWordpressに導入してみた | ueblogを参考にさせていただきました。

まずはmixiでも同様に開発者登録をしなければいけません。「設定変更」→「その他変更」から「[mixi] Developer登録」を行ってください。名前や住所、携帯アドレス等を登録すると、携帯(iPhone)にDeveloper登録メールが届くのでURLをクリックして完了。

Developer dashboardにアクセスして、上部の「mixi Plugin」の方をクリック。新規サービス追加で自分のサイトを登録します。

mixicheck_plugin.png

サービス名、URL、URL許可リストを登録するのですが、ここをちゃんとしておかなくて私は「不正な投稿内容のため、チェックできません。」を言われて悪戦苦闘しちゃいました。ご注意を。

mixicheck_settei.png

ま、単に「www」をつけるのを忘れていただけなのですが…。そうすると認証情報として「チェックキー」が発行されるのでこれをコピーしておきます。

後は簡単。Downloads for takimo’s mixi-check-for-wordpress – GitHubでmixiチェックのプラグインをダウンロードして、pluginフォルダにインストールして有効化。

facebookプラグインと同様に、サイドバーにタブができるので、そこをクリックして、チェックキーを入れます。後はどんなボタンにするか決定して保存。そして、埋め込みコードをクリック。

mixiplugin.png

そこに書いてある通り、header.phpとsingle.phpを編集して、埋め込みコードを追加しておきます。

single.phpの入れる位置としては、

<?php		the_content('続きを読む >>'); ?>
</div>

の下あたりに

<!-- mixiボタン-->
<?php get_the_mixi_check_button_code(); ?>
<!-- mixiボタンend-->

と入れておくのがベストかと。

wp.vicunaのテーマを利用している場合、ボタンのborderがついてしまうので、wp.vicunaフォルダ内の style-flat>subSkin>1-subSkin.cssに「Link img」を指定しているところがあるので、そこに

div.entry a img {
	border: none;
}
div.entry a:hover img {
	border: none;
}

としておきました。

これでこの記事の下にちゃんと表示されているはずです。このブログと色んなソーシャルサービスがつながっていくのが楽しみです。

この記事を書いている「そら」って誰?

大阪在住、30代後半。今は子育て期間でいろいろお休み中。美味しいものをもぐもぐするのが趣味。カメラはオリンパス OM-D E-M5。訪れたお店やお気に入りの雑貨、レシピなど色々書いてます。さらに詳しく知る




このサイトに掲載されている文章および画像、すべての著作物はsorariumが著作権を保有しています。適正な引用以外での無断転載・不正利用は禁止いたします。また、まとめサイトやSNS(twitter、instagram等)での使用を許可していません。詳しくは画像・文章についてをご覧ください。

Comments are closed.