Przycisk udostępniania na Facebooku i niestandardowy tekst [zamknięte]


94

Czy jest jakiś sposób na utworzenie przycisku udostępniania na Facebooku, który publikuje niestandardowy tekst na ścianie lub w kanale wiadomości?


Odpowiedzi:


94

Używamy czegoś takiego [użyj w jednej linii]:

<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
Czy wiesz, jak otworzyć ten link w wyskakującym okienku lub oknie modalnym? Po prostu nie mogę znaleźć działającej metody, nie jest to tak proste, jak użycie kodu ogólnego wyskakującego okienka ...
tvgemert

1
Bardziej skuteczna niż odpowiedź na górze.
Mateng

29
@tvgemert: Spróbuj <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>itp.
Mateng,

Idealnie, działa to również w przypadku adresów URL z hashbangiem!
dvtoever,

73
To już nie działa.
Chuck Le Butt

30

Aby nadać niestandardowe parametry udostępniania na Facebooku, lepiej podać tylko link, a Facebook automatycznie pobierze tytuł + opis + zdjęcie ze strony, którą udostępniasz. Aby „pomóc” Facebook API znaleźć te rzeczy, możesz umieścić następujące rzeczy w nagłówku strony, którą udostępniasz:

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

Sprawdź tutaj

Jeśli strona nie jest pod Twoją kontrolą, skorzystaj z tego, co udostępnił AllisonC powyżej.

W przypadku zachowania typu popup modalview:

Użyj własnego przycisku / linku / tekstu, a następnie możesz użyć wyskakującego okienka typu widoku modalnego w ten sposób:

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

gdzie twitterbtn-link i facebookbtn-link to identyfikatory kotwic.


Jeśli adresy URL są identyczne, czy dane z właściwości meta są buforowane przez Facebook? Czy mogę wstawiać np. Indywidualne dane POST do każdego wyświetlenia strony?
Mateng

Nie rozumiem, co przez to rozumiesz.
ShayanK

Właśnie to znalazłem. Mam kod polubienia / udostępniania na mojej stronie głównej, który jest ustawiony tak, aby polubić / udostępnić stronę na Facebooku powiązaną z moją firmą. Wygląda na to, że ignoruje metatagi Facebooka, które mam na stronie. Czy ktoś napotkał ten problem?
Chris Hawkins,

1
Ta metoda wydaje się już nie działać. Myślę, że jedynym sposobem uzyskania spersonalizowanego przycisku udostępniania na Facebooku (z własnym tekstem, tytułem i obrazem) jest użycie Facebook SDK.
Ryan Coolwebs,

Świetne rozwiązanie, aby było również nowoczesne, if( window.open(.....) ) event.preventDefault();zamiast po prostu zwracać fałsz; ˙! - w ten sposób zapobiega tylko domyślnemu zachowaniu (otwieranie linku) po otwarciu okna - zapewnia awaryjne działanie, gdy nie było ...
jave.web

12

użyj tej funkcji pochodzącej z linku dostarczonego przez 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;
}

Lub możesz również użyć najnowszej funkcji FB.ui, jeśli używasz FB JavaScript SDK do bardziej kontrolowanej funkcji wywołania zwrotnego.

patrz: 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.');
            }
          }
        );
    }

ten FB.ui jest prawdopodobnie najbardziej niezawodnym podejściem, dodatkowo możesz załadować ten skrypt na dole strony wraz z resztą swojego javascript i załadować zmienne / selektory jquery jako wartości. Dzięki za opublikowanie tego.
klewis

@blackhawk ... ale FB.ui wymaga również app_id - to nie zawsze jest opcją ... :)
jave.web

@Bravesh B Przeszukując dokumentację związaną z FB.ui, z którą się łączysz, nie mogłem znaleźć parametrów, które przekazujesz do FB.ui, takich jak zdjęcie, podpis, opis. Czy możesz mi powiedzieć, gdzie je znalazłeś?
Ferex

@Ferex możesz znaleźć parametry tutaj developers.facebook.com/docs/sharing/reference/feed-dialog
Bhavesh B

1
Od 18 kwietnia 2017 r. Poniższe parametry nie są już obsługiwane przez interfejs Graph API w wersji 2.9 i nowszych. W przypadku wersji 2.8 i niższych parametry będą działać do 17 lipca 2017 r.
Goran Jakovljevic


6

Możesz dostosować okno dialogowe udostępniania na Facebooku, używając asynchronicznego zestawu SDK JavaScript dostarczonego przez Facebooka i konfigurując wartości jego parametrów

Spójrz na następujący kod:

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

Przed skopiowaniem i wklejeniem poniższego kodu musisz najpierw zainicjować SDK i skonfigurować bibliotekę jQuery. Proszę kliknąć tutaj , aby wiedzieć, krok po kroku, jak informacjami zawartymi na tej samej.


3

To jest obecne rozwiązanie (grudzień 2014) i działa całkiem dobrze. Zawiera

  • otwórz wyskakujące okienko
  • samodzielny fragment kodu, nie wymaga niczego więcej
  • działa z lub bez JS. Jeśli JS jest wyłączony, okno udostępniania nadal się otwiera, aczkolwiek nie jako małe wyskakujące okienko.

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

Zmienna $ url powinna być zdefiniowana jako adres URL do udostępnienia.


nie działa w moim przypadku, w którym moja strona zaczyna się od https ...?
d4v1dv00

1
Ta odpowiedź jest teraz nieważna, ponieważ Facebook przestał wspierać jakiekolwiek inne parametry w programie udostępniającym
Vikrant

0

To prosty kanał dialogowy oferowany przez Facebooka. Czytaj tutaj, aby uzyskać więcej szczegółów linku


-2

możesz połączyć pomysł AllisonC z window.openfunkcją: http://www.w3schools.com/jsref/met_win_open.asp

function openWin(url) {
    myWindow = window.open(url, '', 'width=800,height=400');
    myWindow.focus();
}

Następnie przy każdym łączu wywołujesz funkcję openWin z odpowiednim adresem URL sieci społecznościowej.


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.