Использование пользовательского интерфейса "share_open_graph" Facebook для создания динамического диалога общего доступа для результатов теста

Резюме.. Моя проблема заключается в получении FB.ui с помощью метода share_open_graph, чтобы создать индивидуальный диалог общего доступа, содержащий различные названия, описания и изображения, основанные на действиях пользователя на странице.

Вопрос был моим первым, и у меня не было репутации, поэтому были удалены многочисленные ссылки, но (спасибо всем, кто дал мне преимущество), я смог спасти скриншоты, которые изначально отсутствовали.

EDIT: Мне пришлось просто использовать регулярное всплывающее окно с диалоговым окном share, но оно не идеально, но, по крайней мере, оно работает надежно. Чем больше я смотрел по сети, тем больше я обнаружил, что многие высокопоставленные респектабельные сайты все еще используют всплывающее сообщение, подобное этому, поэтому я решил, что в этом случае преимущества использования устаревшего решения перевешивают обширную работу по поиску правильного решения, я использовал https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2 с динамическими подробностями, представленными через URL-запрос, который, по крайней мере, немного более актуальен, чем использование sharer.php, я был изначально глядя на Buzzfeed.

Моя страница:

У меня есть опрос. Десять вопросов, пять ответов на каждый, получается результат присвоения одного из пяти вариантов в качестве "результата". Все, что касается викторины, отлично работает. Результат втягивается, когда опрос завершается через Ajax/jQuery - это так, что в будущем я смогу построить интерфейс на основе PHP для других людей, чтобы управлять созданием викторин. Пока я счастливо предоставляю URL-адрес страницы в коде ниже, но, к сожалению, пока я не исправил эту проблему, я не могу публиковать ее публично, поэтому вы не можете получить к ней доступ!

Моя цель:

Когда будет показан результат викторины, у него также должны быть кнопки общего доступа Facebook и Twitter, которые были настроены для включения изображения, заголовка и описания, которые соответствуют результатам пользовательской викторины.

Кнопка Twitter была легко сделать динамически

Я просто использую jQuery для создания кнопки Twitter, используя тот же HTML, что и любой другой, с моим динамическим описанием, представленным как свойство data-text, а затем вызываем twttr.widgets.load();, чтобы активировать кнопку.

Кнопка Facebook Share - это проблема

Я не могу добавить кнопку "обычного" общего доступа - для этого требуется только одно свойство, URL-адрес (не изменяется в результате теста).
Я не могу изменить общие теги Open Graph, которые существуют на странице, хотя jQuery может это сделать, кеширование Facebook означает, что это бессмысленно. Кроме того, общие кнопки совместного доступа (FB/Twitter/G +) на каждой странице должны оставаться неизменными и всегда использовать теги OG по умолчанию.

Итак, я создаю ссылку и добавляю ее на страницу с помощью jQuery, а затем устанавливаю действие click trigger с помощью jQuery. Идентификатор приложения уже успешно установлен с блоком кода FB.init(). Это методы, которые я попытался использовать для триггера щелчка:

Попытка 1: `FB.ui({ method: "feed" })`

FB.ui({
  method: 'feed',
  name: "I got "+response.country+"! Which European are you destined to date?",
  link: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
  picture: response.image,
  description: response.body
});

Основы работы - изображение, название и описание соответствуют результату викторины (в данном случае "французский" ) - НО диалог подачи не только устарел, но и значительно уступает Share (см. Ниже). Я бы хотел сделать это правильно.

Попытка 2: `FB.ui({ method: "share" })`

FB.ui({
  method: 'share',
  href: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
  name: "I got "+response.country+"! Which European are you destined to date?",
  picture: response.image,
  description: response.body
});

В диалоговом окне Share отображается текущее значение, и вы можете увидеть улучшения в дизайне и функциональности по сравнению с устаревшим диалогом каналов. Но в этом базовом использовании это похоже на обычную кнопку общего доступа, и, несмотря на мои попытки предоставить дополнительную информацию, используется только URL-адрес, и общие теги Open Graph на странице предоставляют контент.

Попытка 3: `FB.ui({ method: "share_open_graph" })`

