Як додати кнопку поділення facebook на моєму веб-сайті?


99

У мене є цей код, який, мабуть, працює, але не працює. Якщо це допоможе вам у будь-якому випадку, це було б чудово.

<script src='http://connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'><img src="images/fb.png" /></a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "338334836292077", status: true, cookie: 

true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          redirect_uri:'https://www.facebook.com/cryswashington?fref=ts',
          link:'https://developers.facebook.com/docs/reference/dialogs/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.'
        };

        function callback(response) {

        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>

Я хочу додати на свій веб-сайт кнопку обміну в Facebook, яка повинна просто розмістити вміст мого веб-сайту на стіні. які хочуть ним поділитися.

Я багато досліджував, але нічого не отримав. Прохання допомогти мені в цьому.

Заздалегідь спасибі.


Відповіді:


252

Вам не потрібен весь цей код. Все, що вам потрібно, це наступні рядки:

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

Документацію можна знайти за посиланням https://developers.facebook.com/docs/reference/plugins/share-links/


7
Цей варіант не дуже подобається ... хотілося б, щоб було стильове посилання, на зразок кнопки твіт
Serj Sagan

104
Чому б тоді не стилізувати посилання? Я точно вважаю за краще цей варіант. Мені подобається контролювати, як виглядають мої конструкції.
шерифдерек

6
Крім того, цей спосіб не додає facebook непотрібний код, що сповільнить вашу сторінку. Дивіться плагін jrery на sharrre.com, це дозволяє легко налаштувати зовнішній вигляд і з'єднати кілька соціальних кнопок "як" в одну.
пікселін

3
Так, ви все ще можете використовувати прості посилання для спільного використання. Також перегляньте цю просту сторінку, щоб допомогти створити прості посилання на всі ваші популярні сайти соціальних медіа: sharelinkgenerator.com
пістолет-

1
Важлива примітка. Ця ідея на мобільному пристрої відкриває веб-сайт Facebook (не додаток FB). Маленький (або великий) кон.
Езра Ситон

26

Це можна зробити, використовуючи асинхронний Javascript SDK, наданий facebook

Погляньте на наступний код

Ініціалізація SDK FBS Javascript

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>

Примітка. Не забудьте замінити свій ідентифікатор додатка на ваш facebook AppId. Якщо у вас немає facebook AppId і ви не знаєте, як це створити, перевірте це

Додайте бібліотеку JQuery, я вважаю за краще бібліотеку Google

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Додати діалогове вікно спільного доступу (Ви можете налаштувати це діалогове вікно, встановивши параметри

<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: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
</script>

Тепер нарешті додайте кнопку зображення

<img src = "share_button.png" id = "share_button">

Для отримання більш детальної інформації. будь ласка , натисніть тут


7
... порівняйте це з ініціалізацією еквіваленту Twitter. Горіхи.
Майкл

6
Ваш підхід вимагає ідентифікатора програми, це болісно.
horseyguy

Цей досі працює як шарм! Відмінна робота!
Кодування Freak

Приємно !! легко зрозуміти. Але як ми можемо знати, якщо користувач насправді поділився нашим вмістом? PS: response.error_message з’явиться лише в тому випадку, якщо хтось, хто користується вашим додатком, підтвердив вашу програму
Pearl

14

Ви можете прочитати більше про кнопку поділитися тут на веб-сайті розробників Facebook

Робочий JSFIDDLE

Погляньте також на користувацьку кнопку Facebook Share JSFIDDLE

Включіть код SDK Facebook JavaScript відразу після вступного <body>тегу

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

І розмістіть нижче код, де ви хочете показати кнопку Facebook Share

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>

введіть тут опис зображення

Перевірте, чи працює JSFIDDLE


8
Чи можливо цей код більше не працює? Навіть у jsfiddle
erdomester

8
У мене виникають серйозні проблеми з тим, щоб я працював над цим самим ... Я просто закінчувався порожнім дівом.
Майкл

@erdomester Загадка не відображатиметься у Chrome чи Firefox. Це пов’язано із захищеністю браузерів, що запобігають наборам кадрів із пісочним файлом. Відкриття jsfiddle в Safari повинно показуватись, і коли ви реалізуєте поза jsfiddle, він повинен відображатися в інших браузерах.
JisuKim82

4

Для Facebook акцію із зображенням без нього API і використовуючи #для глибокого зв'язку в суб - сторінки, хитрість в тому, щоб розділити зображення як picture=

змінна mainUrlбудеhttp://yoururl.com/

var d1 = $('.targ .t1').text();
var d2 = $('.targ .t2').text();
var d3 = $('.targ .t3').text();
var d4 = $('.targ .t4').text();
var descript_ = d1 + ' ' + d2 + ' ' + d3 + ' ' + d4;
var descript = encodeURIComponent(descript_);

var imgUrl_ = 'path/to/mypic_'+id+'.jpg';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);

var shareLink = mainUrl + encodeURIComponent('mypage.html#' + id);

var fbShareLink = shareLink + '&picture=' + imgUrl + '&description=' + descript;
var twShareLink = 'text=' + descript + '&url=' + shareLink;

// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
  var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
  return false;
});

// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
  var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
  return false;
});

2

Діліться діалогом, не вимагаючи входу в Facebook

Ви можете запустити діалог обміну, використовуючи функцію FB.ui за допомогою параметра методу спільного доступу для обміну посиланням. Це діалогове вікно доступне у SDK-файлах Facebook для JavaScript, iOS та Android, виконуючи повне переспрямування на URL-адресу.

Ви можете запустити цей виклик:

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/', // Link to share
}, function(response){});

Ви також можете включити мета-теги відкритих графіків на сторінку за цією URL-адресою, щоб налаштувати історію, якою вона поділилася назад у Facebook.

Зауважте, що response.error_message з’явиться лише в тому випадку, якщо хтось, хто користується вашим додатком, підтвердив вашу програму за допомогою входу в Facebook.

Також ви можете безпосередньо поділитися посиланням на дзвінок, маючи Javascript Facebook SDK.

https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer

https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}
  • app_id => Унікальний ідентифікатор вашого додатка. (Вимагається.)

  • redirect_uri => URL-адреса для переадресації після того, як людина натисне кнопку в діалоговому вікні. Необхідно використовувати переадресацію URL-адреси.

  • display => Визначає спосіб відображення діалогового вікна.

Якщо ви використовуєте реалізацію діалогового вікна переспрямування URL-адрес, це буде відображення на повній сторінці, показане на Facebook.com. Цей тип відображення називається сторінкою. Якщо ви використовуєте один із наших SDK для iOS або Android для виклику діалогового вікна, це автоматично визначається і вибирається відповідний тип дисплея для пристрою. Якщо ви використовуєте SDK Facebook для JavaScript, це буде типовим типом модального iframe для людей, які увійшли у ваш додаток або асинхронізуються під час використання в грі на Facebook.com, і спливаючого вікна для всіх інших. Ви також можете примусити спливаючі або типові сторінки, використовуючи SDK Facebook для JavaScript, якщо це необхідно. Мобільні веб-програми завжди будуть за замовчуванням для типу сенсорного дисплея. розділити Параметри

  • href => Посилання, додане до цієї публікації. Потрібно при використанні методу частки. Включіть відкриті метатеги графіків на сторінку за цією URL-адресою, щоб налаштувати спільну історію.

1

Для вашого власного сервера або різних сторінок та кнопки зображення ви можете використовувати щось подібне (лише для PHP)

<a href="http://www.facebook.com/sharer/sharer.php?u=http://'.$_SERVER['SERVER_NAME'].'" target="_blank"><img src="http://i.stack.imgur.com/rffGp.png" /></a>

Я не можу поділитися з цим фрагментом, але ви отримаєте ідею ...

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.