it-swarm.com.ru

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

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

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

Я хочу добавить кнопку "Поделиться" на своем веб-сайте, чтобы просто опубликовать содержимое моего сайта на стене. кто хочет поделиться этим.

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

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

83
Sahibjot Singh

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

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

210
asifrc

Вы можете сделать это с помощью асинхронного 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 AppId. Если у вас нет AppId для Facebook и вы не знаете, как его создать, пожалуйста отметьте это

Добавить библиотеку 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">

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

24
Virat Gaywala

Вы можете узнать больше о кнопке "Поделиться" здесь, на сайте разработчиков 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 Поделиться

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

enter image description here

Проверьте работоспособность JSFIDDLE

13
Subodh Ghulaxe

Для 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;
});
4
t q

Share Dialog без входа в Facebook

Вы можете запустить диалоговое окно Share, используя функцию FB.ui с параметром метода share, чтобы поделиться ссылкой. Это диалоговое окно доступно в 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 Login.

Также вы можете напрямую поделиться ссылкой на звонок, используя 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. Этот тип отображения называется страницей. Если вы используете один из наших iOS или Android SDK для вызова диалогового окна, это указывается автоматически и выбирает подходящий тип отображения для устройства. Если вы используете Facebook SDK для JavaScript, по умолчанию это будет модальный тип iframe для людей, вошедших в ваше приложение, или асинхронный при использовании в игре на Facebook.com, и всплывающее окно для всех остальных. При необходимости можно также использовать всплывающее окно или типы страниц при использовании Facebook SDK для JavaScript. Мобильные веб-приложения по умолчанию всегда используют тип сенсорного дисплея. поделиться параметрами

  • href => Ссылка на этот пост. Обязательно при использовании метода share. Включите мета-теги открытого графика на странице по этому URL-адресу, чтобы настроить общий материал.
1
Somnath Muluk

Для вашего собственного конкретного сервера или других страниц и кнопки с изображением вы можете использовать что-то вроде этого (только 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>

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

1
DagicCross