จะเพิ่มปุ่มแชร์บนเว็บไซต์ของฉันได้อย่างไร?

Question 1

ฉันมีรหัสนี้ที่คิดว่าใช้งานได้ แต่ใช้ไม่ได้ ถ้าสิ่งนี้ช่วยคุณได้ก็คงจะดีมาก

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

ฉันต้องการเพิ่มปุ่มแชร์บนเว็บไซต์ของฉันซึ่งควรจะโพสต์เนื้อหาของเว็บไซต์ของฉันบนผนัง ที่ต้องการแบ่งปัน

ฉันค้นคว้ามามาก แต่ไม่ได้อะไรเลย กรุณาช่วยฉันในเรื่องนี้

ขอบคุณล่วงหน้า.

Question 2

คุณไม่จำเป็นต้องใช้รหัสนั้นทั้งหมด สิ่งที่คุณต้องมีคือบรรทัดต่อไปนี้:

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

สามารถดูเอกสารได้ที่https://developers.facebook.com/docs/reference/plugins/share-links/

Question 3

คุณสามารถทำได้โดยใช้ Javascript SDK แบบอะซิงโครนัสที่ facebook จัดหาให้

ดูรหัสต่อไปนี้

การเริ่มต้น 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>

หมายเหตุ: อย่าลืมแทนที่ ID แอปของคุณด้วย AppId facebook ของคุณ หากคุณไม่มี AppId ของ facebook และไม่รู้วิธีสร้างโปรดตรวจสอบสิ่งนี้

เพิ่ม JQuery Library ฉันต้องการ Google Library

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

เพิ่มกล่องโต้ตอบการแชร์ (คุณสามารถปรับแต่งกล่องโต้ตอบนี้ได้โดยการตั้งค่าพารามิเตอร์

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

ในที่สุดก็เพิ่มปุ่มรูปภาพ

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

สำหรับข้อมูลเพิ่มเติมโดยละเอียด กรุณาคลิกที่นี่

Question 4

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับปุ่มแชร์ได้ที่นี่บนเว็บไซต์นักพัฒนา Facebook

ทำงานJSFIDDLE

ดูที่ปุ่มแชร์ Facebook แบบกำหนดเองJSFIDDLE

ใส่โค้ด Facebook JavaScript SDK ไว้หลัง<body>แท็กเปิด

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

และวางโค้ดด้านล่างทุกที่ที่คุณต้องการแสดงปุ่มแชร์ Facebook

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

ป้อนคำอธิบายภาพที่นี่

ตรวจสอบJSFIDDLE ที่ใช้งานได้

Question 5

สำหรับ Facebook แชร์ด้วยรูปภาพที่ไม่มีAPIและใช้#ลิงก์ในรายละเอียดไปยังเพจย่อยเคล็ดลับคือการแชร์รูปภาพเป็นpicture=

ตัวแปรmainUrlจะเป็น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;
});

Question 6

แบ่งปันกล่องโต้ตอบโดยไม่ต้องเข้าสู่ระบบ Facebook

คุณสามารถทริกเกอร์ไดอะล็อกแชร์โดยใช้ฟังก์ชัน FB.ui ด้วยพารามิเตอร์วิธีการแชร์เพื่อแชร์ลิงก์ กล่องโต้ตอบนี้มีอยู่ใน SDK ของ Facebook สำหรับ JavaScript, iOS และ Android โดยทำการเปลี่ยนเส้นทางไปยัง URL แบบเต็ม

คุณสามารถเรียกใช้การโทรนี้:

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

คุณยังสามารถใส่เมตาแท็กกราฟแบบเปิดในเพจที่ URL นี้เพื่อปรับแต่งเรื่องราวที่แชร์กลับไปที่ Facebook

โปรดทราบว่า response.error_message จะปรากฏก็ต่อเมื่อมีคนที่ใช้แอพของคุณตรวจสอบสิทธิ์แอพของคุณด้วย Facebook Login

นอกจากนี้คุณสามารถแชร์ลิงค์โดยตรงกับการโทรโดยใช้ 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 => ตัวระบุเฉพาะของแอปของคุณ (จำเป็น)
redirect_uri => URL ที่จะเปลี่ยนเส้นทางไปหลังจากที่มีคนคลิกปุ่มบนกล่องโต้ตอบ จำเป็นเมื่อใช้การเปลี่ยนเส้นทาง URL
display => กำหนดวิธีการแสดงผลไดอะล็อก

หากคุณกำลังใช้การติดตั้งกล่องโต้ตอบการเปลี่ยนเส้นทาง URL นี่จะเป็นการแสดงผลแบบเต็มหน้าซึ่งแสดงใน Facebook.com ประเภทการแสดงผลนี้เรียกว่าเพจ หากคุณใช้ iOS หรือ Android SDK ของเราเพื่อเรียกใช้กล่องโต้ตอบจะมีการระบุโดยอัตโนมัติและเลือกประเภทการแสดงผลที่เหมาะสมสำหรับอุปกรณ์ หากคุณใช้ Facebook SDK สำหรับ JavaScript ค่านี้จะเริ่มต้นเป็นประเภทโมดอล iframe สำหรับผู้ที่ลงชื่อเข้าใช้แอพของคุณหรือ async เมื่อใช้ภายในเกมบน Facebook.com และหน้าต่างป๊อปอัปสำหรับคนอื่น ๆ คุณยังสามารถบังคับป๊อปอัปหรือประเภทเพจเมื่อใช้ Facebook SDK สำหรับ JavaScript ได้หากจำเป็น เว็บแอปบนอุปกรณ์เคลื่อนที่จะใช้ค่าเริ่มต้นเป็นประเภทการแสดงผลแบบสัมผัสเสมอ แบ่งปันพารามิเตอร์

href => ลิงค์ที่แนบมากับโพสต์นี้ จำเป็นเมื่อใช้วิธีการแชร์ รวมเมตาแท็กกราฟแบบเปิดในเพจที่ URL นี้เพื่อปรับแต่งเรื่องราวที่แชร์

Question 7

สำหรับเซิร์ฟเวอร์เฉพาะของคุณเองหรือปุ่มหน้าและรูปภาพอื่นคุณสามารถใช้สิ่งนี้ได้ (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>

ฉันไม่สามารถแบ่งปันตัวอย่างข้อมูลนี้ได้ แต่คุณจะได้รับแนวคิด ...

Question 8

นี้หน้า Facebookมีเครื่องมือง่ายๆที่จะสร้างปุ่มหุ้นต่างๆ

ตัวอย่างเช่นนี่คือผลลัพธ์บางส่วนที่ฉันได้รับ:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="dilSYGI6"></script>
<div class="fb-share-button" data-href="https://www.mocacleveland.org/exhibitions/lee-mingwei-you-are-not-stranger" data-layout="button" data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.mocacleveland.org%2Fexhibitions%2Flee-mingwei-you-are-not-stranger&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>
</div>