ปุ่มแชร์ Facebook และข้อความที่กำหนดเอง [ปิด]


94

มีวิธีใดบ้างในการสร้างปุ่มแชร์บน Facebook ที่โพสต์ข้อความที่กำหนดเองบนผนังหรือฟีดข่าว?


คำตอบ:


94

เราใช้สิ่งนี้ [use in one line]:

<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
คุณรู้วิธีทำให้ลิงค์นี้เปิดในหน้าต่างป๊อปอัปหรือโมดอลหรือไม่? ไม่พบวิธีการที่ใช้งานได้มันไม่ง่ายเหมือนการใช้รหัสหน้าต่างป๊อปอัปทั่วไป ...
tvgemert

1
มีประสิทธิภาพมากขึ้นแล้วคำตอบด้านบน
Mateng

29
@tvgemert: ลอง<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>ฯลฯ
Mateng

สมบูรณ์แบบนี้ยังใช้ได้กับ URL ของแฮชบัง!
dvtoever

74
วิธีนี้ใช้ไม่ได้อีกต่อไป
Chuck Le Butt

30

หากต้องการให้พารามิเตอร์ที่กำหนดเองกับ facebook แชร์จะดีกว่าเพื่อให้เฉพาะลิงก์และ facebook จะได้รับTitle + Description + Pictureโดยอัตโนมัติจากเพจที่คุณกำลังแชร์ ในการ "ช่วย" facebook API ให้ค้นหาสิ่งเหล่านั้นคุณสามารถใส่สิ่งต่อไปนี้ในส่วนหัวของเพจที่คุณกำลังแชร์:

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

ตรวจสอบที่นี่

หากเพจไม่ได้อยู่ภายใต้การควบคุมของคุณให้ใช้สิ่งที่AllisonCแบ่งปันด้านบน

สำหรับลักษณะการทำงานของประเภท modalview ป๊อปอัป:

ใช้ปุ่ม / ลิงค์ / ข้อความของคุณเองจากนั้นคุณสามารถใช้ป๊อปอัปประเภทมุมมองโมดอลด้วยวิธีนี้:

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

โดยที่ twitterbtn-link และ facebookbtn-link เป็นรหัสของจุดยึด


หาก URL เหมือนกันข้อมูลจากคุณสมบัติเมตาจะถูกแคชโดย facebook หรือไม่ หรือฉันสามารถใส่ข้อมูล POST แต่ละรายการในการดูทุกหน้าได้หรือไม่
Mateng

ฉันไม่เข้าใจว่าคุณหมายถึงอะไร
ShayanK

เพิ่งมาเจอเรื่องนี้ ฉันมีรหัสไลค์ / แชร์บนหน้าแรกของฉันที่ตั้งค่าให้กดไลค์ / แชร์เพจ facebook ที่เกี่ยวข้องกับธุรกิจของฉัน ดูเหมือนว่าจะเพิกเฉยต่อเมตาแท็กของ Facebook ที่ฉันมีบนเพจ ทุกคนพบปัญหานี้?
Chris Hawkins

1
วิธีนี้ดูเหมือนจะไม่ได้ผลอีกต่อไป ฉันคิดว่าวิธีเดียวที่จะบรรลุปุ่มแชร์ Facebook แบบกำหนดเอง (พร้อมข้อความชื่อและรูปภาพของคุณเอง) คือการใช้ Facebook SDK
Ryan Coolwebs

