Facebook Sharer chọn Hình ảnh và siêu dữ liệu khác như thế nào khi chia sẻ URL của tôi?

393

Khi sử dụng Facebook Sharer, Facebook sẽ cung cấp cho người dùng tùy chọn sử dụng 1 trong số một vài hình ảnh được lấy từ nguồn dưới dạng bản xem trước cho liên kết của họ. Làm thế nào những hình ảnh này được chọn và làm thế nào tôi có thể đảm bảo rằng bất kỳ hình ảnh cụ thể nào trên trang của tôi luôn được đưa vào danh sách này?

facebook  facebook-opengraph  facebook-sharer 
— Sampson
nguồn
Nó thực sự hoạt động khi sử dụng thuộc tính meta, nhưng nó là html không hợp lệ, điều mà tôi thấy rất lạ! Hãy thử chạy nó thông qua một trình xác nhận và bạn sẽ thấy. Nó gây trở ngại cho tôi tại sao trên trái đất họ không thể làm điều này để làm việc với html hợp lệ ??
1
— cope360
3
Mẹo- sau khi thực hiện thay đổi .. Chạy trang của bạn thông qua kẻ nói dối và facebook sẽ cập nhật các hình thu nhỏ, v.v. cho trang đó developers.facebook.com/tools/lint
Tôi thấy bài viết sau đây cũng rất hữu ích: Cách tùy chỉnh URL, văn bản và IMG nào để chia sẻ
— J0ANMM

Câu trả lời:

593

Làm cách nào để cho Facebook biết hình ảnh nào sẽ được sử dụng khi trang của tôi được chia sẻ?

Facebook có một bộ thẻ meta biểu đồ mở mà nó nhìn vào để quyết định hình ảnh nào sẽ hiển thị.

Các phím một cho hình ảnh Facebook là:

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

và nó phải được trình bày bên trong <head></head>thẻ ở đầu trang của bạn.

Nếu các thẻ này không xuất hiện, nó sẽ tìm phương pháp cũ hơn để chỉ định hình ảnh: <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/> . Nếu không có mặt, Facebook sẽ xem xét nội dung trang của bạn và chọn hình ảnh từ trang của bạn đáp ứng tiêu chí hình ảnh chia sẻ của nó: Hình ảnh phải có ít nhất 200px x 200px, có tỷ lệ khung hình tối đa là 3: 1 và ở định dạng PNG, Định dạng JPEG hoặc GIF.

Tôi có thể chỉ định nhiều hình ảnh để cho phép người dùng chọn một hình ảnh không?

Có, bạn chỉ cần thêm nhiều thẻ meta hình ảnh theo thứ tự bạn muốn chúng xuất hiện. Người dùng sau đó sẽ được trình bày với hộp thoại chọn hình ảnh:
Công cụ chọn ảnh Facebook

Tôi đã chỉ định các thẻ meta hình ảnh phù hợp. Tại sao Facebook không chấp nhận các thay đổi?

Khi một url đã được chia sẻ, trình thu thập thông tin của Facebook, có tác nhân người dùng facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), sẽ truy cập trang của bạn và lưu trữ thông tin meta. Để buộc các máy chủ Facebook xóa bộ nhớ cache, hãy sử dụng Công cụ gỡ lỗi / Linter Facebook mà họ đã khởi chạy vào tháng 6 năm 2010 để làm mới bộ đệm và khắc phục mọi sự cố về thẻ meta trên trang của bạn.

Ngoài ra, hình ảnh trên trang phải được truy cập công khai vào trình thu thập thông tin của Facebook. Bạn nên chỉ định url tuyệt đối như http://example.com/yourimage.jpg thay vì chỉ /yourimage.jpg.

Tôi có thể cập nhật các thẻ meta này bằng mã phía máy khách như Javascript hoặc jQuery không? Không giống như các trình thu thập dữ liệu của công cụ tìm kiếm, trình quét của Facebook không thực thi các tập lệnh vì vậy bất kỳ thẻ meta nào có mặt khi trang được tải xuống là các thẻ meta được sử dụng để chọn hình ảnh.

Thêm các thẻ này khiến trang của tôi không còn xác nhận. Làm thế nào tôi có thể sửa lỗi này?

