จะแสดงภาพใดภาพหนึ่งเป็นภาพขนาดย่อในขณะที่แชร์บน Facebook ได้อย่างไร?

ฉันกำลังพยายามใช้วิธีนี้ร่วมกัน ฉันใช้รหัสดังนี้

http://www.facebook.com/share.php?u=my_website_url

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

คุณสามารถตรวจสอบกับฉันอยู่บล็อก

โพสต์บล็อกนี้ดูเหมือนจะมีคำตอบของคุณ: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

โดยเฉพาะใช้แท็กดังต่อไปนี้:

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

ชื่อของรูปภาพต้องเป็นชื่อเดียวกับในตัวอย่าง

คลิก "ตรวจสอบให้แน่ใจว่าการดูตัวอย่างใช้งานได้"

หมายเหตุ: แท็กสามารถถูกต้องได้ แต่ Facebook จะคัดลอกทุกๆ 24 ชั่วโมงเท่านั้นตามเอกสารประกอบ ใช้หน้า Facebook Lint เพื่อรับภาพลงใน Facebook

http://developers.facebook.com/tools/lint/

จากข้อมูลจำเพาะของ Facebook ให้ใช้รหัสดังนี้:

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

ที่มา: Facebook Share

แท็กของฉันถูกต้อง แต่ Facebook จะลบทุกๆ 24 ชั่วโมงเท่านั้นตามเอกสารของพวกเขา ใช้หน้า Facebook Lint ได้ภาพลงใน Facebook

ป้อน URL ของคุณที่นี่และ FB จะอัปเดตข้อมูลเมตาจากเพจของคุณ:

https://developers.facebook.com/tools/debug (ลิงก์อัปเดต)

Facebook ใช้og:tagsและโปรโตคอล Open Graphเพื่อถอดรหัสข้อมูลที่จะแสดงเมื่อดูตัวอย่าง URL ของคุณในกล่องโต้ตอบแบ่งปัน หรือในฟีดข่าวบน Facebook

og:tagsมีข้อมูลเช่น:

• ชื่อของเพจ
• ประเภทของหน้า
• URL
• ชื่อเว็บไซต์
• คำอธิบายของหน้า
• Facebook user_id ของผู้ดูแลเพจ (บน facebook)

นี่คือตัวอย่าง (นำมาจากเอกสารประกอบของFacebook ) บางส่วนog:tags

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

เมื่อคุณได้ดำเนินการมาร์กอัปที่ถูกต้องของog:tagsและการตั้งค่าของพวกเขาคุณสามารถทดสอบว่า Facebook จะดู URL ของคุณโดยใช้ดีบักเกอร์ Facebook นอกจากนี้เครื่องมือดีบักเกอร์จะเน้นย้ำถึงปัญหาที่พบog:tagsในหน้าเว็บหรือการขาด

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

การแก้ไข Meta Tags

คุณสามารถอัปเดตแอตทริบิวต์ของเพจได้โดยอัปเดตแท็กของเพจ โปรดทราบว่า og: title และ og: type สามารถแก้ไขได้ในตอนแรกเท่านั้น - หลังจากที่เพจของคุณได้รับ 50 ไลค์ชื่อจะได้รับการแก้ไขและหลังจากเพจของคุณได้รับ 10,000 ไลค์ประเภทจะถูกแก้ไข คุณสมบัติเหล่านี้ได้รับการแก้ไขเพื่อหลีกเลี่ยงไม่ให้ผู้ใช้แปลกใจที่ชอบเพจนี้อยู่แล้ว การเปลี่ยนแท็กชื่อหรือประเภทหลังจากถึงขีด จำกัด เหล่านี้จะไม่ทำอะไรเลยหน้าของคุณยังคงรักษาชื่อและประเภทเดิม

เพื่อให้การเปลี่ยนแปลงปรากฏบน Facebook คุณต้องบังคับให้คัดลอกเพจของคุณ เพจจะถูกคัดลอกเมื่อผู้ดูแลระบบของเพจคลิกปุ่ม Like หรือเมื่อป้อน URL ในFacebook URL Linter Facebook Debugger ...

ฉันเห็นว่าคำตอบทั้งหมดที่ให้มานั้นถูกต้อง อย่างไรก็ตามรายละเอียดที่สำคัญอย่างหนึ่งถูกมองข้าม: ขนาดของรูปภาพต้องมีอย่างน้อย 200 X 200 พิกเซลมิฉะนั้น Facebook จะแทนที่ภาพขนาดย่อด้วยภาพแรกที่มีอยู่ซึ่งตรงตามเกณฑ์บนหน้า ข้อเท็จจริงอีกประการหนึ่งคือขั้นต่ำที่จำเป็นคือการรวม 3 metas ที่ Facebook ต้องการเพื่อให้ og: image มีผล:

<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />

ดีบักหน้าของคุณด้วยโปรแกรมแก้ไขจุดบกพร่องของ Facebook และแก้ไขคำเตือนทั้งหมดและควรใช้งานได้อย่างมีเสน่ห์! https://developers.facebook.com/tools/debug

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

