stingerはいいね!を押しても投稿欄が出ない

コスメサイトで使っているWordPressの国産無料テンプレート「Stinger」は、最初から、ソーシャルボタンがつけてあって、便利なのですが、Facebookのいいね!を押しても、コメント欄が出ないのが不満です。

そこで、ソーシャルボタンは2つありますが、記事下だけでも、見た目はそのままにコメント欄が出るようにカスタマイズしました。

いいね!ボタンに投稿欄が出るようにする

ちなみに、この写真はこの記事。

 オラクルの化粧水がアトピー肌に心地よい!

今回のカスタマイズは、こちらのカスタマイズがしてあることが前提です。

 わかりやすい!WordPressでFacebookのOGP設定!プラグインを使わない方法

OGP設定するときの、ワードプレスに情報を設定するスクリプトで設定したコードを使うからです。

このカスタマイズをする場合は、不具合が出たら元に戻せるように、バックアップをとるなどして、必ず復元できる状態にしてから自己責任でやってください。

では、カスタマイズ行ってみます。

snsボタンは2カ所

stinger3でsnsボタンは別途テンプレート化してあります。

テンプレートは2つあります。

sns.php
sns02.php

です。

このうち、sns.phpの方が記事下のテンプレートになります。02の方は、追尾ソーシャルボタンのテンプレートです。

Like Buttonのコードを取得

今度は、以下のFacebookページでLikeButtonのコードを取得します。英語のページですが、たいした設定はしないので、大丈夫です。

 Like Button|Facebook Developers

入力項目は以下の通りです。

URL to Like:【ブログのURLを入力、あとで修正】
Width:50(元テンプレのサイズと同じに)
Layour:box_countに変更
Action type:like(デフォルトのまま)
Show:Friend’s Faces:【チェックボックスをオフに】
Include Share Button:【チェックボックスをオフに】

コードを取得する【GetCode】ボタンを押すと、プラグインコードが表示されますが、ここからが肝心です。

XFBMLコードを取得

いくつかコードが並んでいますが、現時点ではstinger3はHTML5ではないので、XFBMLコードを使います。

stinger3でコメント欄が表示されないのは、たぶんIFRAME版を使っているからではないかと思われます。

なお、本カスタマイズは2013/11/24現在でのカスタマイズなので、後日コードが変更になる場合もありますので、気をつけてください。

また、文中のコードは記事内で誤作動しないように、<>を全角にしてあるので、半角にして考えて下さい。

では、事前にしてあるカスタマイズで使ったアプリIDをプルダウンメニューから選びます。

bodyタグ直前のコード

XFBMLコードを設置する場合は、3カ所設置が必要です。

まずは、headerテンプレートをカスタマイズします。headerテンプレートの中から、

<body>と書かれている部分を見つけます。

探してみると、実際には、

<body <?php body_class(); ?>>

と、書いてあるところが見つかります。

このタグの直後に、最初のコードをはります。

xmlの名前空間追加

次に、旧バージョンのIEでXFBMLを動作させるために必要と書いてあるコードを同じヘッダーテンプレートに追加します。

ヘッダーテンプレートの一番上まで戻ると、

<html <?php language_attributes(); ?>>

というコードがあるので、ここに2番目のコードを追加します。追加すると、こんな感じ?

<html <?php language_attributes(); ?> xmlns:fb=”http://ogp.me/ns/fb#”>

プラグインコードのさしかえ

今度は、実際にプラグインを表示する部分を修正します。

sns.php

のファイルを表示させます。

各種ソーシャルボタンがリスト化されて、並んでいますが、2つめがfacebookです。

ここを、3つめのコードに差し替えます。

コードを差し替えたら、URL部分を修正します。

とりあえず、ブログのURLが入っている部分を見つけたら、そこを

<?php echo $url ?>

と修正します。修正したらこんな感じ?

<li>
<fb:like href=”<?php echo $url ?>” width=”50″ layout=”box_count” action=”like” show_faces=”false” share=”false”></fb:like>
</li>

コピペするときはかっこを半角に直してください。

これは、最初にも書きましたが、事前にOGPのカスタマイズをした時に設定したコードを使っているので、事前のカスタマイズが前提条件です。

そのカスタマイズをやってないと、動かないコードです。

Facebookのいいね!を押したら、投稿欄が出るようにするカスタマイズまとめ

ということで、Facebookのいいね!を押したら、投稿欄が出るようにするカスタマイズでやったことをまとめてみました。

なにぶんまだ勉強中なので、なんか違ってたらごめんなさい。

でも、あとでよく考えると、Facebookのコメント欄つけたのでもいいんじゃないか、と思ったりw

とりあえず、コメント欄が出現するようになったので、よしとしよう。

うん。