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.