Bạn có thể thêm các không gian tên Facebook cần thiết vào thẻ của mình và sau đó trang của bạn sẽ vượt qua xác thực:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
— trả tiền
nguồn
1
Một nơi khác nó trông: <link rel="apple-touch-icon" href="...">(Đó là cách nó có được hình ảnh SO)
— Yarin
2
@Yarin Tôi không chắc đó là sự thật. StackOverflow có tập thuộc tính image_src, đây là thuộc tính mà nó đang sử dụng. Tên tệp cho biểu tượng cảm ứng táo là khác nhau và không được sử dụng.
— bkaid
3
Tôi có thể chọn thứ tự hình ảnh? Trong trường hợp của tôi, một hình ảnh khác xuất hiện trước hình ảnh của thẻ meta.
— Abbeyenrele
23
Kích thước hình ảnh tối thiểu hiện là 200x200px.
— Tr1stan
1
Khốn nạn! Tôi đã đặt kích thước của img thành 300px, giờ nó có vẻ hoạt động. Cảm ơn @ Tr1stan
— Urs
37

Khi bạn chia sẻ cho Facebook, bạn phải thêm html vào phần đầu các thẻ meta tiếp theo: 

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

Và đó là nó!

Thêm nút như bạn nên theo những gì FB nói với bạn.

Tất cả thông tin bạn cần có trong www.facebook.com/share/

— Matias
nguồn
28

Kể từ năm 2013, nếu bạn đang sử dụng facebook.com/sharer.php (PHP), bạn chỉ cần tạo bất kỳ nút / liên kết nào như:

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

Liên kết tham số truy vấn:

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

Thật đơn giản: bạn không cần bất kỳ js hoặc cài đặt nào khác. Chỉ là một liên kết thô HTML. Tạo kiểu cho thẻ A theo bất kỳ cách nào bạn muốn.

— Antonio Max
nguồn
p[images][0]chính xác là những gì tôi cần. ogThẻ hoạt động để chia sẻ cùng một hình ảnh nhưng tôi cần chia sẻ nhiều hình ảnh từ cùng một trang.
— thekingoftruth 17/12/13
4
Đây phải là "câu trả lời được chấp nhận" mới - rất đơn giản và dễ hiểu. Cảm ơn vì điều này, bạn đời.
— Mike
Antonio, bạn có một liên kết nguồn về những gì bạn hiển thị ở trên? Tôi đang cố gắng xem xét điều này trong developers.facebook.com nhưng không thể tìm thấy bất cứ điều gì ngoại trừ điều này . Xin vui lòng giúp đỡ.
— Mr_Green 17/03 '
@Mr_Green đó là về nó. Tính năng này đã bị 'không dùng nữa' nhưng giờ đây đã trở lại với các tài liệu chính thức. Dù sao, tôi tin rằng câu trả lời của tôi bao gồm các cài đặt cơ bản để nó hoạt động.
— Antonio Max
@AntonioMax vui lòng giải thích những gì s=100trong bài viết của bạn?
— Mr_Green 17/03/2016
12

Theo kinh nghiệm của tôi, http://www.facebook.com/sharer.php không sử dụng thẻ meta. Nó sử dụng chuỗi bạn vượt qua. Xem bên dưới.

http://www.facebook.com/sharer.php?s=100&p[title[=THIS LÀ TITLE CỦA TÔI & p [Tóm tắt] = ĐÂY LÀ TÓM TẮT CỦA TÔI & p [url] = http: //www.MYURL.com&&p [hình ảnh] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

Các thẻ meta hoạt động với các nút thích / gửi của nhà phát triển của Facebook, cũng như thông tin về Biểu đồ mở khác. Vì vậy, nếu bạn sử dụng một trong những yếu tố thực tế của Facebook như các bình luận và như vậy, tất cả sẽ liên kết với nội dung Open Graph.

CẬP NHẬT: Có hai cách để sử dụng bộ chia * lưu ý giá trị? U so với giá trị? U trong chuỗi truy vấn
1 ==> STRING: http://www.facebook.com/sharer.php?s + nội dung từ trên
~ ~> Sẽ lấy thông tin từ chuỗi.
2 ==> URL: http://www.facebook.com/sharer.php?u=url trong đó url bằng với một url thực tế
~ ~> Sẽ cạo trang được cung cấp trong giá trị url
~ ~> Bạn có thể kiểm tra các giá trị tại đây: https://developers.facebook.com/tools/debug

