Fancybox с кнопками «Поделиться», связанными с уникальным изображением - PullRequest
Новая
       18

Fancybox с кнопками «Поделиться», связанными с уникальным изображением

1 голос
/ 13 февраля 2012

Я хотел бы отобразить кнопку в стиле Facebook во всплывающем окне Fancybox.

Взаимодействие, которое я себе представляю, похоже на то, как Pinterest отображает кнопки общего доступа в социальных сетях справа от модального всплывающего окна (например, http://pinterest.com/pin/73465037641354472/). Каждое изображение имеет уникальный URL-адрес, чтобы вы могли ссылаться насодержимое всплывающего окна напрямую.

Как я могу:

  1. Убедитесь, что каждое изображение в моей галерее Fancybox прикреплено к уникальному URL-адресу
  2. Отобразить кнопку «Мне нравится» ввсплывающее окно, связанное с этим уникальным URL

Для # 1 я обнаружил следующий код, обсуждаемый на следующей странице: this.id внутри fancybox 

$("a.fancybox").each(function() {
  var element = this;
  $(this).fancybox({
    'titleFormat'   : function() {
      var astring = '<span>' + element.id + '</span>';
      return astring;
     }
  });
});

Этот код мне нужен? Если да, что мне делать в HTML, чтобы этот JavaScript работал правильно?

Большое спасибо за любую помощь!

1 Ответ

0 голосов
/ 13 февраля 2012

Вам понадобится механизм, основанный на уникальном URL-адресе, для предоставления правильных http://ogp.me og: метатегов, которые будут анализироваться линтером Facebook.

Помните, что linter не запускает javascript, поэтому они должны быть правильно определены в потоке ответов.

EDIT

Пример каждого изображения, имеющего собственный URL. Это поможет Facebook получить правильные теги html и og :. 

http://example.com/images.php?id=1
http://example.com/images.php?id=2
http://example.com/images.php?id=3

В ответе HTML от каждого из этих уникальных URL указаны правильные теги og :. В этом HTML у вас должен быть javascript-редирект на реальную страницу для отображения картинки. Поскольку javascript не запускается линтером, он должен иметь возможность читать эти теги og:

См. http://ogp.me для определения тегов og.

...