Bagaimana cara menambahkan tombol share facebook di website saya?

100

Saya memiliki kode ini yang seharusnya berfungsi, tetapi tidak berfungsi. Jika ini membantu Anda, itu akan bagus.

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

Saya ingin menambahkan tombol share facebook di website saya, yang seharusnya memposting konten website saya di dinding. yang ingin membagikannya.

Saya telah banyak meneliti tetapi tidak mendapatkan apa-apa. Mohon bantu saya dalam hal ini.

Terima kasih sebelumnya.

javascript facebook facebook-javascript-sdk share facebook-social-plugins Sahibjot Singh
sumber
2
sharelinkgenerator.com
Ronnie Royston

Jawaban:

254

Anda tidak membutuhkan semua kode itu. Yang Anda butuhkan hanyalah baris berikut:

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

Dokumentasi dapat ditemukan di https://developers.facebook.com/docs/reference/plugins/share-links/

asifrc
sumber
7
Tidak terlalu suka opsi ini ... berharap ada tautan bergaya, seperti tombol tweet
Serj Sagan
104
Mengapa Anda tidak memberi gaya pada tautan itu? Saya pasti lebih suka opsi ini. Saya suka mengontrol tampilan desain saya.
Sheriffderek
6
Selain itu, cara ini tidak menambahkan kode sampah facebook, yang akan memperlambat halaman Anda. Lihat plugin jquery sharrre.com, ini memudahkan untuk menyesuaikan tampilan dan menggabungkan beberapa tombol "suka" sosial menjadi satu.
pixeline
3
Ya, Anda masih dapat menggunakan tautan berbagi sederhana. Juga, lihat halaman sederhana ini untuk membantu membangun tautan sederhana untuk semua situs media sosial populer Anda: sharelinkgenerator.com
pistol-pete
1
Catatan penting: Ide di ponsel ini membuka situs web Facebook (Bukan aplikasi FB). Penipu kecil (atau besar).
Ezra Siton
26

Anda dapat melakukan ini dengan menggunakan Javascript SDK asynchronous yang disediakan oleh facebook

Lihat kode berikut

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

Catatan: Ingatlah untuk mengganti ID APLIKASI ANDA dengan AppId facebook Anda. Jika Anda tidak memiliki AppId facebook dan Anda tidak tahu cara membuatnya, silakan periksa ini

Tambahkan JQuery Library, saya lebih suka Google Library

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

Tambahkan kotak dialog berbagi (Anda dapat menyesuaikan kotak dialog ini dengan mengatur parameter

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

Sekarang akhirnya tambahkan tombol gambar

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

Untuk jenis informasi yang lebih detail. silahkan klik disini

Virat Gaywala - CSM
sumber
7
... bandingkan ini dengan inisialisasi padanan Twitter. Gila.
Michael
6
Pendekatan Anda membutuhkan id aplikasi, itu sangat merepotkan.
horseyguy
Yang ini masih berfungsi dengan baik! Karya yang luar biasa!
Coding Freak
Bagus!! mudah dimengerti. Tapi bagaimana kita tahu, jika pengguna benar-benar membagikan konten kita? NB: response.error_message hanya akan muncul jika seseorang yang menggunakan aplikasi Anda telah mengautentikasi aplikasi Anda
Pearl
14

Anda dapat membaca lebih lanjut tentang tombol bagikan di sini di situs web pengembang Facebook

Bekerja JSFIDDLE

Lihat juga tombol Bagikan Facebook khusus JSFIDDLE

Sertakan kode Facebook JavaScript SDK tepat setelah <body>tag pembuka

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

Dan letakkan kode di bawah ini di mana pun Anda ingin menampilkan tombol Bagikan Facebook

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

masukkan deskripsi gambar di sini

Periksa JSFIDDLE yang berfungsi

Subodh Ghulaxe
sumber
8
Mungkinkah kode ini tidak berfungsi lagi? Bahkan tidak di jsfiddle
erdomester
8
Ya mengalami masalah serius untuk membuat ini bekerja sendiri ... Saya hanya berakhir dengan div kosong.
Michael
@erdomester Biola tidak akan ditampilkan di Chrome atau Firefox. Ini karena keamanan browser yang mencegah iframe dalam sandbox. Membuka jsfiddle di Safari akan ditampilkan dan setelah Anda menerapkan di luar jsfiddle, jsfiddle akan ditampilkan di browser lain.
JisuKim82
4

Untuk share Facebook dengan gambar tanpa API dan menggunakan #untuk nge-link jauh ke sub halaman, trik ini adalah untuk berbagi gambar sebagai picture=

variabel The mainUrlakanhttp://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
sumber
2

Bagikan Dialog tanpa memerlukan login Facebook

Anda dapat Memicu Dialog Berbagi menggunakan fungsi FB.ui dengan parameter metode berbagi untuk membagikan tautan. Dialog ini tersedia di SDK Facebook untuk JavaScript, iOS, dan Android dengan melakukan pengalihan penuh ke URL.

Anda dapat memicu panggilan ini:

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

Anda juga dapat memasukkan tag meta grafik terbuka pada halaman di URL ini untuk menyesuaikan cerita yang dibagikan kembali ke Facebook.

Perhatikan bahwa response.error_message hanya akan muncul jika seseorang yang menggunakan aplikasi Anda telah mengautentikasi aplikasi Anda dengan Login dengan Facebook.

Anda juga dapat langsung berbagi tautan dengan panggilan dengan memiliki 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 => Pengenal unik aplikasi Anda. (Yg dibutuhkan.)

  • redirect_uri => URL untuk dialihkan setelah seseorang mengklik tombol pada dialog. Diperlukan saat menggunakan pengalihan URL.

  • display => Menentukan bagaimana dialog ditampilkan.

Jika Anda menggunakan implementasi dialog pengalihan URL, maka ini akan menjadi tampilan halaman penuh, ditampilkan dalam Facebook.com. Jenis tampilan ini disebut halaman. Jika Anda menggunakan salah satu SDK iOS atau Android kami untuk menjalankan dialog, ini secara otomatis ditentukan dan memilih jenis tampilan yang sesuai untuk perangkat. Jika Anda menggunakan Facebook SDK untuk JavaScript, ini akan default ke jenis modal iframe untuk orang-orang yang masuk ke aplikasi Anda atau asinkron saat menggunakan dalam game di Facebook.com, dan jendela popup untuk orang lain. Anda juga dapat memaksa popup atau jenis halaman saat menggunakan Facebook SDK untuk JavaScript, jika perlu. Aplikasi web seluler akan selalu default ke jenis layar sentuh. berbagi Parameter

  • href => Tautan yang dilampirkan ke posting ini. Diperlukan saat menggunakan berbagi metode. Sertakan tag meta grafik terbuka di halaman di URL ini untuk menyesuaikan cerita yang dibagikan.
Somnath Muluk
sumber
1

Untuk server spesifik Anda sendiri atau halaman berbeda & tombol gambar, Anda dapat menggunakan sesuatu seperti ini (khusus 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>

Saya tidak dapat membagikan cuplikan dengan ini tetapi Anda akan mendapatkan ide ...

DagicCross
sumber