Facebook Sharer เลือกรูปภาพและข้อมูลเมตาอื่น ๆ อย่างไรเมื่อแชร์ URL ของฉัน

393

เมื่อใช้ Facebook Sharer Facebook จะเสนอทางเลือกให้แก่ผู้ใช้ในการใช้ 1 ในไม่กี่ภาพที่ดึงมาจากแหล่งที่มาเพื่อเป็นตัวอย่างสำหรับลิงค์ของพวกเขา มีการเลือกรูปภาพเหล่านี้อย่างไรและฉันจะมั่นใจได้อย่างไรว่าภาพใด ๆ ในหน้าของฉันจะรวมอยู่ในรายการนี้เสมอ

facebook  facebook-opengraph  facebook-sharer 
— จอห์น
แหล่งที่มา
มันใช้งานได้จริงเมื่อใช้คุณสมบัติเมตา แต่มันเป็น html ที่ไม่ถูกต้องซึ่งฉันพบว่าแปลกมาก! ลองเรียกใช้ผ่านตัวตรวจสอบความถูกต้องแล้วคุณจะเห็น มันทำให้ฉันงงงวยว่าทำไมบนโลกนี้พวกเขาไม่สามารถทำให้มันใช้งานได้กับ html ที่ถูกต้อง ??
1
— รับมือ 360
3
Tip- หลังจากการเปลี่ยนแปลง .. เรียกใช้หน้าของคุณผ่าน linter และ Facebook จะอัปเดตรูปขนาดย่อ ฯลฯ ที่หน้าdevelopers.facebook.com/tools/lint
ฉันพบว่าบทความต่อไปนี้มีประโยชน์มากเช่นกัน: วิธีกำหนด URL ข้อความและ IMG ที่จะแบ่งปันด้วยตนเอง
— J0ANMM

คำตอบ:

593

ฉันจะบอก Facebook เกี่ยวกับภาพที่จะใช้เมื่อเพจของฉันแชร์ได้อย่างไร

Facebook มีเมตาแท็กแบบเปิดกราฟที่จะทำการตัดสินใจว่าจะแสดงภาพใด

กุญแจสำคัญสำหรับภาพ Facebook คือ:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

และมันควรจะมีอยู่ภายใน <head></head>แท็กที่ด้านบนของหน้า

<link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/>ถ้าแท็กเหล่านี้จะไม่ได้อยู่ก็จะมองหาวิธีการเก่าของพวกเขาในการกำหนดภาพ: หากไม่มีอยู่ Facebook จะดูเนื้อหาของหน้าของคุณและเลือกภาพจากหน้าของคุณที่ตรงกับเกณฑ์รูปภาพที่แชร์: รูปภาพต้องมีอย่างน้อย 200px ต่อ 200px มีอัตราส่วนภาพสูงสุด 3: 1 และ PNG รูปแบบ JPEG หรือ GIF

ฉันสามารถระบุรูปภาพหลายภาพเพื่อให้ผู้ใช้สามารถเลือกรูปภาพได้หรือไม่?

ใช่คุณเพียงแค่ต้องเพิ่มเมตาแท็กรูปภาพหลายรายการตามลำดับที่คุณต้องการให้ปรากฏในจากนั้นผู้ใช้จะถูกนำเสนอพร้อมกล่องโต้ตอบตัวเลือกรูปภาพ:
ตัวเลือกรูปภาพ Facebook

ฉันระบุเมตาแท็กรูปภาพที่เหมาะสม เหตุใด Facebook จึงไม่ยอมรับการเปลี่ยนแปลง

เมื่อมีการแชร์ URL โปรแกรมรวบรวมข้อมูลของ Facebook ซึ่งมีตัวแทนผู้ใช้facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)จะเข้าถึงหน้าเว็บของคุณและแคชข้อมูลเมตา หากต้องการบังคับให้เซิร์ฟเวอร์ Facebook ล้างแคชให้ใช้เครื่องมือFacebook Url Debugger / Linterที่เปิดตัวในเดือนมิถุนายน 2010เพื่อรีเฟรชแคชและแก้ไขปัญหาเมตาแท็กใด ๆ บนหน้าเว็บของคุณ

