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

288
26

Резюме.. Моя проблема заключается в получении 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
});

screenshot showing the correct details appearing but in an old-style half-working and deprecated Feed dialog


Основы работы - изображение, название и описание соответствуют результату викторины (в данном случае "французский" ) - НО диалог подачи не только устарел, но и значительно уступает 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
});

screenshot showing correct modern share dialog but with generic OG tags and not my custom details


В диалоговом окне 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
})
});

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


screenshot showing error box saying "The action you're trying to publish is invalid because it does not specify any reference objects. At least one of the following properties must be specified: quiz."


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


screenshot showing error box saying "Object at URL <url> has og:type of 'article'. The property 'quiz' requires an object of og:type 'matchadviceuk: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, где мне нужна чистая интерактивность на стороне клиента.

спросил(а) 2021-01-25T17:44:53+03:00 5 месяцев назад
1
Решение
181

Я сделал с 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.');
}
});

ответил(а) 2021-01-25T17:44:53+03:00 5 месяцев назад
89

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


Как вы предлагаете создать пользовательское действие и настраиваемый объект, связанный с действием в настройках приложения в 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; ?>" >
...

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

ответил(а) 2021-01-25T17:44:53+03:00 5 месяцев назад
89

Для свойства "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,
...

ответил(а) 2021-01-25T17:44:53+03:00 5 месяцев назад
46

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


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


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


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

ответил(а) 2021-01-25T17:44:53+03:00 5 месяцев назад
46

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


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(){});

ответил(а) 2021-01-25T17:44:53+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема