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

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
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

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,650
Được Like
3,939
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

Sergeant
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

Sergeant
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

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

MacKen

Sergeant
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

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

hoangkien

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

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom