Tombol berbagi Facebook dan teks kustom [ditutup]


94

Apakah ada cara untuk membuat tombol bagikan facebook yang memposting teks khusus di dinding atau umpan berita?


kemungkinan duplikat bidang Sesuaikan pesan di Facebook Bagikan
Mike Lyons

Jawaban:


94

Kami menggunakan sesuatu seperti ini [gunakan dalam satu baris]:

<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
Apakah Anda tahu cara membuat tautan ini terbuka di jendela popup atau modal? Tidak dapat menemukan metode yang berfungsi, itu tidak sesederhana menggunakan beberapa kode jendela popup generik ...
tvgemert

1
Lebih efektif daripada jawaban di atas.
Mateng

29
@tvgemert: Coba <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>dll.
Mateng

Sempurna, ini juga berfungsi untuk url hashbang!
dvtoever

73
Ini tidak lagi berfungsi.
Chuck Le Butt

30

Untuk memberikan parameter khusus pada share facebook, sebaiknya berikan hanya tautan dan facebook mendapatkan Judul + Deskripsi + Gambarnya secara otomatis dari halaman yang Anda bagikan. Untuk "membantu" facebook API menemukan hal-hal itu, Anda dapat meletakkan hal-hal berikut di header halaman yang Anda bagikan:

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

Cek di sini

Jika halaman tersebut tidak di bawah kendali Anda, gunakan apa yang telah dibagikan oleh AllisonC di atas.

Untuk perilaku jenis modalview popup:

Gunakan tombol / tautan / teks Anda sendiri dan kemudian Anda dapat menggunakan jenis tampilan modal popup dengan cara ini:

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

di mana twitterbtn-link dan facebookbtn-link keduanya adalah id dari jangkar.


Jika URL identik, apakah data dari properti meta sedang di-cache oleh facebook? Atau dapatkah saya memasukkan, misalnya, data POST individu dengan setiap tampilan halaman?
Mateng

Saya tidak mengerti apa yang Anda maksud dengan itu.
ShayanK

Saya baru saja menemukan ini. Saya memiliki kode suka / bagikan di beranda saya yang disetel untuk menyukai / membagikan halaman facebook yang terkait dengan bisnis saya. Sepertinya tag meta facebook yang saya miliki di halaman diabaikan. Ada yang mengalami masalah ini?
Chris Hawkins

1
Metode ini sepertinya tidak berfungsi lagi. Saya pikir satu-satunya cara untuk mendapatkan tombol berbagi Facebook yang disesuaikan (dengan teks, judul, dan gambar Anda sendiri) adalah dengan menggunakan SDK Facebook.
Ryan Coolwebs

Solusi hebat, untuk membuatnya juga modern lakukan if( window.open(.....) ) event.preventDefault();alih - alih hanya `mengembalikan salah; ˙! - dengan cara itu hanya mencegah perilaku default (tautan terbuka) saat jendela dibuka - menyediakan fallback jika tidak ...
jave.web

12

gunakan fungsi ini yang berasal dari tautan yang disediakan oleh 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;
}

Atau Anda juga dapat menggunakan Fungsi FB.ui terbaru jika menggunakan FB JavaScript SDK untuk fungsi panggilan balik yang lebih terkontrol.

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

FB.ui ini mungkin merupakan pendekatan yang paling dapat diandalkan, ditambah lagi Anda dapat memuat skrip ini di bagian bawah halaman Anda dengan javascript lainnya, dan memuat variabel / pemilih jquery sebagai nilai. Terima kasih telah memposting ini.
klewis

@blackhawk ... tetapi FB.ui juga membutuhkan app_id - itu tidak selalu menjadi pilihan ... :)
jave.web

@Bravesh B Mencari dokumentasi yang terkait dengan FB.ui yang Anda tautkan Saya tidak dapat menemukan parameter yang Anda berikan ke FB.ui seperti gambar, keterangan, deskripsi. Bisakah Anda memberi tahu saya di mana Anda menemukannya?
Ferex

@Ferex Anda dapat menemukan params di sini developers.facebook.com/docs/sharing/reference/feed-dialog
Bhavesh B

1
Mulai 18 April 2017, parameter berikut tidak lagi didukung oleh Graph API versi 2.9 dan yang lebih tinggi. Untuk versi 2.8 dan yang lebih rendah, parameter akan terus berfungsi hingga 17 Juli 2017.
Goran Jakovljevic

9

Anda memiliki beberapa opsi:

  1. Gunakan tombol Berbagi FB standar dan atur teks melalui Open Graph API dan tag meta di halaman Anda.
  2. Alih-alih Berbagi, gunakan FB.ui metode stream.publish 's, yang memungkinkan anda mengontrol URL, judul, keterangan, deskripsi dan thumbnail pada saat run-time.
  3. Atau gunakan http://www.facebook.com/sharer.php dengan parameter yang sesuai.

2
Bisakah Anda menjelaskan yang terakhir? Apa sajakah parameter ini?
Jeroen Vannevel

6

Anda dapat menyesuaikan kotak dialog berbagi Facebook dengan menggunakan JavaScript SDK asinkron yang disediakan oleh Facebook dan mengatur nilai parameternya

Lihat kode berikut:

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

Sebelum menyalin dan menempelkan kode di bawah ini, Anda harus terlebih dahulu menginisialisasi SDK dan menyiapkan pustaka jQuery. Silakan klik di sini untuk mengetahui langkah demi langkah bagaimana mengatur informasi yang sama.


3

Ini adalah solusi saat ini (Des 2014) dan berfungsi dengan baik. Ini fitur

  • buka jendela popup
  • cuplikan mandiri, tidak memerlukan apa pun
  • bekerja dengan atau tanpa JS. Jika JS dinonaktifkan, jendela share masih terbuka, meskipun bukan sebagai popup kecil.

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

$ url var harus ditentukan sebagai URL yang akan dibagikan.


itu tidak berfungsi pada kasus saya di mana halaman saya dimulai dengan https ...?
d4v1dv00

1
Jawaban ini tidak valid sekarang, karena Facebook telah berhenti mendukung parameter lain di sharer
Vikrant


-2

Anda dapat menggabungkan ide AllisonC dengan window.openfungsi: http://www.w3schools.com/jsref/met_win_open.asp

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

Dan kemudian pada setiap tautan Anda memanggil fungsi openWin dengan url jejaring sosial yang benar.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.