Cách lấy ảnh đính kèm làm ảnh đại diện khi share/like bài viết lên Facebook

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,210
Được Like
11,621
Theo mặc định, khi bạn đăng bài viết lên Facebook, Xenforo sẽ lấy avatar của người viết hoặc logo của diễn đàn làm ảnh đại diện.Tuy nhiên, đôi khi bạn muốn ảnh đại diện phải thể hiện được nội dung của bài viết của mình. Chính vì vậy sau đây mình sẽ hướng dẫn các bạn cách lấy ảnh đính kèm trong bài viết làm ảnh đại diện khi share/like bài viết lên Facebook.

B1: Mở template thread_view tìm đoạn sau:
Mã:
<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
<xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
<xen:set var="$title">{$thread.title}</xen:set>
<xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
</xen:include></xen:container>

Thay bằng
Mã:
<xen:comment>www.vnxf.vn - su dung anh dinh kem dau tien trong bai viet dau tien trong open_graph_meta </xen:comment>
<xen:if is="{$firstPost.attachments}">
<xen:foreach loop="$firstPost.attachments" value="$attachment" i="$i" count="$count">
<xen:if is="{$i} == 1 AND {$attachment.thumbnailUrl}">
<xen:set var="$ogThumb">{xen:helper fullurl, $attachment.thumbnailUrl, 1}</xen:set>
</xen:if>
</xen:foreach>
</xen:if>

<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
<xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
<xen:set var="$title">{$thread.title}</xen:set>
<xen:set var="$avatar"><xen:if is="{$ogThumb}">{$ogThumb}<xen:else />{xen:helper avatar, $thread, m, 0, 1}</xen:if></xen:set>
</xen:include></xen:container>

B2: Mở template open_graph_meta thay toàn bộ nội dung bằng:
Mã:
<xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.facebookAdmins}">
<meta property="og:site_name" content="{$xenOptions.boardTitle}" />
<xen:if is="{$avatar}"><meta property="og:image" content="{$avatar}" /></xen:if>
<xen:if is="!{$avatar}"><meta property="og:image" content="{xen:helper fullurl, @ogLogoPath, 1}" /></xen:if>
<meta property="og:type" content="article" />
<meta property="og:url" content="{xen:raw $url}" />
<meta property="og:title" content="{xen:raw $title}" />
<xen:if is="{$xenOptions.facebookAppId}"><meta property="fb:app_id" content="{$xenOptions.facebookAppId}" /></xen:if>
<xen:if is="{$xenOptions.facebookAdmins}"><meta property="fb:admins" content="{xen:helper implode, {$xenOptions.facebookAdmins}, ','}" /></xen:if>
</xen:if>

Sau khi hoàn thành các bạn có thể phải chờ 1-2 ngày để FB cập nhật cache. Tuy nhiên khi sử dụng debug tool ta có kết quả sau:

fb_image.png


Nguồn: 6giay.vn​
 

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,657
Được Like
3,942
cách làm này khá ok. hiện tại test cho nhiều site thấy ok nhé.
ae nào đang vướng thì dùng thử nhé
 

MacKen

Thượng Đế
Tham gia
30/11/2015
Bài viết
626
Được Like
543
MÌnh cài bd image làm thumbnail images ok
 

MacKen

Thượng Đế
Tham gia
30/11/2015
Bài viết
626
Được Like
543
Nên rút gọn code cho dễ nhìn như thế này:
<xen:set var="$avatar"><xen:if is="{$ogThumb}">{$ogThumb}<xen:else />{xen:helper avatar, $thread, m, 0, 1}</xen:if></xen:set>

Replly

<xen:set var="$avatar">{xen:if {$ogThumb},'{$ogThumb}','{xen:helper avatar, $thread, m, 0, 1}'}</xen:set>

--------------------------------------------------------------

<xen:if is="{$avatar}"><meta property="og:image" content="{$avatar}" /></xen:if>
<xen:if is="!{$avatar}"><meta property="og:image" content="{xen:helper fullurl, @ogLogoPath, 1}" /></xen:if>


Replly

<meta property="og:image" content="{xen:if {$avatar},'{$avatar}','{xen:helper fullurl, @ogLogoPath, 1}'}" />
 
  • Like
Reactions: THB

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,657
Được Like
3,942
rỏ hơn đi @MacKen cho quote đi
 

MacKen

Thượng Đế
Tham gia
30/11/2015
Bài viết
626
Được Like
543
Làm như PVS nhưng mình rút gọn code lại dễ nhìn hơn thôi.....

B1: Mở template thread_view tìm đoạn sau:
Mã:
<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
<xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
<xen:set var="$title">{$thread.title}</xen:set>
<xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
</xen:include></xen:container>

Thay bằng

Mã:
<xen:comment>www.vnxf.vn - su dung anh dinh kem dau tien trong bai viet dau tien trong open_graph_meta </xen:comment>
<xen:if is="{$firstPost.attachments}">
<xen:foreach loop="$firstPost.attachments" value="$attachment" i="$i" count="$count">
<xen:if is="{$i} == 1 AND {$attachment.thumbnailUrl}">
<xen:set var="$ogThumb">{xen:helper fullurl, $attachment.thumbnailUrl, 1}</xen:set>
</xen:if>
</xen:foreach>
</xen:if>

<xen:container var="$head.openGraph"><xen:include template="open_graph_meta">
<xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
<xen:set var="$title">{$thread.title}</xen:set>
<xen:set var="$avatar">{xen:if {$ogThumb},'{$ogThumb}','{xen:helper avatar, $thread, m, 0, 1}'}</xen:set>
</xen:include></xen:container>



B2: Mở template open_graph_meta thay toàn bộ nội dung bằng:

Mã:
<xen:if is="{$xenOptions.facebookAppId} OR {$xenOptions.facebookAdmins}">
<meta property="og:site_name" content="{$xenOptions.boardTitle}" />
<meta property="og:image" content="{xen:if {$avatar},'{$avatar}','{xen:helper fullurl, @ogLogoPath, 1}'}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{xen:raw $url}" />
<meta property="og:title" content="{xen:raw $title}" />
<meta property="og:description" content="{xen:if $description,'{xen:raw $description}','{$xenOptions.boardDescription}'}" />
<xen:if is="{$xenOptions.facebookAppId}"><meta property="fb:app_id" content="{$xenOptions.facebookAppId}" /></xen:if>
<xen:if is="{$xenOptions.facebookAdmins}"><meta property="fb:admins" content="{xen:helper implode, {$xenOptions.facebookAdmins}, ','}" /></xen:if>
</xen:if>

Đoạn trên mình có thêm thẻ meta description:
Mã:
<meta property="og:description" content="{xen:if $description,'{xen:raw $description}','{$xenOptions.boardDescription}'}" />

NẾU bạn nào sài addon db-image chú ý thẻ meta image:

<meta property="og:image" content="{xen:if $thread.bdimage_image,'{xen:helper bdImage_thumbnail, $thread.bdimage_image, 324, 160}','{xen:helper fullurl, @ogLogoPath, 1}'}" />
 
Sửa lần cuối:
  • Like
Reactions: THB

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,657
Được Like
3,942
thank for share. hiii
 

hoangkien

Thượng Đế
Tham gia
03/03/2017
Bài viết
30
Được Like
23
Chán quá, làm theo nhưng vẫn bị lỗi, đợi vài hôm xem kết quả ra sao
 
Sửa lần cuối:

tuyettrinh

Thượng Đế
Tham gia
08/12/2018
Bài viết
52
Được Like
23
cùng quan tâm vấn đề cho xenforo 2.0.10 ạ
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom