Как правильно создать кнопку «поделиться» в facebook?

Question

[Кира]

Здравствуйте.
Пытаюсь создать три кнопки "поделиться" фейсбук, твиттер и вк, но popup окно работает только для последних двух. В фейсбуке же оно открывается, но при вводе URL и нажатии на кнопку ничего не происходит.

Вот код

Answer 1

[Алексей Немиро]

Адрес нужно указывать. В вашем примере, вместо адреса передается текст "URL".

Можно сделать передачу параметров через объект, для гибкости:

Share = {
  getParams: function(params) {
    // используем полученные параметры, 
    // либо создаем пустой объект, чтобы не было ошибок
    params = params || {};
    // в качестве url используем params.url,
    // либо адрес текущей страницы (window.location.href), если params.url не указан
    params.url = params.url || window.location.href;
    // используем params.title, либо заголовок документа
    params.title = params.title || document.title;
    // и т.п.
    params.description = params.description || '';
    params.img = params.img || '';

    return params;
  },

  vkontakte: function(params) {
    params = Share.getParams(params);
    url = 'http://vkontakte.ru/share.php?';
    url += 'url=' + encodeURIComponent(params.url);
    url += '&title=' + encodeURIComponent(params.title);
    url += '&description=' + encodeURIComponent(params.description);
    url += '&image=' + encodeURIComponent(params.img);
    url += '&noparse=true';
    Share.popup(url);
  },

  facebook: function(params) {
  	params = Share.getParams(params);
    url = 'http://www.facebook.com/sharer.php?s=100';
    url += '&p[title]=' + encodeURIComponent(params.title);
    url += '&p[summary]=' + encodeURIComponent(params.description);
    url += '&p[url]=' + encodeURIComponent(params.url);
    url += '&p[images][0]=' + encodeURIComponent(params.img);
    Share.popup(url);
  },

  twitter: function(params) {
    params = Share.getParams(params);
    url = 'http://twitter.com/share?';
    url += 'text=' + encodeURIComponent(params.description);
    url += '&url=' + encodeURIComponent(params.img);
    url += '&counturl=' + encodeURIComponent(params.img);
    Share.popup(url);
  },

  popup: function(url) {
    window.open(url, '', 'toolbar=0,status=0,width=626,height=436');
  }
};

<span title="Поделиться в Facebook">
  <a onclick="Share.facebook({url: 'https://toster.ru/q/294480'})">
    <i class="facebook square icon">Facebook</i>
  </a>
</span>
<span title="Поделиться в Twitter">
  <a onclick="Share.twitter({description: 'Hello world!'})">
    <i class="twitter square icon">Twitter</i>
  </a>
</span>
<span title="Поделиться ВКонтакте">
  <a onclick="Share.vkontakte({url: 'https://toster.ru/q/294480', description: 'Ответ на вопрос', 
title: 'Как правильно создать кнопку «поделиться» в facebook?'})">
  <i class="vk icon">VK</i>
  </a>
</span>

Посмотреть.

Если память не изменяет, Facebook с недавних пор (или уже давних) игнорирует передаваемые описания и заголовки страниц и извлекает необходимую информацию самостоятельно, непосредственно с указанной ссылки (преимущественно из тегов Open Graph).

Comments

[Кира]

Спасибо большое, всё работает)