Кнопка спільного використання Facebook та власний текст [закрито]


93

Чи є якийсь спосіб зробити кнопку обміну у Facebook, яка розмістить на стіні користувацький текст або стрічку новин?


Відповіді:


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

1
Більш ефективна, ніж відповідь зверху.
Матенг

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>і т. д.
Матенг

Ідеально, це також працює для URL-адрес хешбангу!
dvtoever

73
Це більше не працює.
Чак Ле Бутт

30

Щоб надати користувальницькі параметри Facebook поділитися, краще надати лише посилання, і facebook автоматично отримує заголовок + Опис + Зображення зі сторінки, якою ви ділитесь. Щоб "допомогти" facebook API знайти ті речі, ви можете помістити такі заголовки у заголовок сторінки, якою ви ділитесь:

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

Перевірте тут

Якщо сторінка не знаходиться під вашим контролем, використовуйте те, що AllisonC поділився вище.

Для поведінки типу спливаючого режиму:

Використовуйте власну кнопку / посилання / текст, і тоді ви можете використовувати тип модального перегляду спливаючого вікна таким чином:

<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-адреси однакові, чи фейсбук кешує дані мета-властивостей? Або я можу ввести, наприклад, окремі дані POST при кожному перегляді сторінки?
Mateng

Я не зрозумів, що ви маєте на увазі під цим.
ShayanK

Я щойно натрапив на це. На своїй домашній сторінці у мене є лайк / поділитися кодом, який налаштований так, щоб подобатися / ділитися на сторінці у фейсбуці, пов’язаній з моїм бізнесом. Здається, ігноруючи мета-теги у фейсбуці, які я маю на своїй сторінці. Хтось стикався з цією проблемою?
Кріс Хокінс

1
Цей метод, здається, вже не працює. Я думаю, що єдиний спосіб отримати індивідуальну кнопку спільного використання Facebook (із власним текстом, заголовком та зображенням) - це використовувати SDK Facebook.
Ryan Coolwebs

Прекрасне рішення, щоб зробити його також сучасним, if( window.open(.....) ) event.preventDefault();а не просто повертати помилкове; ˙! - таким чином він запобігає лише поведінці за замовчуванням (посилання відкрите), коли вікно було відкрито - забезпечує резервне копіювання, коли його не було ...
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 змінні / селектори. Дякуємо, що опублікували це.
klewis

@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. Скористайтеся стандартною кнопкою Share FB і встановіть текст за допомогою API Open Graph та метатегів на своїй сторінці.
  2. Замість того , щоб поділитися, використання FB.ui stream.publish методу «s, який дозволяє вам контролювати URL, назва, заголовок, опис і ескіз під час виконання.
  3. Або використовуйте http://www.facebook.com/sharer.php з відповідними параметрами.

2
Чи можете ви детальніше розповісти про останнє? Що це за параметри?
Jeroen Vannevel

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 припинив підтримувати будь-які інші параметри в пайовиків
Vikrant


-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.