ทางออกที่ดีในการทำให้มันทันสมัยก็ทำได้if( window.open(.....) ) event.preventDefault();แทนที่จะเพียงแค่ `ส่งกลับเท็จ˙! - วิธีนี้จะป้องกันพฤติกรรมเริ่มต้นเท่านั้น (ลิงก์เปิด) เมื่อเปิดหน้าต่าง - ให้ทางเลือกเมื่อมันไม่ใช่ ...
jave.web

12

ใช้ฟังก์ชันนี้ที่ได้มาจากลิงค์ที่ให้มาโดย 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;
}

หรือคุณสามารถใช้ฟังก์ชันล่าสุดของ FB.ui หากใช้ FB JavaScript SDK สำหรับฟังก์ชันการโทรกลับที่ควบคุมได้มากขึ้น

อ้างอิง: 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 นี้อาจเป็นวิธีการที่น่าเชื่อถือที่สุดรวมทั้งคุณสามารถโหลดสคริปต์นี้ที่ด้านล่างของหน้าของคุณด้วยจาวาสคริปต์ที่เหลือของคุณและโหลดตัวแปร jquery / ตัวเลือกเป็นค่า ขอบคุณสำหรับการโพสต์สิ่งนี้
klewis

@blackhawk ... แต่ FB.ui ยังต้องการ app_id ซึ่งไม่ใช่ตัวเลือกเสมอไป ... :)
jave.web

@Bravesh B ค้นหาเอกสารที่เกี่ยวข้องกับ FB.ui ที่คุณเชื่อมโยงฉันไม่พบพารามิเตอร์ที่คุณส่งผ่านไปยัง FB.ui เช่นรูปภาพคำอธิบายภาพคำอธิบาย คุณช่วยบอกฉันได้ไหมว่าคุณพบพวกเขาที่ไหน
Ferex

@Ferex คุณสามารถค้นหาพารามิเตอร์ได้ที่นี่developers.facebook.com/docs/sharing/reference/feed-dialog
Bhavesh B

1
ตั้งแต่วันที่ 18 เมษายน 2017 เป็นต้นไป Graph API เวอร์ชัน 2.9 และสูงกว่าไม่รองรับพารามิเตอร์ต่อไปนี้อีกต่อไป สำหรับเวอร์ชัน 2.8 และต่ำกว่าพารามิเตอร์จะทำงานต่อไปจนถึงวันที่ 17 กรกฎาคม 2017
Goran Jakovljevic

9

คุณมีหลายทางเลือก:

  1. ใช้ปุ่มแชร์ FB มาตรฐานและตั้งค่าข้อความผ่านOpen Graph APIและเมตาแท็กบนเพจของคุณ
  2. แทนที่จะแชร์ให้ใช้เมธอด stream.publishของ FB.ui ซึ่งช่วยให้คุณควบคุม URL ชื่อเรื่องคำบรรยายคำอธิบายและภาพขนาดย่อในขณะทำงานได้
  3. หรือใช้http://www.facebook.com/sharer.phpกับพารามิเตอร์ที่เหมาะสม

2
คุณสามารถอธิบายรายละเอียดเกี่ยวกับหลังได้หรือไม่? พารามิเตอร์เหล่านี้คืออะไร?
Jeroen Vannevel

6

คุณสามารถปรับแต่งกล่องโต้ตอบการแชร์ของ Facebook ได้โดยใช้ JavaScript SDK แบบอะซิงโครนัสที่จัดหาโดย Facebook และตั้งค่าพารามิเตอร์

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

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

ก่อนคัดลอกและวางโค้ดด้านล่างนี้คุณต้องเริ่มต้น SDK และตั้งค่าไลบรารี jQuery ก่อน โปรดคลิกที่นี่เพื่อทราบวิธีการตั้งค่าข้อมูลแบบทีละขั้นตอน


3

นี่เป็นวิธีแก้ปัญหาปัจจุบัน (ธันวาคม 2014) และใช้ได้ดีทีเดียว มันมีคุณสมบัติ

  • เปิดหน้าต่างป๊อปอัป
  • ตัวอย่างข้อมูลที่มีอยู่ในตัวไม่ต้องการสิ่งอื่นใด
  • ทำงานโดยมีหรือไม่มี JS หากปิดใช้งาน JS หน้าต่างแชร์จะยังคงเปิดอยู่แม้ว่าจะไม่ใช่ป๊อปอัปขนาดเล็กก็ตาม

<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 เป็น URL ที่จะแชร์


มันใช้ไม่ได้กับกรณีของฉันที่หน้าของฉันขึ้นต้นด้วย https ... ?
d4v1dv00

1
คำตอบนี้ไม่ถูกต้องในขณะนี้เนื่องจาก Facebook หยุดสนับสนุนพารามิเตอร์อื่น ๆ ใน sharer
Vikrant


-2

คุณสามารถรวมแนวคิดของ AllisonC เข้ากับwindow.openฟังก์ชัน: http://www.w3schools.com/jsref/met_win_open.asp

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

จากนั้นในแต่ละลิงก์คุณจะเรียกใช้ฟังก์ชัน openWin ด้วย URL โซเชียลเน็ตเวิร์กที่ถูกต้อง


-3

ลองเว็บไซต์นี้http://www.sharelinkgenerator.com/ หวังว่านี่จะช่วยได้


3
สิ่งนี้ไม่ได้ช่วยแก้ปัญหาที่ผู้คนกำลังมองหาชื่อ / คำอธิบายที่กำหนดเอง
Eddie

ด้วยวิธีการแก้ปัญหาของคุณไม่สามารถใส่ข้อความที่กำหนดเองกับ facebook ได้โปรดให้วิธีแก้ไขอื่น
RaviPatidar
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.