Кнопка публикации в Facebook и настраиваемый текст [закрыто]


94

Есть ли способ сделать кнопку Facebook Share, которая будет размещать произвольный текст на стене или в ленте новостей?


Ответы:


94

Мы используем что-то вроде этого [использовать в одну строку]:

<a title="send to Facebook" 
  href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
  target="_blank">
  <span>
    <img width="14" height="14" src="'icons/fb.gif" alt="Facebook" /> Facebook 
  </span>
</a>

4
Вы знаете, как сделать так, чтобы эта ссылка открывалась во всплывающем или модальном окне? Просто не могу найти метод, который работает, это не так просто, как использовать какой-то общий код всплывающего окна ...
tvgemert 01

1
Более эффективен, чем ответ сверху.
Mateng

29
@tvgemert: Попробуй <a class="facebook" target="_blank" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer/sharer.php?u=YOUR_URL">Facebook</a>и т. д.
Mateng

Отлично, это также работает для URL-адресов hashbang!
dvtoever

73
Это больше не работает.
Чак Ле Батт

30

Чтобы предоставить пользовательские параметры для публикации в facebook, лучше указать только ссылку, и facebook автоматически получит заголовок + описание + изображение со страницы, которой вы делитесь. Чтобы «помочь» API Facebook найти эти вещи, вы можете поместить следующие вещи в заголовок страницы, которой вы делитесь:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Проверить здесь

Если страница не находится под вашим контролем, используйте то, что AllisonC поделился выше.

Для поведения типа popup modalview:

Используйте свою собственную кнопку / ссылку / текст, а затем вы можете использовать всплывающее окно модального вида следующим образом:

<script type= 'text/javascript'>
$('#twitterbtn-link,#facebookbtn-link').click(function(event) {
var width  = 575,
    height = 400,
    left   = ($(window).width()  - width)  / 2,
    top    = ($(window).height() - height) / 2,
    url    = this.href,
    opts   = 'status=1' +
             ',width='  + width  +
             ',height=' + height +
             ',top='    + top    +
             ',left='   + left;

window.open(url, 'twitter', opts);

return false;
});
</script>

где twitterbtn-link и facebookbtn-link - оба идентификатора привязки.


Если URL-адреса идентичны, кэшируются ли данные из мета-свойств в facebook? Или я могу ввести, например, отдельные данные POST при каждом просмотре страницы?
Mateng

Я не понял, что вы имели в виду.
ShayanK

Я только что наткнулся на это. У меня есть код лайка / публикации на моей домашней странице, который настроен на то, чтобы лайкнуть / поделиться страницей facebook, связанной с моим бизнесом. Кажется, я игнорирую метатеги facebook, которые у меня есть на странице. Кто-нибудь сталкивался с этой проблемой?
Крис Хокинс,

1
Этот метод больше не работает. Я думаю, что единственный способ создать настраиваемую кнопку общего доступа в Facebook (с вашим собственным текстом, заголовком и изображением) - это использовать Facebook SDK.
Ryan Coolwebs

