Как создать мобильное доступное приложение для Facebook-страницы

Чтобы создать приложение с вкладкой страницы, имеющее мобильную доступную версию (внешний веб-сайт доступен напрямую, а не через iFrame Facebook). Вам нужно добавить и настроить 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, если вы не используете Facebook-соединение, просто разместите здесь свой мобильный url.

Приложение на Facebook

Это будет шлюз для вашего приложения. Мобильные пользователи, прибывающие на эту страницу, будут перенаправлены на мобильный сайт . Вы можете использовать javascript для перенаправления пользователей настольных компьютеров на свое приложение Facebook Tab .

• Страница canvasа Canvas : это будет http://apps.facebook.com/my-app-namespace , это ссылка, которую вы опубликуете на стене вашего Facebook или в ваших объявлениях, или где-либо еще, что вы хотите связать со своей вкладкой
• Canvas Url : это ссылка на страницу вашего приложения, которая будет внедрена в качестве iframe на странице приложения canvas. Вы будете использовать эту страницу для перенаправления на вкладку страницы с помощью JavaScript. например, http://myapp.com/canvas-redirect
• Secure Canvas Url : это то же самое, что и выше, но с https спереди (например, https://myapp.com/canvas-redirect ).

Сценарий переадресации вашего canvasа

Вы хотите, чтобы люди, приходящие на ваше приложение canvas на обозревателе рабочего стола, перенаправлялись на приложение табуляции на странице. Поскольку он загружается внутри i-кадра, единственный способ сделать это – использовать JavaScript.

Это будет содержание вашего Canvas Url ( http://myapp.com/canvas-redirect выше):

Обратите внимание на «top.location» – это перенаправит родительское окно, а не только iframe на вкладку страницы. Когда пользователь попадает на страницу canvasа в браузере рабочего стола, он будет перенаправлен через JavaScript в приложение «Таблица» . Мобильные пользователи будут перенаправлены Facebook на адрес мобильного сайта , указанный вами выше.

Тестирование в режиме песочницы

Если ваше приложение находится в режиме Sandbox, его смогут увидеть только администраторы, разработчики или тестеры приложения. В частности, пользователи, не вошедшие в Facebook или зарегистрированные в Facebook, но не админы или тестеры приложения, не смогут получить доступ к странице canvasа приложения – они просто увидят ошибку 404. Чтобы проверить redirect вашего мобильного телефона, когда приложение находится в режиме песочницы, вам необходимо убедиться, что вы являетесь администратором, разработчиком или тестером приложения. И вы вошли в мобильный сайт Facebook на веб-браузере вашего телефона – то есть Safari на iOS и Chrome на Android. Недостаточно быть подписанным в Facebook Mobile App на вашем телефоне, вы также должны войти в систему, используя браузер.

Заметка о роли пользователя

Вы можете настроить Роли пользователей приложений, щелкнув вкладку «Роли» в настройках приложения. Вы можете добавить пользователя Facebook или группу Facebook как любую из ролей. (Если вы добавите группу, все пользователи в этой группе будут иметь роль, указанную в приложении). Чтобы пользователь мог иметь определенную роль в приложении, они должны:

• Проверьте свою учетную запись на facebook: http://www.facebook.com/help/verify
• Установите приложение для разработчиков Facebook https://developers.facebook.com/

(Отредактировано с учетом обновленного пользовательского интерфейса и настроек Dev Settings)

В качестве обновления к этому, Facebook теперь автоматически перенаправляется на ваш сайт без каких-либо взломов.

Для этого убедитесь, что вы добавили платформу сайта в свое приложение и разместили свой мобильный URL.

Мне было трудно понять, как получить доступ к вкладкам страниц с помощью мобильного телефона, и, благодаря Бену в предыдущем комментарии, я нашел способ. Прежде всего, вы не можете получить доступ к вкладкам страниц со своим мобильным телефоном, поэтому вам нужно указать его там, где на вкладке вашей страницы есть источник. Facebook может сделать это для вас, если вы используете canvas, но если вы получите доступ к нему с помощью настольного компьютера, вы будете перенаправлены на ваш canvas, а не на свою вкладку. Вот как мы это исправим:

–

1) Войдите в свое приложение (разработчики Facebook) в разделе «Настройки» – «Основные»

2) Скопируйте URL-адрес вкладки « Страница страницы» в разделе « Табуляция страницы » (например, http://yourpagetab.yourdomain.com ) и пропустите его в URL-адресе вашего мобильного сайта в разделе « Мобильный веб-сайт ».

3) Сделайте то же самое с частью приложения в Facebook , но вместо того, чтобы указывать его на вкладку страницы, вам придется использовать файл перенаправления. Давайте используем http://yourpagetab.yourdomain.com/redirection.php?fb

Обратите внимание, что вы должны использовать? Fb в конце своей ссылки. Он ничего не делает, но Facebook хочет этого. На самом деле это может быть что угодно и, возможно, только?

4) Создайте этот файл redirection.php (не добавляйте? Fb) и добавьте в него этот код

Вы замените / your_fb_page / your_page_tab ссылкой на вкладку вашей страницы.

5) Сохраните его!

–

Теперь все, что вам нужно сделать, это использовать URL страницы Canvas, который предоставляет вам Facebook (в приложении App на Facebook ). Если люди нажимают на него и находятся на рабочем столе, они будут перенаправлены на вкладку страницы. Если они находятся на мобильном телефоне, они будут перенаправлены на ваш сайт, на котором размещена вкладка страницы.

Если вы используете вентилятор (пользователю нравится ваша страница перед доступом к вкладке вашей страницы): это не сработает, так как мобильный пользователь застрянет на ваших вентиляторных воротах.

Единственные способы преодолеть это – отключить вентилятор или использовать Mobile Detect (вы можете искать его на Github) и отключить его только для пользователей, которые находятся на мобильных устройствах. Это небольшая цена для оплаты, если вы хотите, чтобы вкладка вашей страницы работала с мобильными пользователями. Пользователям настольных систем по-прежнему будет нужна ваша страница, чтобы увидеть вкладку вашей страницы.

вы также можете использовать ссылку, подобную этой, чтобы остановить redirect мобильных телефонов facebook

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

Я один из разработчиков статического HTML. На самом деле у нас есть функция, встроенная в приложение, которая генерирует интеллектуальные, сокращенные ссылки, которые работают для мобильных и настольных компьютеров. Если вы нажмете на значок «+» в верхней части редактора, он подтянет общую ссылку.

Если вы используете эту ссылку, мы делаем немного дополнительной магии, чтобы ваши вкладки лучше поместились на маленьких экранах.

Изменить: мы отменили специальное форматирование, потому что оно было глюком на устройствах iOS.

Вот код 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 ''; die(); }