最近四半期ぐらいに急激に人気の上がった投稿に「サイトに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 URLにPage Pluginを貼り付けたいURLを入力して NEXT をクリック
ページの下の方にNext Stepsが表示されるので、Social Pluginsをクリック
こんな感じのページになるので、
Page Plugin の Web をクリック
このページに移動します。ここで
こんな感じに FacebookページのURL、幅、高さ を入力すると下にプレビューでどんな感じに埋め込めるのかが表示されます。
この内容で良ければ
Get Code をクリックして
コードを表示します。この１と２の部分のコードを使うのでコピーしてテキストエディタなどに貼り付けておきます。
FacebookのPage PluginをWordPressで表示する方法
コピーした１のソースをテーマのファイルに貼り付けます。
使っている子テーマの中で <body が使われているファイルを見つけます(子テーマとしているのは親テーマで修正してもアップデートがかかると修正が失われてしまうためです)。なければ親テーマを探して <body が使われているファイルを子テーマにコピーします。
私が使っているtwentyfourteenの子テーマの場合は header.php にありました。子テーマのheader.phpを開いて、
<body <?php body_class(); ?>>
という行の下に１のソースを貼り付けて保存しました。
ウィジェットに表示する２の部分を貼り付けます。
ダッシュボード 外観＞ウィジェット をクリックして、
テキストウィジェットを
メインサイドバーにドロップします
こんな感じに入力します。まだ自分だけで確認したかったので、公開状態をクリックしてユーザーがログイン中のときだけ表示するようにしました。
表画面を見てみると、
プレビューの通りに表示されました。
なぜかJetpackのLIKEボックスウィジェットもきれいになっていた！
ということで、今まで使っていたJetpackのLIKEボックスウィジェットを削除して、Page Pluginのウィジェットの表示に変えようと思いました
ともあれ、今までのJetpackのLIKEボックスウィジェットと比較してみよう、と思ったら
なんということでしょう～きれいになっています。。えっ？どうしてっ？と思ってしばし考えました。そうか。。１の部分のコピーがこのウィジェットに影響してるのでは？と思い、<body の下に貼り付けた１のコードを削除し、元に戻してみました。
思った通り、JetpackのLIKEボックスウィジェットは元の表示に戻りました。新しく追加した部分も１の部分がないと同じように英語になってしまうようでした。
ということは…JetpackのFacebook LIKEボックスウィジェットからPage Pluginにしなくても１を<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_searchlink search=”WordPressデザイン”]
コメント