Jak dodać przycisk udostępniania Facebooka na mojej stronie?

100

Mam ten kod, który powinien działać, ale nie działa. Jeśli to ci pomoże, byłoby wspaniale.

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

Chcę dodać przycisk udostępniania na Facebooku na mojej stronie, który powinien po prostu zamieścić zawartość mojej strony na ścianie. którzy chcą się tym podzielić.

Dużo badałem, ale nic nie uzyskałem. Proszę, pomóż mi w tym.

Z góry dziękuję.

javascript facebook facebook-javascript-sdk share facebook-social-plugins Sahibjot Singh
źródło
2
sharelinkgenerator.com
Ronnie Royston

Odpowiedzi:

254

Nie potrzebujesz całego tego kodu. Potrzebujesz tylko następujących linii:

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

Dokumentację można znaleźć pod adresem https://developers.facebook.com/docs/reference/plugins/share-links/

asifrc
źródło
7
Nie podoba mi się ta opcja ... szkoda, że ​​nie ma stylowego linku, czegoś w rodzaju przycisku tweeta
Serj Sagan.
104
Dlaczego więc nie stylizujesz linku? Zdecydowanie wolę tę opcję. Lubię mieć kontrolę nad wyglądem moich projektów.
szeryfderek
6
Ponadto w ten sposób nie dodaje się kodu śmieciowego na Facebooku, który spowolniłby twoją stronę. Zobacz wtyczkę sharrre.com jquery, która ułatwia dostosowanie wyglądu i połączenie kilku przycisków społecznościowych „Lubię to” w jeden.
pixeline
3
Tak, nadal możesz używać prostych linków do udostępniania. Sprawdź również tę prostą stronę, aby uzyskać pomoc w tworzeniu prostych linków do wszystkich popularnych witryn w mediach społecznościowych: sharelinkgenerator.com
pistol-pete
1
Ważna uwaga: ten pomysł na telefon komórkowy otwiera witrynę Facebooka (nie aplikacja FB). Mały (lub duży) con.
Ezra Siton
26

Możesz to zrobić za pomocą asynchronicznego zestawu SDK JavaScript udostępnianego przez Facebook

Spójrz na poniższy kod

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

Uwaga: pamiętaj, aby zastąpić SWÓJ APP ID swoim Facebook AppId. Jeśli nie masz Facebooka AppId i nie wiesz, jak utworzyć, sprawdź to

Dodaj bibliotekę JQuery, wolałbym bibliotekę Google

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

Okno dialogowe Dodaj udział (można dostosować to okno dialogowe, konfigurując parametry

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

Teraz wreszcie dodaj przycisk obrazu

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

Aby uzyskać bardziej szczegółowe informacje. proszę kliknąć tutaj

Virat Gaywala - CSM
źródło
7
... porównaj to z inicjalizacją odpowiednika Twittera. Orzechy.
Michael
6
Twoje podejście wymaga identyfikatora aplikacji, to cholerny ból.
horseyguy
Ten wciąż działa jak urok! Świetna robota!
Coding Freak
Miły!! łatwy do zrozumienia. Ale skąd wiemy, czy użytkownik faktycznie udostępnił nasze treści? PS: response.error_message pojawi się tylko wtedy, gdy ktoś korzystający z Twojej aplikacji uwierzytelni Twoją aplikację
Pearl
14

Możesz przeczytać więcej o przycisku udostępniania tutaj na stronie programistów Facebooka

Działający JSFIDDLE

Spójrz także na niestandardowy przycisk udostępniania na Facebooku JSFIDDLE

Dołącz kod Facebook JavaScript SDK zaraz po otwierającym <body>tagu

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

I umieść poniższy kod w dowolnym miejscu, w którym chcesz wyświetlać przycisk Udostępnij na Facebooku

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

wprowadź opis obrazu tutaj

Sprawdź działający JSFIDDLE

Subodh Ghulaxe
źródło
8
Czy to możliwe, że ten kod już nie działa? Nawet w jsfiddle
erdomester
8
Tak, mam poważny problem z samodzielnym uruchomieniem tego ... Po prostu kończę z pustym div.
Michael,
@erdomester Skrzypce nie będą wyświetlane w przeglądarce Chrome ani Firefox. Dzieje się tak ze względu na zabezpieczenia przeglądarek, które uniemożliwiają wyświetlanie ramek iframe w piaskownicy. Otwarcie jsfiddle w Safari powinno się pokazać, a po zaimplementowaniu poza jsfiddle powinno pojawić się w innych przeglądarkach.
JisuKim82
4

Na Facebooku akcję z obrazem bez niego API i używając #do głębokiego linku do podstrony, sztuką było podzielić obraz jako picture=

zmienna mainUrlbędziehttp://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
źródło
2

Udostępnij okno dialogowe bez konieczności logowania się na Facebooku

Możesz wyzwolić okno udostępniania za pomocą funkcji FB.ui z parametrem share method, aby udostępnić łącze. To okno dialogowe jest dostępne w pakietach SDK Facebooka dla JavaScript, iOS i Android po wykonaniu pełnego przekierowania do adresu URL.

Możesz wywołać to połączenie:

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

Możesz również dołączyć metatagi Open Graph na stronie pod tym adresem URL, aby dostosować historię, która jest udostępniana z powrotem na Facebooku.

Zwróć uwagę, że response.error_message pojawi się tylko wtedy, gdy ktoś korzystający z Twojej aplikacji uwierzytelni Twoją aplikację za pomocą Facebooka Login.

Możesz także bezpośrednio udostępniać link z połączeniem, korzystając z JavaScript SDK Facebooka.

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 => Unikalny identyfikator Twojej aplikacji. (Wymagany.)

  • redirect_uri => Adres URL do przekierowania po kliknięciu przycisku w oknie dialogowym. Wymagane w przypadku korzystania z przekierowywania adresów URL.

  • display => Określa sposób renderowania okna dialogowego.

Jeśli używasz implementacji okna dialogowego przekierowania adresu URL, będzie to wyświetlanie całej strony, pokazane w witrynie Facebook.com. Ten typ wyświetlania nosi nazwę strony. Jeśli używasz jednego z naszych zestawów SDK systemu iOS lub Android do wywoływania okna dialogowego, jest to automatycznie określane i wybiera odpowiedni typ wyświetlania dla urządzenia. Jeśli korzystasz z Facebook SDK dla JavaScript, domyślnie będzie to modalny typ iframe dla osób zalogowanych do Twojej aplikacji lub asynchroniczny podczas korzystania z gry na Facebooku.com oraz wyskakujące okienko dla wszystkich innych. W razie potrzeby możesz również wymusić wyświetlanie wyskakujących okienek lub typów stron podczas korzystania z zestawu SDK Facebooka dla języka JavaScript. Mobilne aplikacje internetowe zawsze będą domyślnie używać typu wyświetlacza dotykowego. share Parameters

  • href => Link dołączony do tego postu. Wymagane w przypadku korzystania z metody udostępniania. Uwzględnij metatagi otwartego wykresu na stronie pod tym adresem URL, aby dostosować udostępnianą historię.
Somnath Muluk
źródło
1

Dla własnego serwera lub różnych przycisków stron i obrazów możesz użyć czegoś takiego (tylko 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>

Nie mogę udostępnić tego fragmentu, ale wpadniesz na pomysł ...

DagicCross
źródło