web-dev-qa-db-ja.com

モバイルユーザーがFacebookページタブにアクセスできない

私は解決策に資金を提供するために見ることができない問題を抱えています。 Facebookページにタブがあります（静的HTMLの1つ：iFrameアプリ）。 PCからアクセスするのに問題はありませんが、モバイルデバイスからタブにアクセスしようとすると、次のように表示されます。

「リクエストしたページは見つかりませんでした。前のページに戻る」

モバイルデバイスでアクセス可能なタブを作成する方法、または単に外部ドメインにリダイレクトする方法はありますか？

ありがとう！

facebookiframetabsfbml
22
r553

モバイルでアクセス可能なFacebookページタブアプリを作成する方法

ページタブアプリを作成するために、モバイルアクセス可能バージョン（Facebook iFrame経由ではなく、直接アクセスされる外部Webサイト）。アプリ開発者設定で3つの異なる「プラットフォーム」を追加して構成する必要があります。これらは次のように構成する必要があります。

ページタブ

これを通常どおりに構成します。

  • ページタブ名：ページタブに表示する名前
  • ページタブURL：ページタブアプリをホストしているURL（例 http://myapp.com/page-tab ）
  • セキュアページタブのURL：同じことですが、httpsが先頭にあります（例 https ：//myapp.com/page-tab ）

ウェブサイト

ここで、モバイルサイトのURLを構成します

  • モバイルサイトのURL：これは、モバイルユーザーをリダイレクトするURLです（例 http：/ /myapp.com/mobile-version )
  • サイトURL：Facebook Connectに使用されます。FacebookConnectを使用していない場合は、ここにモバイルURLを入力してください

Facebookのアプリ

これがアプリへのゲートウェイになります。 モバイルユーザーこのページに到着すると、モバイルウェブサイトにリダイレクトされます。 JavaScriptを使用して、デスクトップユーザーをFacebookページタブアプリにリダイレクトできます 。

  • Canvasアプリページ：これは http://apps.facebook.com/my-app-名前空間 、これはFacebookのウォールや広告、またはページタブにリンクしたい他の場所に投稿するリンクです
  • Canvas Url：これは、キャンバスアプリページにiframeとして埋め込まれるアプリのページへのリンクです。このページを使用して、JavaScriptを使用してページタブにリダイレクトします。例えば http://myapp.com/canvas-redirect
  • Secure Canvas Url：これは上記と同じですが、httpsを前に付けます（例： " https：/ /myapp.com/canvas-redirect ")

キャンバスリダイレクトスクリプト

デスクトップブラウザでキャンバスアプリにアクセスしたユーザーをページタブアプリにリダイレクトする必要があります。 iフレーム内にロードされるため、これを行う唯一の方法はJavaScriptを使用することです。

これは、Canvas Url（ http://myapp.com/canvas-redirect 上記）のコンテンツになります：

<script>top.location="http://facebook.com/page_tab_url/app_1234"</script>

「top.location」に注意してください-これにより、iframeだけでなく、ページタブに親ウィンドウがリダイレクトされます。ユーザーがデスクトップブラウザーのキャンバスページに到着すると、JavaScriptを介してPage Tab Appにリダイレクトされます。 モバイルユーザーは、指定したモバイルサイトのURLにFacebookによってリダイレクトされます上記。

サンドボックスモードでのテスト

アプリがサンドボックスモードの場合、アプリの管理者、開発者、またはテスターのみが表示できます。特に、Facebookにログインしていないユーザー、またはFacebookにログインしているがアプリの管理者またはテスターではないユーザーは、アプリキャンバスページにアクセスできません-404エラーが表示されるだけです。アプリがサンドボックスモードのときにモバイルリダイレクトをテストするには、アプリの管理者、開発者、またはテスターであり、Facebookのモバイルサイトにログインしていることを確認する必要がありますお使いの携帯電話のウェブブラウザ-iOSのSafariとAndroidのChrome。それはnotお使いの携帯電話でFacebookモバイルアプリにサインインするには、ブラウザを使用してログインする必要があります。

ユーザーロールに関するメモ