นอกจากนี้รูปภาพบนหน้าจะต้องสามารถเข้าถึงได้โดยโปรแกรมรวบรวมข้อมูล Facebook คุณควรระบุ URL ที่เหมือนกันของhttp://example.com/yourimage.jpgแทนที่จะเป็นเพียง /yourimage.jpg

ฉันสามารถอัปเดตเมตาแท็กเหล่านี้ด้วยรหัสด้านไคลเอนต์เช่น Javascript หรือ jQuery ได้หรือไม่ ไม่เช่นเดียวกับซอฟต์แวร์รวบรวมข้อมูลของเครื่องมือค้นหามีดโกน Facebook ไม่ได้เรียกใช้สคริปต์ดังนั้นเมตาแท็กใดก็ตามที่ปรากฏเมื่อมีการดาวน์โหลดหน้าเว็บเป็นเมตาแท็กที่ใช้สำหรับการเลือกรูปภาพ

การเพิ่มแท็กเหล่านี้ทำให้หน้าของฉันไม่ผ่านการตรวจสอบอีกต่อไป ฉันจะแก้ไขสิ่งนี้ได้อย่างไร

คุณสามารถเพิ่มเนมสเปซ Facebook ที่จำเป็นลงในแท็กของคุณและหน้าของคุณควรผ่านการตรวจสอบ:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
— bkaid
แหล่งที่มา
1
อีกที่หนึ่งที่มีลักษณะ: <link rel="apple-touch-icon" href="...">(นั่นคือวิธีที่จะได้รับภาพ SO)
— Yarin
2
@Yarin ฉันไม่แน่ใจว่าเป็นเรื่องจริง StackOverflow มีชุดคุณสมบัติ image_src ซึ่งเป็นชุดที่ใช้อยู่ ชื่อไฟล์สำหรับไอคอน apple-touch-icon นั้นแตกต่างกันและไม่ได้ใช้งาน
— bkaid
3
ฉันสามารถเลือกลำดับภาพได้ไหม? ในกรณีของฉันภาพอื่นปรากฏขึ้นก่อนภาพเมตาแท็ก
— vicenrele
23
ขนาดรูปภาพขั้นต่ำคือ 200x200px
— Tr1stan
1
Woot! ฉันได้ตั้งขนาดของ img เป็น 300px ตอนนี้ดูเหมือนว่าจะใช้งานได้ ขอบคุณ @ Tr1stan
— Urs
37

เมื่อคุณแชร์ Facebook คุณต้องเพิ่ม html ลงในส่วนหัวเมตาแท็กถัดไป: 

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

และนั่นมัน!

เพิ่มปุ่มตามที่ควรจะเป็นตามที่ FB บอกไว้

ข้อมูลทั้งหมดที่คุณต้องการอยู่ในwww.facebook.com/share/

— Matias
แหล่งที่มา
28

ตั้งแต่ปี 2013 หากคุณใช้ facebook.com/sharer.php (PHP) คุณสามารถสร้างปุ่ม / ลิงก์เช่น:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

พารามิเตอร์การค้นหาลิงก์:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

ง่ายมาก: คุณไม่จำเป็นต้องใช้ js หรือการตั้งค่าอื่น ๆ เป็นเพียงลิงค์ HTML raw จัดทำแท็ก A ในแบบที่คุณต้องการ

— อันโตนิโอแม็กซ์
แหล่งที่มา
p[images][0]เป็นสิ่งที่ฉันต้องการ ogแท็กใช้งานได้สำหรับการแบ่งปันภาพเดียวกัน แต่ฉันต้องแชร์หลายภาพจากหน้าเดียวกัน
— thekingoftruth
4
นี่ควรเป็น 'คำตอบที่ยอมรับ' ใหม่ - ง่ายและตรงไปตรงมา ขอบคุณสำหรับสิ่งนี้เพื่อน
— Mike
อันโตนิโอคุณมีลิงค์ที่มาเกี่ยวกับสิ่งที่คุณแสดงด้านบน? ฉันกำลังพยายามที่จะมองใน developers.facebook.com แต่ไม่สามารถหาสิ่งใดนอกจากนี้ กรุณาช่วย.
— Mr_Green
@Mr_Green ที่เกี่ยวกับมัน คุณลักษณะนี้ 'เลิกใช้แล้ว' แต่ตอนนี้กลับไปเป็นเอกสารอย่างเป็นทางการแล้ว อย่างไรก็ตามฉันเชื่อว่าคำตอบของฉันครอบคลุมการตั้งค่าพื้นฐานเพื่อให้สามารถใช้งานได้
— Antonio Max
@AntonioMax โปรดอธิบายสิ่งที่อยู่s=100ในโพสต์ของคุณ?
— Mr_Green
12

