Làm thế nào để thêm nút chia sẻ facebook trên trang web của tôi?

99

Tôi có mã này giả sử hoạt động, nhưng không hoạt động. Nếu điều này giúp bạn dù sao thì điều đó thật tuyệt.

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

Tôi muốn thêm nút chia sẻ facebook trên trang web của mình, chỉ cần đăng nội dung trang web của tôi lên tường. người muốn chia sẻ nó.

Tôi đã nghiên cứu rất nhiều nhưng không thu được gì. Xin hãy giúp tôi trong việc này.

Cảm ơn trước.

javascript  facebook  facebook-javascript-sdk  share  facebook-social-plugins 
— Sahibjot Singh
nguồn
2
— Ronnie Royston

Câu trả lời:

251

Bạn không cần tất cả mã đó. Tất cả những gì bạn cần là những dòng sau:

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

Tài liệu có thể được tìm thấy tại https://developers.facebook.com/docs/reference/plugins/share-links/

— asifrc
nguồn
7
Không thực sự như tùy chọn này ... muốn có một liên kết theo kiểu, loại giống như nút tweet
— Serj Sagan
104
Tại sao bạn không tạo kiểu liên kết sau đó? Tôi chắc chắn thích tùy chọn này hơn. Tôi muốn kiểm soát cách thiết kế của mình trông như thế nào.
— sheriffderek
6
Ngoài ra, cách này không thêm mã rác facebook, điều đó sẽ làm chậm trang của bạn. Hãy xem plugin jquery của sharrre.com, nó giúp bạn dễ dàng tùy chỉnh giao diện và gộp nhiều nút "thích" trên mạng xã hội thành một.
— pixeline
3
Có, bạn vẫn có thể sử dụng các liên kết chia sẻ đơn giản. Ngoài ra, hãy kiểm tra trang đơn giản này để được giúp đỡ xây dựng các liên kết đơn giản cho tất cả các trang web của bạn phổ biến xã hội phương tiện truyền thông: sharelinkgenerator.com
— pistol-pete
1
Lưu ý quan trọng: Ý tưởng này trên thiết bị di động sẽ mở ra trang web Facebook (Không phải ứng dụng FB). Con nhỏ (Hoặc lớn).
— Ezra Siton
26

Bạn có thể thực hiện việc này bằng cách sử dụng SDK Javascript không đồng bộ do facebook cung cấp

Hãy xem đoạn mã sau

Khởi tạo SDK Javascript FB

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

Lưu ý: Hãy nhớ thay thế ID ứng dụng của bạn bằng Ứng dụng facebook của bạn. Nếu bạn không có Facebook AppId và bạn không biết cách tạo, vui lòng kiểm tra phần này

Thêm Thư viện JQuery, tôi muốn Thư viện Google hơn

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