アプリ設定の「ロール」タブをクリックして、アプリのユーザーロールを設定できます。 FacebookユーザーまたはFacebookグループを任意のロールとして追加できます。 （グループを追加すると、そのグループのすべてのユーザーがアプリで指定されたロールを持ちます）。ユーザーがアプリで特定の役割を持つためには、次のことを行う必要があります。

（更新された開発設定UIと可読性を反映するために編集されました）

58
Ben

これの更新として、Facebookはハッキングを必要とせずに自動的にWebサイトにリダイレクトします。

これを行うには、アプリにウェブサイトプラットフォームを追加し、モバイルURLをそこに配置してください。

3
Andrew Mallonee

モバイルでページタブにアクセスする方法を見つけるのに苦労しました。前のコメントでベンに感謝したので、方法を見つけました。まず、携帯電話でページタブにアクセスできないため、ページタブがソースを取得する場所をポイントする必要があります。キャンバスを使用している場合はFacebookがそれを行いますが、デスクトップコンピューターでアクセスすると、ページタブではなくキャンバスリンクにリダイレクトされます。これが修正方法です。

-

1）[設定]-[基本]でアプリ（Facebook開発者）にアクセスします

2）ページタブURLをページタブセクション（何か http://yourpagetab.yourdomain.com ）のように、モバイルサイトのURLにモバイルWebセクション。

3）FacebookのAppセクションでも同じことを行いますが、ページタブにポイントする代わりに、リダイレクトファイルを使用する必要があります。使用してみましょう http://yourpagetab.yourdomain.com/redirection.php?fb

リンクの最後に？fbを使用する必要があることに注意してください。何もしませんが、Facebookはそれを望んでいます。実際には、何でもかまいません。

4）そのredirection.phpファイルを作成し（？fbを追加しないでください）、このコードを追加します

<script>top.location="http://facebook.com/your_fb_page/your_page_tab"</script>

/ your_fb_page/your_page_tabをページタブへのリンクに置き換えます。

5）保存してください！

-

今、あなたがしなければならないのは、Facebookが提供するCanvas PageURLを使用することです（Facebook上のアプリ）。ユーザーがそれをクリックしてデスクトップにいる場合、ページタブにリダイレクトされます。モバイルの場合は、ページタブをホストしているWebサイトにリダイレクトされます。

ファンゲートを使用している場合（ユーザーはページタブにアクセスする前にページを気に入る必要があります）：モバイルユーザーがファンゲートで立ち往生するため、これは機能しません。

これを実現する唯一の方法は、ファンゲートを無効にするか、Mobile Detectを使用して（Githubで検索できます）、モバイルにいるユーザーに対してのみ無効にすることです。ページタブをモバイルユーザーと連携させたい場合は、少額の費用がかかります。デスクトップユーザーは、ページタブを表示するためにページを気に入ってもらう必要があります。

1
Jason Lemay

このようなリンクを使用して、facebookによるモバイルのリダイレクトを停止することもできます

https://www.facebook.com/MyAppName/?sk=app_11111-APP-ID-11111&ref=ts

0
Alex Halo

リダイレクトに使用するphpコードは次のとおりです。

// Mobile_Detect
require 'Mobile_Detect.php';

$detect = new Mobile_Detect;

if (strpos('https://' . $_SERVER['HTTP_REFERER'] . $_SERVER['REQUEST_URI'], 'facebook.com') !== false && $detect->isMobile()) {
    echo '<html><head><script type="text/javascript">window.top.location.href = "https://yourappurl.com";</script></head><body></body></html>';
    die();
}
0
ghuroo

私は静的HTMLの開発者の一人です。実際、モバイルとデスクトップで機能するスマートで短縮されたリンクを生成する機能がアプリに組み込まれています。エディターの上部にある「+」アイコンをクリックすると、共有可能なリンクが表示されます。

そのリンクを使用する場合は、小さな画面でタブがよりよくフィットするように、少し余分な魔法をかけます。

編集：iOSデバイスでは不具合があったため、特別なフォーマットは破棄しました。

0
jpadvo