Làm thế nào để hiển thị hình ảnh cụ thể dưới dạng hình thu nhỏ trong khi thực hiện chia sẻ trên Facebook?

Tôi đang cố gắng thực hiện chia sẻ phương pháp này. Tôi đang sử dụng mã như sau

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

Bây giờ khi Facebook đang hiển thị, nó hiển thị một số hình thu nhỏ ở bên trái. Những hình ảnh này được chọn từ trang web của tôi. Làm cách nào để chọn một hình ảnh cụ thể làm hình thu nhỏ hoặc ít nhất là ngăn nó hiển thị hình thu nhỏ?

Bạn có thể kiểm tra nó bằng địa chỉ blog của tôi .

Bài đăng trên blog này dường như có câu trả lời cho bạn: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

Cụ thể, hãy sử dụng một thẻ như sau:

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

Tên của hình ảnh phải giống như trong ví dụ.

Nhấp vào "Đảm bảo bản xem trước hoạt động"

Lưu ý: Các thẻ có thể đúng nhưng Facebook chỉ loại bỏ 24 giờ một lần, theo tài liệu của họ. Sử dụng trang Facebook Lint để đưa hình ảnh vào Facebook.

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

Từ thông số kỹ thuật của Facebook, hãy sử dụng mã như sau:

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

Nguồn: Facebook Share

Các thẻ của tôi đều đúng nhưng Facebook chỉ loại bỏ 24 giờ một lần, theo tài liệu của họ. Sử dụng trang Facebook Lint đã đưa hình ảnh vào Facebook.

Nhập URL của bạn vào đây và FB sẽ cập nhật siêu dữ liệu từ trang của bạn:

https://developers.facebook.com/tools/debug (liên kết cập nhật)

Facebook sử dụng og:tagsvà Giao thức đồ thị mở để giải mã thông tin nào sẽ hiển thị khi xem trước URL của bạn trong hộp thoại chia sẻ hoặc trong nguồn cấp tin tức trên facebook.

Các og:tagsthông tin bao gồm:

• Tiêu đề của trang
• Loại trang
• URL
• Tên trang web
• Mô tả của trang
• Facebook user_id của quản trị viên của trang (trên facebook)

Đây là một ví dụ (lấy từ tài liệu facebook ) về một số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"/>

Khi bạn đã thực hiện đánh dấu chính xác og:tagsvà đặt các giá trị của chúng, bạn có thể kiểm tra cách facebook sẽ xem URL của bạn bằng cách sử dụng Trình gỡ lỗi Facebook . Công cụ gỡ lỗi cũng sẽ làm nổi bật bất kỳ vấn đề nào mà nó tìm thấy với og:tagstrang hoặc thiếu nó.

Một điều cần lưu ý là facebook thực hiện một số bộ nhớ đệm liên quan đến thông tin này, vì vậy để các thay đổi có hiệu lực, trang của bạn sẽ không bị loại bỏ như đã nêu trong tài liệu:

Chỉnh sửa thẻ meta

Bạn có thể cập nhật các thuộc tính của trang bằng cách cập nhật các thẻ của trang. Lưu ý rằng ban đầu chỉ có thể chỉnh sửa og: title và og: type - sau khi trang của bạn nhận được 50 lượt thích, tiêu đề sẽ được sửa và sau khi trang của bạn nhận được 10.000 lượt thích, loại sẽ được sửa. Các thuộc tính này được cố định để tránh gây ngạc nhiên cho những người dùng đã thích trang. Thay đổi thẻ tiêu đề hoặc thẻ loại sau khi đạt đến các giới hạn này không có tác dụng gì, trang của bạn vẫn giữ nguyên tiêu đề và loại ban đầu.

Để những thay đổi được phản ánh trên Facebook, bạn phải buộc trang của mình bị loại bỏ. Trang bị loại bỏ khi quản trị viên của trang nhấp vào nút Thích hoặc khi URL được nhập vào Facebook URL Linter Facebook Debugger ...

Tôi thấy rằng tất cả các câu trả lời được cung cấp đều đúng. Tuy nhiên, một chi tiết quan trọng đã bị bỏ qua: Kích thước của hình ảnh phải ít nhất là 200 X 200 px, nếu không Facebook sẽ thay thế hình thu nhỏ bằng hình ảnh có sẵn đầu tiên đáp ứng các tiêu chí trên trang. Một thực tế khác là yêu cầu tối thiểu là phải bao gồm 3 metas mà Facebook yêu cầu để og: image có hiệu lực:

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

Gỡ lỗi trang của bạn bằng trình gỡ lỗi Facebook và sửa tất cả các cảnh báo và nó sẽ hoạt động như một sự quyến rũ! https://developers.facebook.com/tools/debug

