Открыть графическую информацию для ссылки на вкладку страницы - PullRequest
Новая
       2

Открыть графическую информацию для ссылки на вкладку страницы

13 голосов
/ 07 декабря 2011

При публикации ссылки непосредственно на вкладку на странице Facebook, 

https://www.facebook.com/PAGENAME?sk=app_APPID

Facebook выбирает теги Open Graph <meta> страницы, что означает, что ссылка связывается с изображением профиля страницы,name и описание «Page • n like this».

Я надеялся, что Facebook вместо этого будет использовать теги og <meta> из HTML-кода приложения, что позволит настраивать публикации ссылок.

Как лучше всего предоставить прямую ссылку на определенную вкладку на странице Facebook с пользовательским содержимым в сообщении-ссылке?

Ответы [ 5 ]

9 голосов
/ 04 января 2012

Лучший способ добиться этого - увидеть страницу перенаправителя, размещенную на веб-сайте (www.example.com/fb/redirectorForApp.html), который выполняет перенаправление по таймауту javascript. На этой странице перенаправителя есть теги og, которые вы хотите указать. Редирект высадит человека на https://www.facebook.com/PAGENAME?sk=app_APPID. Что хорошо в перенаправлении javascript, так это то, что он не запускается перенаправителем, поэтому он может подобрать правильные теги og:, одновременно позволяя пользователю перейти непосредственно на вкладку страницы. Удачи!

5 голосов
/ 06 января 2012

Поскольку содержимое вашей вкладки страницы находится внутри iFrame, скребок Facebook всегда будет сначала видеть метатеги вне iFrame, которые установлены Facebook и которые описывают вашу страницу Facebook. Попробуйте URL-адрес в инструменте Facebook и посмотрите в нижней части страницы, что видит скребок для вашего URL-адреса. К сожалению, вы не можете изменить эти метатеги Facebook из своего iFrame. Вот почему единственный способ достичь того, чего вы хотите, - это перейти с помощью перенаправления. Я сделал это, прежде чем использовать следующий код: 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:og="http://ogp.me/ns#">
    <head>

        <!-- Facebook meta tags -->
        <meta property="og:title" content="bla"/>
        <meta property="og:url" content="https://yourdomain.com/redirect.html"/>
        <meta property="og:image" content="https://yourdomain.com/thumb.png"/>
        <meta property="og:site_name" content="bla"/>
        <meta property="fb:admins" content="1234"/>
        <meta property="og:description" content="bla"/>
        <meta property="og:type" content="website"/>
        <meta property="og:video" content="https://yourdomain.com/bla.swf?param=bla"/>
        <meta property="og:video:width" content="398"/>
        <meta property="og:video:height" content="224"/>
        <meta property="og:locale" content="de_DE"/>

        <script type="text/javascript" src="swfobject.js"></script>
    </head>
    <body>
        <!--  Check whether inside facebook -->
        <script type="text/javascript">
            function NotInFacebookFrame() {
                return top === self;
            }
            function ReferrerIsFacebookApp() {
                if(document.referrer) {
                    return document.referrer.indexOf("facebook.com") !== -1;
                }
                return false;
            }
            if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
                top.location.replace("https://www.facebook.com/PAGENAME?sk=app_APPID");
            }
        </script>
        <!-- content here -->
   </body>
</html>
2 голосов
/ 06 января 2012

Я новый пользователь, поэтому я пока не могу комментировать ответ DMCS: -)

Но я должен был сделать это один раз, и это тоже было через "перенаправитель". Однако не было необходимости устанавливать тайм-аут, просто: 

<html>
  <head>
    <meta ...> <!-- OG tags -->
    <script type="text/javascript">
      location = 'http://www.facebook.com/PAGENAME?sk=app_APPID';
    </script>
  </head>
</html>

Так что без задержки.

КСТАТИ. если вы проверите URL вкладки здесь , вы увидите, что она имеет путь перенаправления через тег og:url, который перенаправляет с https://www.facebook.com/PAGENAME?sk=app_APPID на https://www.facebook.com/PAGENAME. Возможно, вам следует проверить, не меняет ли что-либо изменение настройки вкладки «Посадка по умолчанию».

1 голос
/ 04 марта 2012

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

Но хорошая новость в том, что есть решение! Хотя это довольно сложно, особенно если у вас есть несколько подстраниц с разными тегами og: (например, в конкурсе на голосование).

Как это работает?

Это решение состоит в том, чтобы настроить ogtags на странице вашего сервера, чтобы иметь канонический URL, который перенаправляет на страницу приложения canvas - приложениям canvas можно указывать свои собственные ogtags таким образом. Если затем вы перенаправите всех пользователей на нужную вкладку страницы, страница холста будет фактически недоступна для просмотра, однако она позволит вам предоставлять пользовательские ogtags для вашего приложения вкладки страницы.

Шаги

  1. Создание страницы холста для вашего приложения (используйте те же URL, что и для вкладки страницы)
  2. Добавьте теги og: на свою страницу, как обычно
  3. Установить параметр og: url для URL приложения холста (http://apps.facebook.com/yourapp/...etc)
  4. Добавьте код, чтобы при поступлении запроса из-за пределов вкладки страницы iframe (на холсте или непосредственно на вашем сервере) вы перенаправляли пользователя на соответствующую вкладку страницы
0 голосов
/ 10 января 2012

У меня был тот же вопрос ... вот что я сделал:

  • Страница перенаправления: страница, которая получит параметр и установит теги для ваших служб обмена или хотя бы теги OpenGraph. Затем эта страница создаст URL для второй страницы (Facebook Pagetab) следующим образом: 

    //{facebook-page.link}/?sk=app_{your-app-id}&app_data=X

Чтобы получить {facebook-page.link}, просмотрите этот пример запроса:
Смотрите пример: https://graph.facebook.com/200866110154
Смотрите документацию: https://developers.facebook.com/docs/reference/php/facebook-api/

Не делайте перенаправление немедленно каждый раз, не будет работать. Вместо этого сделайте перенаправление на определенных условиях. Пример: 

    if (strpos($_SERVER['HTTP_REFERER'], '//www.facebook.com/')) {
        drupal_add_js('window.location = "' . $url_final . '"', 'inline');
    }

Помните, что для создания URL-адреса используйте атрибут ссылки на страницу, полученный из Facebook, а не идентификатор страницы, в противном случае вы потеряете параметр app_data в подписанном запросе.

  • Facebook Pagetab: страница, вызываемая внутри Iframe вкладки страницы Facebook. Эта страница получит запрос SignedRequest с app_data и загрузит определенный контент, который увидит конечный пользователь.

Помните, что app_data также может быть массивом (или сериализованным объектом): 

      app_data[var1]=value1&app_data[var2]=value2

Подсказка: Если вы используете Drupal, вы можете избежать окончательного перенаправления, просто перезапишите $ _GET ['q'] на нужную страницу. Таким образом, вы не загружаете Drupal только для повторного перенаправления. Вы можете добиться этого, используя hook_init.

Подсказка: Сохраните свои запросы в API Facebook, чтобы ускорить будущие звонки. Каждый запрос к API графа занимает минимум 300 мс. Доступ к базе данных, очевидно, быстрее.

...