ฉันจะควบคุม Facebook เช่นรูปภาพได้อย่างไร [ปิด]

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

อย่างไรก็ตามเมื่อแบ่งปันรูปภาพที่เลือกโดย Facebook เป็นไอคอนเมลทั่วไปไม่ใช่รูปขนาดย่อโพสต์

ฉันจะควบคุมรูปภาพที่ใช้เมื่อแชร์ได้อย่างไร

รูปภาพที่ใช้สำหรับการแบ่งปันนั้นมาจากโค้ดในส่วนหัวของไซต์ของคุณซึ่งจะมีลักษณะดังนี้:

<link rel="image_src" href="path/to/theme/screenshot.png" />

โดยทั่วไปจะเชื่อมโยงกับภาพหน้าจอของไซต์ของคุณในชุดรูปแบบ หากคุณลบรหัสออกจากส่วนหัวของไฟล์และใน single.php ใส่ไว้ในลูปและเรียกภาพโพสต์ภาพขนาดย่อของคุณลงในองค์ประกอบ href ผมเชื่อว่ามันจะทำงาน ดังนั้นมันจะมีลักษณะดังนี้:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

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

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

จากนั้นคุณจะยังคงใช้รหัสเพื่อรวมภาพขนาดย่อโพสต์ใน single.php

ตอนนี้ Facebook ใช้โปรโตคอล OpenGL คุณสามารถเพิ่มภาพโดยใช้:

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

เพิ่มบรรทัดนี้ในส่วนหัวของหน้า

หรือคุณสามารถใช้ปลั๊กอินของฉันเพื่อทำสิ่งนี้โดยอัตโนมัติ

มันทำงานนี้และไม่จำเป็นต้องตั้งค่าใด ๆ

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/

คุณต้องใช้โปรโตคอล Open กราฟของ Facebook ฉันไม่แน่ใจว่าทำไมคำตอบที่ยอมรับไม่ใช่หนึ่งในหลาย ๆ OG: คำตอบที่เกี่ยวข้อง (ซึ่งฉันโหวตไว้) แต่มันผิด

http://developers.facebook.com/docs/opengraph/

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

หากฉันไม่ได้ปฏิบัติตามโปรโตคอล OG สำหรับงาน FB ทั้งหมดที่ฉันทำฉันจะถูกไล่ออก

หากคุณทำสิ่งต่อไปนี้:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

คุณจะพบว่า Wordpress ส่งออก html ที่จำเป็นในการแสดงภาพไม่ใช่แค่ SRC ซึ่งเป็นสิ่งที่คุณต้องการจริงๆ

ทำสิ่งที่ชอบ:

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

รับ URL ให้คุณเท่านั้น อาจเป็นวิธีที่ยาวและอาจสั้นลง แต่ก็แก้ไขปัญหาได้อย่างแน่นอน

หวังว่านี่จะทำให้คุณไปในทิศทางที่ถูกต้อง

ด้าน

ตรวจสอบให้แน่ใจว่าคุณขยี้ URL ของคุณที่นี่หากภาพที่ระบุไม่ปรากฏขึ้นอย่างถูกต้อง:

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

หากคุณต้องการใช้ภาพแรกของโพสต์ของคุณเป็นรูปย่อที่มีทางเลือกแทนโลโก้ของคุณลองใช้ปลั๊กอินของฉัน - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ คำอธิบายสำหรับการเพิ่ม ภาพโลโก้ทางเลือกอยู่ที่http://blog.ashfame.com/?p=888

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

วิธีนี้ใช้ได้กับ "like": s แต่ต่อมาถ้าคุณต้องการแชร์ลิงก์ใน ur log (เช่น) รูปภาพนี้จะถูกเลือกโดยอัตโนมัติ

หากไม่มีเมตาแท็กนี้คุณจะสามารถเลือกจากรูปภาพทั้งหมดในไซต์ที่ลิงก์ได้

ใครรู้วิธีเก็บภาพ "ชอบ" แบบคงที่ แต่ยังคงให้คุณเลือกภาพเมื่อแชร์ URL?

ตกลงฉันเขียนจาวาสคริปต์เล็กน้อยเพื่อเติม Meta og: ภาพด้วยภาพเด่นที่ฉันเลือก เป็นการแฮ็คแบบครั้งเดียวที่คุณเพิ่มลงในไฟล์ส่วนหัว

ในโพสต์ wordpress ของฉันฉันเพิ่ม id "ภาพเด่น" (ฉันรู้ด้วยภายหลัง wordpress นี้มีในตัวฉันในเก่า)

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

ฉันเขียนเมตาแท็กสำหรับ og: รูปภาพพร้อมตัวยึดตำแหน่งเช่นบันทึกบล็อกของฉัน เพิ่ม "id =" meta-image "ลงในแท็กเช่น

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

จากนั้นเพิ่มจาวาสคริปต์นี้ในส่วนหัว:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

<script type="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});