JetpackのFacebook LIKEボックスの表示を修正する

最近四半期ぐらいに急激に人気の上がった投稿に「サイトにFacebookページを貼り付ける方法がLIKE BOXからPagePluginに」というものがあります。WordPressなどのWebサイトにFacebookページを埋め込む方法が従来のLIKE BOXからPagePluginに変わったというものです。
人気がある投稿をずいぶん前に書いていたですが、このサイトではJetpackのFacebook LIKEボックスウィジェットを使っていてそのままにしていました。当初は問題なく表示されてたのですがきづいたら英語で表示されてしまっていたりして直さなければと思いました。それについて書きます。

紺屋の白袴状態で放って置いたらこうなりました…

「サイトにFacebookページを貼り付ける方法がLIKE BOXからPagePluginに」という記事はもう半年以上前に書いたものです。最近の統計でも

こんな感じに 不動の2位 となっています。記事を書いた頃は

となります。自動的にPage Pluginに戻ります、ということなので今まで設置してあったLIKE BOXはそのままにしておいても自動的に新しいプラグインとしてちゃんと動くと期待したいのですが(^_^;、今時点ではどうだかわかりません。ネットで検索をすると「廃止されるので動かなくなるから早めに置き換えを!」という論調が強いので、もしかすると(まだ、楽観的)動かなくなるかもデス。

こんな風にかいてあったように、動かなくなったら置き換えないとなーと思っていたのですが時期が来てもそのまま動いていたようでした。設置した当初は

こんな感じに表示されていました。切り替わったあとも(たぶん)こんな感じだったと思います。しかし、秋の終わり頃からでしょうか、気づいたら

こんな素っ気ない、英語の…表示になってしまっていました。これは変えなければいけません。

作りかけのFacebookアプリの修正方法

Page Pluginを新しく作るには、「サイトにFacebookページを貼り付ける方法がLIKE BOXからPagePluginに」この記事の通り作成されるといいと思います。なのですが、JetpackのLIKEボックスを使っていた方はあとで衝撃の事実があるのでここまでジャンプしてください(^_^;。

私の場合なのですが、Facebook開発者ページを見ると

このように…山のようにアプリがあります。試しに作ったものや頼まれて作ったページのものなどがごっちゃになっていて訳が分かりません。

その中に「RYUSblogいいね」というアプリがあったので、これが使えるんじゃないかと思ったのですが



Not available to all users because your app is not live
(全てのユーザーに利用不可。なぜならあなたのアプリは生きていない<直訳(^_^;)

という状態のようで使えません。たぶん、新しくPage Pluginを使おうと作りかけていたのが途中になってしまってたようです。これ以上アプリを増やすのもいやなのでこれを修正してみようと思います。

マークをクリックして、

ダッシュボードに移動します。Choose a Platform をクリック

この画面がポップアップするので WWW をクリック

この画面になるので、

一番下のSite URLPage Pluginを貼り付けたいURLを入力して NEXT をクリック

ページの下の方にNext Stepsが表示されるので、Social Pluginsをクリック

こんな感じのページになるので、

Page Plugin の Web をクリック

このページに移動します。ここで

こんな感じに FacebookページのURL、幅、高さ を入力すると下にプレビューでどんな感じに埋め込めるのかが表示されます。

この内容で良ければ

Get Code をクリックして

コードを表示します。このの部分のコードを使うのでコピーしてテキストエディタなどに貼り付けておきます。

FacebookのPage PluginをWordPressで表示する方法

コピーした1のソースをテーマのファイルに貼り付けます。

使っている子テーマの中で <body が使われているファイルを見つけます(子テーマとしているのは親テーマで修正してもアップデートがかかると修正が失われてしまうためです)。なければ親テーマを探して <body が使われているファイルを子テーマにコピーします。

私が使っているtwentyfourteenの子テーマの場合は header.php にありました。子テーマのheader.phpを開いて、

という行の下に1のソースを貼り付けて保存しました。

ウィジェットに表示する2の部分を貼り付けます。

ダッシュボード 外観>ウィジェット をクリックして、



テキスト
ウィジェットを

メインサイドバーにドロップします

こんな感じに入力します。まだ自分だけで確認したかったので、公開状態をクリックしてユーザーがログイン中のときだけ表示するようにしました。

表画面を見てみると、

プレビューの通りに表示されました。

なぜかJetpackのLIKEボックスウィジェットもきれいになっていた!

ということで、今まで使っていたJetpackのLIKEボックスウィジェットを削除して、Page Pluginのウィジェットの表示に変えようと思いました

ともあれ、今までのJetpackのLIKEボックスウィジェットと比較してみよう、と思ったら



なんということでしょう~
きれいになっています。。えっ?どうしてっ?と思ってしばし考えました。そうか。。1の部分のコピーがこのウィジェットに影響してるのでは?と思い、<body の下に貼り付けた1のコードを削除し、元に戻してみました。

思った通り、JetpackのLIKEボックスウィジェットは元の表示に戻りました。新しく追加した部分も1の部分がないと同じように英語になってしまうようでした。

ということは…JetpackのFacebook LIKEボックスウィジェットからPage Pluginにしなくても1を<bodyタグの下に貼り付ければ 今までのJetpackのLIKEボックスウィジェットのまま で表示がきれいになる、ということが分かりました(^_^;。

まとめ:今までJetpackのFacebook LIKEボックスを使っていたサイトの修正は

今までJetpackのFacebook LIKEボックスを使っていたサイトの修正は、

1.FacebookアプリでPage Pluginのアプリを作る。
2.Get Codeで表示される Include the JavaScript SDK on your page once, ideally right after the opening tag. のコードをコピーしてWordPressの<body の下に貼り付ける

だけで、英語になってしまっていたLIKEボックスが日本語に、、というかLIKEボックスだけどPage Pluguinで表示されるようになります(^^)/

[Amazon sponsored link] WordPressデザイン 関連本
兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

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

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る