Tôi đã gặp vấn đề tương tự và tin rằng tôi đã giải quyết được nó. Tôi đã sử dụng thẻ meta liên kết như đã đề cập ở đây để trỏ đến hình ảnh tôi muốn, nhưng điều quan trọng là nếu bạn làm điều đó, FB sẽ không kéo bất kỳ hình ảnh nào khác làm lựa chọn. Ngoài ra, nếu hình ảnh của bạn quá lớn, bạn sẽ không có bất kỳ sự lựa chọn nào.

Đây là cách tôi đã sửa trang web của mình http://gnorml.com/blog/facebook-link-thumbnails/

Đây là cách hoạt động của tất cả:

1. Bạn cần có khả năng truy cập HTML trên trang web cụ thể mà bạn đang chia sẻ. Nó có thể sẽ hoạt động trên toàn bộ trang web nếu bạn sử dụng một tệp tiêu đề chung. Tôi đã không thử điều này, nhưng nó sẽ hoạt động. Tuy nhiên, bạn sẽ chỉ nhận được cùng một hình ảnh cho tất cả các trang nếu bạn làm điều này.

2. Bạn cần thêm các thẻ meta HTML này vào trang trong. Nó sẽ không hoạt động nếu bạn đặt nó trong. Đảm bảo tùy chỉnh theo a) hình ảnh, b) mô tả, c) URL và d) tiêu đề của bạn.

Một ví dụ thực tế.

<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. Tiết kiệm
4. Mở một bài đăng Facebook mới và thử lại trang bạn muốn chia sẻ.
5. Nếu bạn gặp sự cố… bạn có thể gỡ lỗi bằng công cụ Facebook này. Nó trông kỳ lạ hơn nó. Nó cho bạn biết những gì Facebook đang nhìn thấy khi bạn đăng trong URL để chia sẻ.

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

Mẹo lớn .. hãy đảm bảo rằng các “dấu ngoặc kép” giống nhau trong HTML của bạn (chúng phải giống như 2 dấu thẳng và không có đường cong… đôi khi các chương trình thay đổi chúng thành các phông chữ khác nhau và nó làm sai mã.

Chia sẻ trên Facebook: Cách cải thiện kết quả của bạn bằng cách tùy chỉnh hình ảnh, tiêu đề và văn bản

Từ liên kết trên. Để chia sẻ tốt nhất có thể, bạn sẽ muốn đề xuất 3 phần dữ liệu trong HTML của mình:

• Tiêu đề
• Mô tả ngắn
• Hình ảnh

Điều này được thực hiện bằng cách sau, được đặt bên trong thẻ 'head' của HTML của bạn:

• Tiêu đề: <title>INSERT POST TITLE</title>
• Hình ảnh: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
• Sự miêu tả: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Nếu trang web của bạn là HTML tĩnh, bạn sẽ phải thực hiện việc này cho mọi trang bằng trình chỉnh sửa HTML của mình.

Nếu bạn đang sử dụng CMS như Drupal, bạn có thể tự động hóa rất nhiều CMS (xem liên kết ở trên). Nếu bạn sử dụng wordpress, bạn có thể thực hiện một cái gì đó tương tự bằng cách sử dụng ví dụ Drupal làm hướng dẫn. Tôi hy vọng bạn tìm thấy những điều hữu ích.

Cuối cùng, bạn luôn có thể chỉnh sửa thủ công các bài đăng chia sẻ của mình. Xem ví dụ này với hình ảnh minh họa .

Tôi cũng gặp sự cố trên trang web mà tôi đang làm việc vào tuần trước. Tôi đã thực hiện một hộp thích và thử nghiệm hộp tương tự. Sau đó, tôi tiếp tục thêm một hình ảnh vào tiêu đề của mình (meta ob: image). Vẫn hình ảnh chính xác không hiển thị trên thông báo facebook của tôi.

Tôi đã thử mọi thứ và đi đến kết luận rằng mọi việc triển khai nút thích đều được lưu vào bộ nhớ đệm. Vì vậy, giả sử bạn bấm nút Thích trên url A, sau đó bạn chỉ định một hình ảnh trong tiêu đề và bạn kiểm tra nó bằng cách nhấp lại vào nút Luke trên url A. Bạn sẽ không thấy hình ảnh khi trang được lưu vào bộ nhớ cache. Hình ảnh sẽ hiển thị khi bạn bấm vào nút Thích trên trang B.

Để đặt lại bộ nhớ cache, bạn phải sử dụng công cụ gỡ lỗi lint đã đề cập ở trên và xác thực tất cả các Url cho những cái được lưu trong bộ nhớ cache ... Đó là điều duy nhất phù hợp với tôi.

Cách dễ nhất mà tôi tìm thấy để đặt Đồ thị mở của Facebook cho mọi bài viết Joomla, là đặt vào ghi đè com_content / article / default.php, mã tiếp theo:

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

Điều này sẽ đặt các thẻ meta og trong đầu với các chi tiết từ bài viết hiện tại.