นี่คือวิธีที่ฉันแก้ไขไซต์ของฉันhttp://gnorml.com/blog/facebook-link-thumbnails/

นี่คือวิธีการทำงานทั้งหมด:

1. คุณต้องมีความสามารถในการเข้าถึง HTML บนหน้าเว็บที่คุณแชร์ มันอาจจะทำงานได้ทั่วทั้งไซต์หากคุณใช้ไฟล์ส่วนหัวทั่วไป ฉันไม่ได้ลองสิ่งนี้ แต่มันควรได้ผล คุณจะได้ภาพเดียวกันสำหรับทุกหน้าหากคุณทำเช่นนี้

2. คุณต้องเพิ่มเมตาแท็ก HTML เหล่านี้ลงในหน้าในไฟล์. จะไม่ทำงานถ้าคุณใส่ไว้ในไฟล์. ตรวจสอบให้แน่ใจว่าได้ปรับแต่งตาม a) รูปภาพ b) คำอธิบาย c) URL และ d) ชื่อเรื่อง

ตัวอย่างจริง

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />

3. บันทึก
4. เปิดโพสต์ใหม่บน Facebook และลองอีกครั้งในเพจที่คุณต้องการแชร์
5. หากคุณประสบปัญหา ... คุณสามารถแก้ไขข้อบกพร่องได้ด้วยเครื่องมือ Facebook นี้ มันดูเกินบรรยายกว่าที่เป็นอยู่ จะบอกคุณว่า Facebook เห็นอะไรเมื่อคุณโพสต์ใน URL เพื่อแชร์

https://developers.facebook.com/tools/debug/og/object/

เคล็ดลับใหญ่ .. ตรวจสอบให้แน่ใจว่า "เครื่องหมายคำพูด" เหมือนกันใน HTML ของคุณ (ควรมีลักษณะเป็นเครื่องหมายตรง 2 ขีดและไม่มีเส้นโค้ง ... บางครั้งโปรแกรมจะเปลี่ยนแบบอักษรเหล่านี้เป็นแบบอักษรที่แตกต่างกันและทำให้โค้ดนั้นขึ้น

การแบ่งปันบน Facebook: วิธีปรับปรุงผลลัพธ์ของคุณโดยการปรับแต่งรูปภาพชื่อและข้อความ

จากลิงค์ด้านบน. เพื่อการแบ่งปันที่ดีที่สุดคุณจะต้องแนะนำข้อมูล 3 ส่วนใน HTML ของคุณ:

• หัวข้อ
• คำอธิบายสั้น
• ภาพ

สิ่งนี้ทำได้โดยวางไว้ในแท็ก 'head' ของ HTML ของคุณ:

• หัวข้อ: <title>INSERT POST TITLE</title>
• ภาพ: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
• คำอธิบาย: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

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

หากคุณใช้ CMS เช่น Drupal คุณสามารถทำหลายอย่างโดยอัตโนมัติ (ดูลิงค์ด้านบน) หากคุณใช้ wordpress คุณอาจใช้สิ่งที่คล้ายกันได้โดยใช้ตัวอย่าง Drupal เป็นแนวทาง ฉันหวังว่าคุณจะพบว่ามีประโยชน์เหล่านี้

สุดท้ายคุณสามารถแก้ไขโพสต์ที่แชร์ด้วยตนเองได้ตลอดเวลา ดูตัวอย่างนี้มีภาพประกอบ

ฉันยังมีปัญหาในไซต์ที่ฉันทำงานเมื่อสัปดาห์ที่แล้ว ฉันใช้กล่อง like และทดสอบกล่อง like จากนั้นฉันก็ไปข้างหน้าเพื่อเพิ่มรูปภาพในส่วนหัวของฉัน (ob: image meta) รูปภาพที่ถูกต้องยังไม่ปรากฏในการแจ้งเตือนทาง Facebook ของฉัน

ฉันลองทุกอย่างแล้วและได้ข้อสรุปว่าการใช้งานปุ่ม like ทุกครั้งจะถูกแคชไว้ สมมติว่าคุณกดปุ่ม Like บน url A จากนั้นคุณระบุภาพในส่วนหัวและทดสอบโดยคลิกปุ่ม Luke อีกครั้งใน url A คุณจะไม่เห็นภาพเนื่องจากหน้าเว็บถูกแคช ภาพจะปรากฏขึ้นเมื่อคุณคลิกที่ปุ่มถูกใจในหน้า B

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

วิธีที่ง่ายที่สุดที่ฉันพบในการตั้งค่า Facebook Open Graph ให้กับทุกบทความของ Joomla คือการวางใน com_content / article / default.php แทนที่โค้ดถัดไป:

$app    = JFactory::getApplication();
$path   = JURI::root();

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : 
    $document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
    $document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
 endif;

สิ่งนี้จะวางแท็ก meta og ไว้ในส่วนหัวพร้อมรายละเอียดจากบทความปัจจุบัน