FaceBookOGP管理者IDとアプリIDを取得する方法(Simplicity)

シェアボタンを押して情報を共有しましょう。

frogs-1037853_1920

ども、こんにちはっ!わさび味のお菓子が大好物の橋尾渡です!(笑)

さて、今回はSimplicityのカスタマイズ内にある「FacebookOGP管理者ID(fb:admins)」と「FacebookOGPアプリID(fb:app_id)」のID取得方法について記事にしていきたいと思います!

Simplicityのカスタマイズを見ていると、SNSメニューの中にFaceBookOGPってのがありますよね?これです。↓

スクリーンショット_052416_042612_PM

今までこの項目は、未記入のまま放置状態でした。以前記事にした、JetPackの自動投稿で画像が全て404が表示になってしまうという謎の不具合が、もしかしたらIDを記入することによって解決できるかもしれない!と思ったので今回IDの取得をしてみようと思った次第です。

そもそもOGPってなんなんや?って思いませんか?なので、まず最初にOGPについて説明していきますね。

スポンサーリンク
レクタングル(大)広告

OGPとは

OGPについて詳しく解説している、Tadashiさんの記事を引用させていただきます。

OGP(Open Graph protocol)は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのページのタイトル・URL・概要・画像を正しく伝えるためのHTMLの<head>…</head>内に含めるmeta情報で<meta>要素を使って記述するものです。

Facebookなどでサイトが共有された時、リッチ表示するOGPの設定

SNSにシェアしたとき、情報を正しく伝えると書かれていますね。つまり、このOGP設定を済ましてしまえば、404表示も解決できるかもしれないということです。404表示になるってことは、情報が正しく伝わっていないってことですもんね。

もし、これでダメだったらFaceBook公式プラグインを使ってみようかと思います。情報を伝えるってことは多分ですけど、画像もちゃんと表示されるはずだと思います。まぁ、これからそれを実証していけばいいのでさっそくOGP設定をやっていきましょう!

管理者IDを取得方法

まず先に、管理者IDを取得していきますので、通常のFaceBookアカウントに移動しましょう。(※FaceBookページではないので注意してください。)

スクリーンショット_052616_101453_AM

次に、ブラウザの上部にでてくるフェイスブックのURLをコピーしておいてください。そして、こちらのサイトを開きましょう。→『Find my Facebook ID

スクリーンショット_052616_102309_AM

英字だけのサイトが開きましたね。では、先程コピーしたURLを空欄に貼り付けて「Find numeric ID」ボタンを押してください。

スクリーンショット_052616_102721_AM

ボタンを押したら、あなたのFaceBook管理者IDがでてきますので、IDをコピーしてSimplicityのカスタマイズに貼り付けていきましょう!

スクリーンショット_052616_103024_AM

Simplicityのカスタマイズを開いたら、SNSからFaceBookOGPの項目までスクロールしてください。そして、空欄に先程の管理者IDを貼り付けて保存を押します。

これで、管理者IDの取得方法と、Simplicityに設定するまでの流れは終わりです。次に、アプリIDの取得について説明していきます。

アプリIDの取得方法

では、アプリIDの取得する流れをこれから書いていきます。まず、こちらにアクセスしましょう。→『すべてのアプリ 開発者向け

WS000142_052616_114428_AM

開発者ページを開いたら、デヴェロッパー登録をするため右側の登録ボタンを押してください。

WS000143_052616_115412_AM

パスワードを入力しろとポップアップがでてくるので、あなたがFaceBookに登録した時のパスワードを入力して、送信ボタンを押してください。

WS000144_052616_115610_AM

開発者として登録するため、規約に同意しますか?というメッセージですね。「いいえ」という場所をクリックして「はい」にしてください。そして「次へ」を押す。

WS000146_052616_115930_AM

規約に同意したら、次にあなたの携帯電話の番号を1番に入力してください。入力が終えたら、2番の「SMSで受け取る」というボタンを押してください。そうすると、携帯電話に確認コードが送られてくるので、それを3番に入れてください。そして、登録ボタンを押して先へ進みます。

WS000149_052616_120253_PM

登録が終わりました。完了ボタンを押すと、画面が遷移します。

WS000150_052616_120409_PM

Add a New Appという画面に変わりましたね。そしたら、「ウェブサイト」をクリックしましょう。

WS000151_052616_120549_PM

新しいアプリIDを取得するため、サイトを登録していきましょう。サイト名を記入したら、アプリIDの作成ボタンを押してください。

WS000152_052616_120720_PM

サイト名を入れたら、次にメールアドレスとカテゴリを選択して「アプリIDを作成」ボタンを押します。

WS000155_052616_120847_PM

すると、セキュリティチェックのため選択問題を提出されます。なので、該当する画像をクリックしていきましょう。

WS000157_052616_121105_PM

そうしたら、ようやくアプリIDの取得ができます。下にある「appId」という行が、あなたのアプリIDになります。それを、Simplicityのカスタマイズに貼り付けてあげましょう。

スクリーンショット_052616_121243_PM

このように、管理者IDとアプリIDを記入することができたら、今回の目標は達成です。最後にしっかりと保存だけしておきましょうね。

まとめ

これで、JetPackのパブリサイズ共有で404表示が直ったら完璧です。一度投稿して、結果を追記という形で報告します。もしも、ダメなら最初にも言った、FaceBookの公式プラグインをインストールして、そこにアプリIDを入れていきたいと思います。

それでは、そろそろFaceBookOGPの管理者IDとアプリIDの取得方法についての記事を終わりたいと思います。ありがとうございました!

2016/05/26/ 12:20 追記

スクリーンショット_052616_122046_PM

結局、こんな感じで関係のない画像が表示されています。結果としては、OGP設定を行ってもパブリサイズ共有では、しっかりと情報が伝わらないということですね。FaceBook側で細かく設定するのかもしれません。ではまた、今度それについて記事にしてみたいと思います。それでは、またお会いしましょう。さようなら!

2016/05/30/ 18:30 追記

あれから、少し経ちました。OGP設定をしてから少し変化があったようです。

スクリーンショット_053016_063111_PM

このように、ちゃんとアイキャッチ画像が表示されました。前回の追記時は、1回目の投稿だったから、不具合が続いたのかもしれません。理由はよくわかりませんが、無事にアイキャッチ画像を表示することができたので、やはりOGP設定のおかげではないでしょうか。

アイキャッチ画像が無事表示された

5月30日に投稿した記事のアイキャッチ画像が、ちゃんと設定したものになっていました。あのあと、少し開発者ページをいじっていたんですよね。それで、何をいじったのかをこれからご説明したいと思います。

その、いじった設定でアイキャッチ画像が正常に表示されるようになったかは判断できませんが、できることはやっておきましょう。

スクリーンショット_053016_065022_PM

開発者ページを開き、右上にある「マイアプリ」をクリックしてください。すると、アプリ一覧が表示されます。あなたの作ったアプリタイトルをクリックしてください。

スクリーンショット_053016_064600_PM

アプリをクリックすると、ダッシュボードが開きます。そして、左側にあるメニューの「アプリレビュー」を選択しましょう。

スクリーンショット_053016_064704_PM

アプリのステータスについて、公開するかしないかについての項目があります。ここを「はい」にして公開をしておきましょう。こうすることによって、アプリが公開モードになってアイキャッチ画像が無事に表示されるようになりました。

きっと、これが原因ですね。なので、404表示で困っていると言う人は、一度この設定をやってみてください。では、終わります。ありがとうございました!

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアボタンを押して情報を共有しましょう。

フォローする