タグ : facebook

[WordPress] All in One SEO Pack で Facebook og:image をいい感じに表示する設定方法

WordPress プラグイン All in One SEO Pack の「ソーシャルメディア」機能を利用して、Facebook og:image をいい感じに表示する設定をしました。

まず、All in One SEO の [機能管理] メニューをクリックして、[ソーシャルメディア] の項目の [Activate] ボタンをクリックします。

All in One SEO Pack - Social media - before activate

[ソーシャルメディア] を [Activate] すると [ソーシャルメディア] メニューが追加されます。

All in One SEO Pack - Social media - side menu

[Select OG:Image Source] から [First Attached Image] を選択して、ページ下の [設定を更新 »] ボタンをクリックします。

All in One SEO Pack - Select OG-Image Source

この状態で「Sharing Debugger – Facebook for Developers」の機能を使って確認すると、Select OG:Image Source の設定を変更する前が下記で、

Facebook Sharing Debugger - before

Select OG:Image Source 設定変更後は、下記のように記事中の1枚目の画像が og:image に利用されるようになりました。

Facebook Sharing Debugger - after

All in One SEO Pack のソーシャルメディア機能には、他にもたくさん機能があるみたいなので積極的に活用していきたいです。

[Facebook] ページタブアプリ(iframe) でリダイレクト(redirect)できない問題と解決方法

Facebook のページタブアプリ(iframe) にて、リダイレクト(redirect)処理を実行すると、画面が真っ白になって何も表示されない問題でハマりました。

■ サーバーの request/response ログ

HTTP/1.1 302 Moved Temporarily
P3P: CP=”IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT”
Location: https://www.facebook.com/pages/My-Page/xxxxxxxxxxxx?sk=app_xxxxxxxxxx
Content-Type: text/html; charset=utf-8
X-UA-Compatible: IE=Edge
Cache-Control: no-cache
X-Request-Id: 8700a35ce62854a9d99abc225bbb9903
X-Runtime: 0.002538
Connection: close
Server: thin 1.3.1 codename Triple Espresso

<html><body>You are being <a href="https://www.facebook.com/pages/My-Page/xxxxxxxxxxxx?sk=app_xxxxxxxxxx">redirected</a>.</body></html>

原因は、ifranme 内からリダイレクトを行なっているせいでした。

a タグに、target=”_top” を指定して、フレーム解除してやればOKです。

■ エラーで動かない例

<a class="btn" href="https://graph.facebook.com/oauth/authorize?client_id=xxxxxxxxxxxxxxx&redirect_uri=https%3A%2F%2Flocalhost%3A3443%2Fcallback&scope=email">Facebook Auth</a>

■ 解決した例(target=”_top” を追加してる)

<a class="btn" href="https://graph.facebook.com/oauth/authorize?client_id=xxxxxxxxxxxxxxx&redirect_uri=https%3A%2F%2Flocalhost%3A3443%2Fcallback&scope=email" target="_top">Facebook Auth</a>

以上です。