จากประสบการณ์ของฉันhttp://www.facebook.com/sharer.phpไม่ได้ใช้เมตาแท็ก มันใช้สายที่คุณผ่าน ดูด้านล่าง

http://www.facebook.com/sharer.php?s=100&purrencytitleonymous=THISเป็นชื่อของฉัน & p [summary] = นี่คือสรุปของฉัน & p [url] = http: //www.MYURL.com&&p [images] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

เมตาแท็กทำงานร่วมกับนักพัฒนาของ Facebook เช่น / ปุ่มส่งเช่นเดียวกับข้อมูลกราฟเปิดอื่น ๆ ดังนั้นหากคุณใช้องค์ประกอบที่แท้จริงของ Facebook เช่นความคิดเห็นและสิ่งนั้นสิ่งนั้นจะผูกติดกับสิ่งที่เปิดกราฟ

อัปเดต: มีสองวิธีในการใช้ผู้ใช้ร่วมกัน * บันทึกค่าของเมื่อเทียบกับค่า? u ในสตริงการสืบค้น
1 ==> STRING: http://www.facebook.com/sharer.php?s + เนื้อหาจากด้านบน
~ ~> จะดึงข้อมูลจากสตริง
2 ==> URL: http://www.facebook.com/sharer.php?u=urlโดยที่ url เท่ากับ url จริง
~~> จะขูดหน้าเว็บที่ให้ไว้ในค่า url
~~> คุณสามารถทดสอบค่าต่างๆได้ ที่นี่: https://developers.facebook.com/tools/debug

— Jason Lydon
แหล่งที่มา
มีประโยชน์มาก ขอบคุณ! : D
— Aaron Gray
มีวิธีการทางกฎหมายในการใช้ผู้ใช้ร่วมกันนั้นในเว็บไซต์อื่นเพื่อรับเนื้อหาจาก url หรือไม่? ผมไม่ทราบว่ามากเกี่ยวกับ Facebook API และสิ่งที่ ...
— Lyth
ลองใช้ตัวเลือก URL หากหน้านั้นมีแท็ก OG, FB จะทำการขูด ทดสอบหน้าที่คุณต้องการใช้ที่นี่: developers.facebook.com/tools/debug
— Jason Lydon
11

วิธีเก่าไม่ทำงานอีกต่อไป:

<link rel="image_src" href="http://yoururl/yourimage"/>

วิธีการรายงานใหม่ยังใช้งานไม่ได้:

<meta property="og:image" content="http://yoururl/yourimage"/>

มันทำงานแบบสุ่มและต่อเนื่องในวันแรกที่ฉันติดตั้งใช้งานได้ แต่ก็ไม่ได้ผลเลย

หน้า Facebook linter ซึ่งเป็นยูทิลิตี้ที่ตรวจสอบหน้าของคุณรายงานว่าทุกอย่างถูกต้องและแสดงภาพขนาดย่อที่ฉันเลือก ... เพียงแค่หน้า share.php นั้นดูเหมือนว่าจะไม่ทำงาน จะต้องมีข้อผิดพลาดมากกว่าที่ Facebook พวกเขาดูเหมือนจะไม่สนใจที่จะแก้ไขตามรายงานข้อผิดพลาดเกี่ยวกับปัญหานี้ฉันได้เห็นในระบบของพวกเขาทุกคนพูดว่าแก้ไขหรือแก้ไข

— ธีโอ
แหล่งที่มา
ฉันกำลังประสบปัญหานี้เช่นกัน linter รายงานว่าไม่มีข้อผิดพลาดและแสดงภาพของฉันอย่างถูกต้อง แต่เมื่อฉันคลิกปุ่มแชร์บนเว็บไซต์ของฉันไม่มีภาพในอินเทอร์เฟซการแชร์
— ลุคกริฟฟิ ธ ส์
image_src ใช้งานไม่ได้กับ Facebook แต่บริการบางอย่างยังคงใช้งานได้ (ลูกค้าโทรเลข ฯลฯ )
— Andres SK
10