— Jason Lydon
nguồn
Rất hữu ích. Cảm ơn! : D
— Aaron Gray
Có cách nào hợp pháp để sử dụng bộ chia sẻ đó trong một trang web khác để lấy nội dung từ một url không? Tôi không biết nhiều về API facebook và những thứ ...
— Lyth
Hãy thử sử dụng tùy chọn URL. Nếu trang có thẻ OG, FB sẽ cạo chúng. Kiểm tra trang bạn muốn sử dụng tại đây: developers.facebook.com/tools/debug
— Jason Lydon
11

Cách cũ, không còn hoạt động:

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

Báo cáo cách mới, cũng không hoạt động:

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

Nó ngẫu nhiên hoạt động và trong ngày đầu tiên tôi thực hiện nó, đã không hoạt động kể từ đó.

Trang Facebook linter, một tiện ích kiểm tra trang của bạn, báo cáo rằng mọi thứ đều chính xác và hiển thị hình thu nhỏ tôi đã chọn ... chỉ là trang share.php dường như không hoạt động. Phải là một lỗi trên Facebook, một lỗi mà họ dường như không quan tâm để sửa vì mọi báo cáo lỗi liên quan đến vấn đề này tôi đã thấy trong hệ thống của họ đều nói đã được giải quyết hoặc đã sửa.

— theo
nguồn
Tôi cũng đang gặp vấn đề này. Kẻ nói dối báo cáo không có lỗi và hiển thị hình ảnh của tôi một cách chính xác, nhưng khi tôi nhấp vào nút chia sẻ trên trang web của mình thì hoàn toàn không có hình ảnh nào trong giao diện chia sẻ.
— Luke Griffiths
image_src không còn hoạt động cho Facebook, NHƯNG một số dịch vụ vẫn sử dụng nó (ứng dụng khách Telegram, v.v.)
— Andres SK
10

Để thay đổi Tiêu đề, Mô tả và Hình ảnh, chúng tôi cần thêm một số thẻ meta dưới thẻ đầu.

BƯỚC 1:
Thêm thẻ meta dưới thẻ head 

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

BƯỚC TIẾP THEO:
Nhấp vào liên kết bên dưới
https://developers.facebook.com/tools/debug

Thêm URL của bạn vào hộp văn bản (ví dụ: http://www.test.com/ ) nơi bạn đã đề cập đến các thẻ. Nhấp vào nút DEBUG.

Xong rôi.

Bạn có thể xác minh tại đây https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

Trong url trên, u = liên kết trang web của bạn

THƯỞNG THỨC !!!!

— Bò tót
nguồn
Trình gỡ lỗi rất hữu ích.
— konsolebox
2

Đối với HTTPS an toàn 

<meta property="og:image:secure_url" content="https://image.path.png" />
— Stefan Michev
nguồn
1

Đây là những gì làm việc cho tôi: Tôi đã đặt hình ảnh thu nhỏ mong muốn trên trang ngay sau thẻ và làm cho nó quá nhỏ để xem ..

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

Tôi chưa thử nó với chiều cao 0 và chiều rộng 0 nhưng có lẽ nó vẫn hoạt động .. Điều này không đảm bảo người dùng sẽ chọn hình ảnh này ..

CSONG có vẻ như Facebook lưu trữ các hình thu nhỏ trên trang của bạn và không phải lúc nào cũng kiểm tra nó cho những cái mới .. hãy thử thêm nó vào một trang khác trên trang web của bạn và bạn sẽ thấy nó hoạt động.

— daniel bernal
nguồn
1
sau thẻ - bạn có nghĩa là: "sau thẻ BODY"?
— Alexis Wilke
Vâng, tôi tin đó là những gì họ có nghĩa. Tôi đã làm điều này trên một trang web từ lâu, nhưng được sử dụng style="display:none;"thay vì đặt nó thành 1x1 pixel.
— Mike
1

Sử dụng hộp thoại nguồn cấp dữ liệu facebook thay vì hộp thoại chia sẻ để hiển thị Hình ảnh tùy chỉnh

Thí dụ:

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
— mèo con
nguồn
0

Tôi không thể yêu cầu Facebook chọn hình ảnh phù hợp từ một bài đăng cụ thể, vì vậy tôi đã làm những gì được nêu trên trang này:

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

Nói cách khác, một cái gì đó như thế này:

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

Về cơ bản, bạn sẽ mã hóa một câu lệnh if vào HTML của trang web để khiến nó thay đổi nội dung meta cho bất cứ điều gì bạn đã thay đổi cho một bài đăng đó. Đó là một giải pháp lộn xộn, nhưng nó hoạt động.

— Michelle Glauser
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.