Thêm hộp thoại chia sẻ (Bạn có thể tùy chỉnh hộp thoại này bằng cách thiết lập các thông số

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

Bây giờ cuối cùng thêm nút hình ảnh

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

Để biết thêm loại thông tin chi tiết. vui lòng bấm vào đây

— Virat Gaywala - CSM
nguồn
7
... so sánh điều này với khởi tạo của Twitter tương đương. Quả hạch.
— Michael
6
Cách tiếp cận của bạn yêu cầu một id ứng dụng, đó là một điều khó khăn.
— Horseyguy
Cái này vẫn hoạt động như một cái duyên! Tác phẩm xuất sắc!
— Coding Freak
Đẹp!! dễ hiểu. Nhưng làm thế nào để chúng tôi biết, nếu người dùng đã thực sự chia sẻ nội dung của chúng tôi? PS: response.error_message sẽ chỉ xuất hiện nếu ai đó sử dụng ứng dụng của bạn đã authenciated ứng dụng của bạn
— Trân
14

Bạn có thể đọc thêm về nút chia sẻ tại đây trên trang web của nhà phát triển Facebook

Working JSFIDDLE

Ngoài ra, hãy xem nút Chia sẻ Facebook tùy chỉnh JSFIDDLE

Bao gồm mã SDK JavaScript của Facebook ngay sau <body>thẻ mở

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

Và đặt mã bên dưới bất cứ nơi nào bạn muốn hiển thị nút Chia sẻ trên Facebook

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

nhập mô tả hình ảnh ở đây

Kiểm tra JSFIDDLE hoạt động

— Subodh Ghulaxe
nguồn
8
Có thể mã này không hoạt động nữa không? Thậm chí không có trong jsfiddle
— erdomester
8
Đúng là gặp khó khăn nghiêm trọng khi tự mình làm việc này ... Tôi chỉ kết thúc với một div trống.
— Michael
@erdomester Fiddle sẽ không hiển thị trong Chrome hoặc Firefox. Đó là do bảo mật của trình duyệt ngăn chặn iframe hộp cát. Mở jsfiddle lên trong Safari sẽ hiển thị và khi bạn triển khai bên ngoài jsfiddle, nó sẽ hiển thị trong các trình duyệt khác.
— JisuKim82
4

Đối với việc chia sẻ hình ảnh trên Facebook với một hình ảnh mà không có API và sử dụng #liên kết sâu vào trang con, mẹo là chia sẻ hình ảnh dưới dạng picture=

Biến mainUrlsẽ làhttp://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
nguồn
2

Chia sẻ Hộp thoại mà không yêu cầu đăng nhập Facebook

Bạn có thể Kích hoạt Hộp thoại Chia sẻ bằng cách sử dụng hàm FB.ui với tham số phương thức chia sẻ để chia sẻ liên kết. Hộp thoại này có sẵn trong SDK Facebook dành cho JavaScript, iOS và Android bằng cách thực hiện chuyển hướng đầy đủ đến một URL.

Bạn có thể kích hoạt cuộc gọi này:

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

Bạn cũng có thể bao gồm các thẻ meta biểu đồ mở trên trang tại URL này để tùy chỉnh câu chuyện được chia sẻ trở lại Facebook.

Lưu ý rằng response.error_message sẽ chỉ xuất hiện nếu ai đó sử dụng ứng dụng của bạn đã xác thực ứng dụng của bạn bằng Đăng nhập Facebook.

Ngoài ra, bạn có thể trực tiếp chia sẻ liên kết với cuộc gọi bằng cách có SDK Facebook Javascript.

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 => Mã nhận dạng duy nhất của ứng dụng của bạn. (Cần thiết.)

  • redirect_uri => URL để chuyển hướng đến sau khi một người nhấp vào nút trên hộp thoại. Bắt buộc khi sử dụng chuyển hướng URL.

  • display => Xác định cách hộp thoại được hiển thị.

Nếu bạn đang sử dụng triển khai hộp thoại chuyển hướng URL, thì đây sẽ là màn hình toàn trang, được hiển thị trong Facebook.com. Loại hiển thị này được gọi là trang. Nếu bạn đang sử dụng một trong các SDK iOS hoặc Android của chúng tôi để gọi hộp thoại, hộp thoại này sẽ tự động được chỉ định và chọn kiểu hiển thị thích hợp cho thiết bị. Nếu bạn đang sử dụng Facebook SDK cho JavaScript, điều này sẽ mặc định thành loại iframe phương thức cho những người đã đăng nhập vào ứng dụng của bạn hoặc không đồng bộ khi sử dụng trong trò chơi trên Facebook.com và cửa sổ bật lên cho những người khác. Bạn cũng có thể buộc các loại trang hoặc cửa sổ bật lên khi sử dụng Facebook SDK cho JavaScript, nếu cần. Ứng dụng web dành cho thiết bị di động sẽ luôn mặc định là loại màn hình cảm ứng. chia sẻ các thông số

  • href => Liên kết đính kèm với bài đăng này. Bắt buộc khi sử dụng phương thức chia sẻ. Bao gồm các thẻ meta biểu đồ mở trong trang tại URL này để tùy chỉnh câu chuyện được chia sẻ.
— Somnath Muluk
nguồn
1

Đối với máy chủ cụ thể của riêng bạn hoặc các trang và nút hình ảnh khác nhau, bạn có thể sử dụng một cái gì đó như thế này (chỉ 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>

Tôi không thể chia sẻ đoạn mã này nhưng bạn sẽ hiểu được ...

— DagicCross
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.