ในการเปลี่ยนชื่อคำอธิบายและรูปภาพเราจำเป็นต้องเพิ่มเมตาแท็กบางส่วนไว้ใต้แท็กส่วนหัว

ขั้นตอนที่ 1:
เพิ่มเมตาแท็กใต้แท็กหัว 

<html>
<head>
    <meta property="og:url" content="http://www.test.com/" />
    <meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
    <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
    <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

ขั้นตอน
ต่อไป: คลิกที่ลิงค์ด้านล่าง
https://developers.facebook.com/tools/debug

เพิ่ม URL ของคุณในกล่องข้อความ (เช่นhttp://www.test.com/ ) ที่คุณพูดถึงแท็ก คลิกที่ปุ่ม DEBUG

มันจบแล้ว.

คุณสามารถยืนยันได้ที่นี่https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

ใน url ข้างต้น u = ลิงค์เว็บไซต์ของคุณ

สนุก !!!!

— Gaurav123
แหล่งที่มา
ดีบักเกอร์มีประโยชน์
— konsolebox
1

ฉันมีปัญหานี้และแก้ไขด้วยคำแนะนำของ manuel-84 การใช้ภาพขนาด 400x400px นั้นใช้งานได้ดีในขณะที่ภาพขนาดเล็กของฉันไม่เคยปรากฏในที่แชร์

โปรดทราบว่า Facebook แนะนำภาพสี่เหลี่ยมจัตุรัสขั้นต่ำ 200px เป็นแท็ก og: รูปภาพ: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

— วิลเลียม
แหล่งที่มา
1

นี่คือสิ่งที่ใช้งานได้สำหรับฉัน: ฉันวางภาพขนาดย่อที่ต้องการบนหน้าถัดจากแท็กและทำให้เล็กเกินไปที่จะเห็น ..

<img src="imagename.jpg" width="1" height="1" />

ฉันไม่ได้ทดสอบด้วยความสูง 0 และความกว้าง 0 แต่มันอาจจะยังคงใช้งานได้ .. นี่ไม่รับประกันว่าผู้ใช้จะเลือกภาพนี้ ..

นอกจากนี้ดูเหมือนว่า Facebook จะเก็บภาพขนาดย่อในหน้าของคุณและไม่ได้ตรวจสอบภาพใหม่เสมอ .. ลองเพิ่มไปยังหน้าอื่นในเว็บไซต์ของคุณและคุณจะเห็นว่ามันใช้งานได้

— daniel bernal
แหล่งที่มา
1
after the tag - คุณหมายถึง: "after the BODY tag" หรือไม่
— Alexis Wilke
ใช่ฉันเชื่อว่านั่นคือสิ่งที่พวกเขาหมายถึง ฉันทำสิ่งนี้บนไซต์เมื่อนานมาแล้ว แต่ใช้style="display:none;"แทนที่จะตั้งเป็น 1x1 พิกเซล
— Mike
1

ใช้กล่องโต้ตอบฟีด Facebook แทนกล่องโต้ตอบแชร์เพื่อแสดงรูปภาพที่กำหนดเอง

ตัวอย่าง:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
— kittu
แหล่งที่มา
0

ฉันไม่สามารถให้ Facebook เลือกภาพที่ถูกต้องจากโพสต์ที่เฉพาะเจาะจงได้ดังนั้นฉันจึงทำตามที่ระบุไว้ในหน้านี้:

/webapps/18468/adding-meta-tags-to-individual-blogger-posts

กล่าวอีกนัยหนึ่งดังนี้:

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

โดยพื้นฐานแล้วคุณจะต้องใช้รหัสยากในการใช้คำสั่ง if ใน HTML ของเว็บไซต์ของคุณเพื่อให้สามารถเปลี่ยนเนื้อหาเมตาสำหรับสิ่งที่คุณเปลี่ยนแปลงไปสำหรับโพสต์นั้น มันเป็นวิธีที่ยุ่งเหยิง แต่ใช้งานได้

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