Отличное решение, чтобы сделать его еще современным do, if( window.open(.....) ) event.preventDefault();а не просто `return false; ˙! - таким образом он предотвращает только поведение по умолчанию (ссылка открыта) при открытии окна - обеспечивает откат, когда его не было ...
jave.web

12

используйте эту функцию, полученную из ссылки, предоставленной IJas

function openFbPopUp() {
    var fburl = '';
    var fbimgurl = 'http://';
    var fbtitle = 'Your title';
    var fbsummary = "your description";
    var sharerURL = "http://www.facebook.com/sharer/sharer.php?s=100&p[url]=" + encodeURI(fburl) + "&p[images][0]=" + encodeURI(fbimgurl) + "&p[title]=" + encodeURI(fbtitle) + "&p[summary]=" + encodeURI(fbsummary);
    window.open(
      sharerURL,
      'facebook-share-dialog', 
      'width=626,height=436'); 
    return  false;
}

Или вы также можете использовать последнюю функцию FB.ui, если используете FB JavaScript SDK для более контролируемой функции обратного вызова.

см .: FB.ui

    function openFbPopUp() {
        FB.ui(
          {
            method: 'feed',
            name: 'Facebook Dialogs',
            link: 'https://developers.facebook.com/docs/dialogs/',
            picture: 'http://fbrell.com/f8.jpg',
            caption: 'Reference Documentation',
            description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
          },
          function(response) {
            if (response && response.post_id) {
              alert('Post was published.');
            } else {
              alert('Post was not published.');
            }
          }
        );
    }

этот FB.ui, пожалуй, самый надежный подход, к тому же вы можете загрузить этот скрипт внизу своей страницы вместе с остальной частью вашего javascript и загрузить переменные / селекторы jquery в качестве значений. Спасибо, что разместили это.
Клевис

@blackhawk ... но FB.ui также требует app_id - это не всегда вариант ... :)
jave.web

@Bravesh B При поиске документации, связанной с FB.ui, которую вы связали, я не смог найти параметры, которые вы передаете на FB.ui, такие как изображение, подпись, описание. Не могли бы вы сказать мне, где вы их нашли?
Ferex

@Ferex, вы можете найти параметры здесь developers.facebook.com/docs/sharing/reference/feed-dialog
Bhavesh B

1
С 18 апреля 2017 г. следующие параметры больше не поддерживаются Graph API версии 2.9 и выше. Для версий 2.8 и ниже параметры будут работать до 17 июля 2017 года.
Горан Яковлевич

9

У вас есть несколько вариантов:

  1. Используйте стандартную кнопку FB Share и установите текст с помощью Open Graph API и метатегов на своей странице.
  2. Вместо Share используйте метод stream.publish в FB.ui, который позволяет вам управлять URL-адресом, заголовком, заголовком, описанием и миниатюрой во время выполнения.
  3. Или используйте http://www.facebook.com/sharer.php с соответствующими параметрами.

2
Не могли бы вы подробнее остановиться на последнем? Что это за параметры?
Jeroen Vannevel 01

6

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

Взгляните на следующий код:

<script type="text/javascript">
  $(document).ready(function(){
    $('#share_button').click(function(e){
      e.preventDefault();
      FB.ui(
        {
          method: 'feed',
          name: 'This is the content of the "name" field.',
          link: 'URL which you would like to share ',
          picture: ‘URL of the image which is going to appear as thumbnail image in share dialogbox’,
          caption: 'Caption like which appear as title of the dialog box',
          description: 'Small description of the post',
          message: ''
        }
      );
    });
  });
</script>

Перед копированием и вставкой приведенного ниже кода необходимо сначала инициализировать SDK и настроить библиотеку jQuery. Пожалуйста, нажмите здесь, чтобы узнать шаг за шагом, как установить информацию о том же.


3

Это текущее решение (декабрь 2014 г.), которое работает достаточно хорошо. Это особенности

  • открыть всплывающее окно
  • автономный сниппет, больше ничего не требует
  • работает с JS или без него. Если JS отключен, окно общего доступа по-прежнему открывается, хотя и не в виде небольшого всплывающего окна.

<a onclick="return !window.open(this.href, 'Share on Facebook', 'width=640, height=536')" href="https://www.facebook.com/sharer/sharer.php?u=href=$url&display=popup&ref=plugin" target="_window"><img src='/_img/icons/facebook.png' /></a>

$ url var должен быть определен как URL для совместного использования.


это не работает в моем случае, когда моя страница начинается с https ...?
d4v1dv00

1
Этот ответ сейчас недействителен, так как Facebook прекратил поддерживать любые другие параметры в sharer
Викрант


-2

вы можете объединить идею AllisonC с window.openфункцией: http://www.w3schools.com/jsref/met_win_open.asp

function openWin(url) {
    myWindow = window.open(url, '', 'width=800,height=400');
    myWindow.focus();
}

И затем для каждой ссылки вы вызываете функцию openWin с правильным URL-адресом социальной сети.


-3

Попробуйте этот сайт http://www.sharelinkgenerator.com/ . Надеюсь это поможет.


3
Это не решает проблему, при которой люди ищут нестандартные заголовки / описания
Эдди,

с вашим решением невозможно разместить собственный текст с помощью facebook, пожалуйста, дайте другое решение
RaviPatidar
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.