Как добавить кнопку «Поделиться в Facebook» на мой сайт?

100

У меня есть этот код, который должен работать, но не работает. Если это хоть как-то поможет, было бы здорово.

<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, которая должна просто размещать контент моего веб-сайта на стене. кто хочет этим поделиться.

Я много исследовал, но ничего не получил. Пожалуйста, помогите мне в этом.

Заранее спасибо.

javascript facebook facebook-javascript-sdk share facebook-social-plugins Сахибджот Сингх
источник
2
sharelinkgenerator.com
Ронни Ройстон

Ответы:

258

Вам не нужен весь этот код. Все, что вам нужно, это следующие строки:

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

asifrc
источник
7
Не очень нравится этот вариант ... хотел бы, чтобы была стилизованная ссылка, вроде кнопки твита
Серж Саган
105
Почему бы вам тогда не стилизовать ссылку? Я определенно предпочитаю этот вариант. Мне нравится контролировать внешний вид своего дизайна.
sheriffderek
6
Кроме того, этот способ не добавляет нежелательный код facebook, который замедлил бы вашу страницу. См. Плагин jquery sharrre.com, он позволяет легко настроить внешний вид и объединить несколько кнопок социальных сетей в одну.
pixeline
3
Да, вы все еще можете использовать простые ссылки для обмена. Кроме того, посетите эту простую страницу, чтобы узнать, как создавать
-pete
1
Важное примечание: эта идея на мобильных устройствах открывает веб-сайт Facebook (не приложение FB). Маленький (или большой) недостаток.
Эзра Ситон,
26

Вы можете сделать это с помощью асинхронного Javascript SDK, предоставляемого facebook.

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

Инициализация FB Javascript SDK

<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. Если у вас нет 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">

Для более подробной информации. пожалуйста нажмите здесь

Вират Гайвала - CSM
источник
7
... сравните это с инициализацией эквивалента Twitter. Орехи.
Майкл
6
Ваш подход требует идентификатора приложения, это чертовски больно.
horseyguy
Этот все еще работает как шарм! Отличная работа!
Coding Freak
Ницца!! Легко понять. Но как мы узнаем, действительно ли пользователь поделился нашим контентом? PS: response.error_message появится только в том случае, если кто-то, использующий ваше приложение, аутентифицировал ваше приложение
Перл
14

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

Рабочий JSFIDDLE

Также обратите внимание на пользовательскую кнопку Facebook Share JSFIDDLE

Включите код Facebook JavaScript SDK сразу после открывающего <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
Да, у меня серьезные проблемы с тем, чтобы это работало ... У меня просто пустой div.
Майкл
@erdomester Скрипка не отображается в Chrome или Firefox. Это связано с тем, что безопасность браузеров предотвращает использование iframe в песочнице. Открытие 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;
});
tq
источник
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 для вызова диалогового окна, он указывается автоматически и выбирает соответствующий тип отображения для устройства. Если вы используете Facebook SDK для JavaScript, по умолчанию будет использоваться модальный тип iframe для людей, вошедших в ваше приложение, или асинхронный при использовании в игре на Facebook.com, а также всплывающее окно для всех остальных. При необходимости вы также можете принудительно использовать всплывающие окна или типы страниц при использовании Facebook SDK для JavaScript. Мобильные веб-приложения всегда по умолчанию используют сенсорный экран. Поделиться Параметры

  • href => Ссылка, прикрепленная к этому сообщению. Требуется при использовании метода share. Включите метатеги открытого графика на страницу по этому 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>

Я не могу поделиться фрагментом с этим, но вы поняли идею ...

DagicCross
источник