Обновление кнопки facebook like с помощью Ajax

ProgramBox

Обновление кнопки facebook like с помощью Ajax

Post author:admin
Запись опубликована:7 февраля, 2023
Post category:Вопросы по программированию

#jquery #facebook #facebook-like #meta-tags #facebook-opengraph

#jquery #Facebook #facebook-нравится #мета-теги #facebook-opengraph

Вопрос:

Я только что закончил небольшой веб-сайт, на 100% основанный на ajax.Но у меня проблема с обновлением ссылок на кнопки Facebook Like.

Я использовал просто сгенерированный facebook код и включил мета-теги graph. когда пользователь нажимает кнопку, он загружает новое видео на YouTube, я обновляю мета-тег

 <meta property="og:url" content="http://www.mySite.com/"/>

используя jQuery таким образом :

 $("meta[property=og:url]").attr("content", nUrl);

nUrl — это новый URL-адрес страницы, содержащий новое случайно выбранное видео.

Когда я нажимаю «Нравится», он просто захватывает нажатый «Нравится», он просто захватывает исходное содержимое мета-тега og: url, а теперь новое, установленное ajax. Как обновить с помощью javascript URL кнопки like? Что не так в том, что я сделал? Спасибо

Ответ №1:

Итак, вот что я сделал, чтобы решить мою проблему для других людей, у которых есть то же самое: добавьте это на свой сайт :

 <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="http://www.facebook.com/2008/fbml" >

Это добавит fbml на ваш сайт. Затем используйте версию кнопки «Нравится» в формате FBML (или систему комментариев, или что-то еще), например, я использовал это :

 <span id="fbLike"><fb:like href="http://www.your-site.com?v=1" send="false" layout="button_count" width="80" show_faces="true"></fb:like></span>

Теперь, чтобы иметь новую кнопку facebook like каждый раз, когда пользователь выполняет действие Ajax, просто добавьте этот код jquery туда, где вы когда-либо обрабатывали это действие в своем клиентском коде:

 var nUrl = "http://www.your-site.com?v=" toPlayId.substring(1);
$( '#fbLike' ).html('<fb:like href="' nUrl '" send="false" layout="button_count" width="80" show_faces="true" />');
        if (typeof FB  != "undefined"){
        FB.XFBML.parse(document.getElementById('fbLike'));}

По сути, вы просто заменяете место, где находится ваша кнопка, на новую.
nUrl — это новая ссылка, на которую вы хотите, чтобы указывала ваша новая кнопка.
Вам не нужен реальный новый URL, просто добавьте параметр к URL, чтобы ваш ajax знал, что отображать, когда он найдет параметр.
Вот и все.

1. Это было не совсем то, что я искал, но часть об использовании FB.XFBML.parse наконец-то нажал. Переписать html внутри span — это гениально, чтобы получить новую кнопку «Нравится».

Ответ №2:

Не изменяйте мета-теги с помощью AJAX или javascript. Настройте сценарии на стороне сервера, чтобы правильно установить их в первый раз.

Когда вам нравится / поделитесь URL-адресом на Facebook, Facebook отправит HTTP-запрос к URL-адресу и проанализирует мета-теги, которые он видит.

1. да, но кнопка «Нравится» должна указывать на правильный URL страницы, если она просто указывает you-fake.com я не могу знать, какое видео понравилось пользователю, чтобы установить правильный мета-тег

2. Да, именно поэтому я сказал о серверных сценариях. Я использую переменные GET для определения логики на стороне сервера для настроек мета-тегов.

Ответ №3:

Вы не можете обновить тег OG с помощью Javascript. Facebook отправит запрос на ваш сервер, и он должен вернуть теги OG, которые представляют этот объект.

Вам нужно будет создать URL-адрес для каждого объекта на вашем сайте — что-то вроде:

 http://www.yoursite.com/video/VIDEO_ID

Когда ваше видео на странице изменяется с помощью Ajax, вы отображаете новую кнопку «Нравится», которая указывает на URL, подобный этому. Нажатие на этот URL без JS должно отображать правильные теги OG — именно так Facebook увидит вашу страницу. Затем вы можете добавить перенаправление javascript (window.top.location = НОВЫЙ URL), чтобы перенаправить пользователя на видеоплеер на основе ajax.