Кажется, это тот, который я должен использовать. Мне просто нужно разобраться, как! * Я добавил: "quiz" как тип объекта для моего приложения (name: matchadviceuk). * Я добавил: "Поделиться викториной" в качестве типа истории для моего приложения на основе опции "викторины" и существующего типа действия "Поделиться". * Я добавил: соответствующий Open Graph prefix="" контент в мое объявление <head>

Теперь функция click на кнопке выглядит следующим образом:

FB.ui({
  method: 'share_open_graph',
  action_type: 'matchadviceuk:share',
  action_properties: JSON.stringify({
    type: 'matchadviceuk:quiz',
    url: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
    title: "I got "+response.country+"! Which European are you destined to date?",
    description: response.body,
    image: response.image
  })
});

После щелчка на кнопке появляется:

Итак, я изменил url в приведенном выше коде на quiz, и получим:

Это начинает иметь смысл - сама страница является статьей, и это не может измениться. Поэтому, возможно, я не хочу использовать этот новый тип объекта "викторины" вообще. Но если я вернусь в блок выше и просто изменил type на matchadviceuk:article, мы получим ту же ошибку, что и "опрос", которая не определена - на данный момент это делает нулевой смысл, поскольку тип объекта "викторины" теперь не упоминается нигде в коде! (Возможная жертва кэширования Facebook, что является дополнительным осложнением.)

И вот здесь я застрял вне всякой дополнительной идеи. Я даже попытался полностью удалить атрибуты type и url, надеясь, что Facebook может сделать свое дело, но нет.

Я еще не уверен, что мои усилия по добавлению типа объекта и типа истории в мое приложение были необходимы, но в любом случае я просто не могу заставить это работать. Пожалуйста, помогите!

Сравнить с:

It Buzzfeed, которые много делают такие викторины, и они на самом деле выполняют работу с использованием ссылки sharer.php на Facebook с динамическим контентом, поставляемым как часть строки запроса URL-адреса, и заставляя его открываться в новом окна вручную. Это уродливое, а не "официальное", а не как дружелюбное к пользователю, и я смею сказать, возможно, это проблемы с мобильным телефоном и планшетами. По всем этим причинам я бы предпочел сделать это правильно с помощью FB.ui - и не только это, но sharer.php находится в постоянном потоке "это или не устарело?" и даже официальная линия разработчиков FB (не может добавить ссылку из-за отсутствия репутации) - это то, что она не будет работать так долго.

Исследования:

Я выполнил тон поиска Googling и Stack Overflow. Ничто не соответствует моей проблеме (что меня удивляет, но у меня есть дополнительные ограничения, такие как необходимость выполнять всю эту обработку динамически без отдельных страниц с результатами PHP). Этот вопрос является единственным результатом для SO для "share_open_graph" и создает объект с FB.api, а затем публикует с FB.ui - звучит хорошо, кроме того, что это производит несколько сообщений в фид пользователя, что приведет к запрету со стороны Facebook. Этот пользователь смог опираться на PHP, где мне нужна чистая интерактивность на стороне клиента.

Ответ 1

Я сделал с share_open_graph методом с таким объектом,

FB.ui({
    method: 'share_open_graph',
    action_type: 'og.shares',
    action_properties: JSON.stringify({
        object : {
           'og:url': 'http://astahdziq.in/', // your url to share
           'og:title': 'Here my custom title',
           'og:description': 'here custom description',
           'og:image': 'http://example.com/link/to/your/image.jpg'
        }
    })
    },
    // callback
    function(response) {
    if (response && !response.error_message) {
        // then get post content
        alert('successfully posted. Status id : '+response.post_id);
    } else {
        alert('Something went error.');
    }
});

Ответ 2

Для свойства "quiz" требуется объект og: type "matchadviceuk: quiz". "Это начинает иметь смысл - сама страница является статьей

Ты был здесь. После этого я подошел к шаблону страницы, на который ссылался параметр 'url' в файле action_properties и добавил

<meta property="og:type" content="myapp:mytype" />

В вашем случае это будет

<meta property="og:type" content="matchadviceuk:quiz" />

Что все, совместное использование через FB.ui работает

Конечно, ваш развивающийся сервер должен иметь внешний http-адрес (я использую http://ngrok.com для таких вещей)

Изменить: в любом случае вам следует добавить дополнительный параметр к URL-адресу, в соответствии с которым заполняются определенные данные в og: title, og: description, og: метатеги изображений на странице, потому что не похоже, что названия, описания и параметры изображения в action_properties действительно работают, например

...
action_properties: JSON.stringify({
    ...
    url: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date?" + response.country_id,
    ...

Ответ 3

У меня была аналогичная проблема, и ваш подробный вопрос помог мне найти решение, спасибо за то, что он был там.

Как вы предлагаете создать пользовательское действие и настраиваемый объект, связанный с действием в настройках приложения в FB. В вашем случае действие "share", а объект - "quiz". И у вас должна быть такая история, как "Джон Доу поделился викториной через Some-awesome-app".

В вашем JS-коде вы в основном рассказываете Facebook эту историю.

FB.ui({
  method: 'share_open_graph', 
  action_type: 'matchadviceuk:share',    // appNameSpace:myCustomAction
  action_properties: JSON.stringify({
    // The action properties
  })
});

Вы уже сказали FB, что в вашей истории есть объект "викторины" с действием "share". Итак, сначала вы расскажете, где находится этот объект "викторины" .

FB.ui({
  method: 'share_open_graph', 
  action_type: 'matchadviceuk:share',    // appNameSpace:myCustomAction
  action_properties: JSON.stringify({
    quiz: 'http://example.com/quizItem' // customObjectProperties (found when editing your object in the fb dev portal, looks like `og:quiz`). Note: from what I can tell, every object with name `myObject` will have a `og:myObject` property.
  })
});

Теперь FB знает, где находится этот объект "викторины" . Следующий шаг - иметь объект "викторины" в этом месте. Вы можете создать страницу HTML или PHP по этому URL-адресу. Это обычная HTML-страница с некоторыми дополнительными мета-тегами. Эти метатеги заставляют вашу страницу распознавать объект "викторины" . Ниже приведен пример кода HTML и комментариев:

<html>
    <head>
        <meta property="og:type" content="quiz">
        <!-- this tells that the page is a quiz -->

        <meta property="og:title" content="Some page title" >
        <!-- your page must have a title for sharing -->

        <!-- you can also use og:description and og:image if you want to change more but they are optional. Again you can find these when you edit your custom object -->
        ...

Теперь страница HTML (или PHP) на этом URL-адресе распознается FB как объект 'quiz'.

В моем случае мне нужно было передать некоторые переменные для совместного использования диалога. Поэтому я использовал страницу PHP как объект. Из JS я делаю вызов с встроенным запросом и читаю параметры GET на моем PHP. поэтому JS становится следующим:

FB.ui({
  method: 'share_open_graph', 
  action_type: 'matchadviceuk:share',    // appNameSpace:myCustomAction
  action_properties: JSON.stringify({
    quiz: 'http://example.com/quizItem?country=<populated country name>'
  })
});

И файл PHP - это что-то вроде

<?php
    $country = $_GET['country'];
?>
<html>
    <head>
        <meta property="og:type" content="quiz">
        <meta property="og:title" content="Quiz from <?php echo $country; ?>" >
        ...

Надеюсь, это поможет. Ура!

Ответ 4

У меня такая же проблема. Закончилось использование FB.api вместо FB.ui

Вот пример, где он используется для публикации действия og: likes: https://developers.facebook.com/docs/opengraph/getting-started

Вам просто нужно настроить действие и объект, чтобы опубликовать свой собственный рассказ.

Для меня проблема заключается в том, что он публикует сообщения без предварительного запроса со всплывающим окном, например, как работают обычные общие кнопки.

Ответ 5

объект должен быть, ну, объект

FB.ui({
  method: 'share_open_graph',
  action_type: 'matchadviceuk:share',
  action_properties: JSON.stringify({
    'quiz': {
       'og:type': 'matchadviceuk:quiz',
       'og:url': "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
       'og:title': "I got "+response.country+"! Which European are you destined to date?",
       'og:description': response.body,
       'og:image': response.image
    }
  })
}, function(){});