Thiết lập nút chia sẻ bài viết lên Twitter hiển thị đầy đủ nội dung

Twitter là mạng xã hội lớn, rất phổ biến chỉ đứng sau Facebook cho nên nếu bạn có lượng người theo dõi nhiều bạn cũng lấy được lượng traffic đáng kể từ mạng xã hội này. Chia sẻ bài viết lên Twitter rất
dễ nhưng để cấu hình hiển thị được đầy đủ nội dung của một tweet lại không phải chuyện dễ nhưng bạn có thể làm được theo thủ thuật này của mình.

Tác dụng khi chia sẻ một tweet hiển thị đầy đủ giúp người đọc xem trước tóm tắt nội dung và mô tả bài viết, ngoài ra còn nhìn thấy kích thước ảnh lớn nên cơ hội click vào liên kết cao hơn.
Nội dung hiển thị đầy đủ của một Tweet bao gồm:

• Tóm tắt
• Ảnh lớn
• Tiêu đề
• Mô tả
• Liên kết URL

Cách cấu hình bao gồm các bước sau:

Cấu hình nút chia sẻ

Chèn đoạn code chia sẻ trong template

<a expr:href="&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url.canonical + &quot;&amp;text=&quot; + data:post.snippet" target="_blank" rel="nofollow" title="Chia sẻ với Twitter">Chia sẻ với Twitter</a>

Nếu widget Blog1 version 2 thay data:post.snippet thành data:post.snippets.short

Cấu hình thẻ meta open graph

+ Thêm đoạn prefix='og: http://ogp.me/ns#' ngay trong thẻ <html...> của template
+ Thêm các thẻ meta open graph

<meta content='summary_large_image' name='twitter:card'/>

<meta content='' name='twitter:site'/>

<meta content='' name='twitter:creator'/>

<meta content='' property='og:title'/>

<meta content='' property='og:description'/>

<meta content='' property='og:url'/>

<meta content='' property='og:image'/>

Ví dụ về thẻ meta của bài viết này

<meta content='summary_large_image' name='twitter:card'/>

<meta content='CBMONKEY' name='twitter:site'/>

<meta content='@cbmonkey' name='twitter:creator'/>

<meta content='Thiết lập nút chia sẻ bài viết lên Twitter hiển thị đầy đủ nội dung - CBMONKEY' property='og:title'/>

<meta content='Tác dụng khi chia sẻ một tweet hiển thị đầy đủ giúp người đọc xem trước tóm tắt nội dung và mô tả bài viết, ngoài ra còn nhìn thấy kích thước ảnh lớn nên cơ hội click vào liên kết cao hơn.' property='og:description'/>

<meta content='https://cbmonkey.blogspot.com/2020/03/thiet-lap-nut-chia-se-bai-viet-len-twitter-hien-thi-day-du-noi-dung.html' property='og:url'/>

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMNW6NzS8Id96Mzy-xYrfwxiz21Tkkiyd563Q9JfYgEHhXXnt_UsNqC7woK68SwrGEbvlSDIjcpORCXZEUZ_7VaCdPAib2_l6YDULc0jPifkIOZ4Hm64lEGlot9B6QiV0ce5KRjvg8QMnI/w1200-h630-p-k-no-nu/twitter-card-validator.png' property='og:image'/>

Xem trước liên kết chia sẻ

Truy cập trang Card validator thêm URL bài viết chọn preview card. Mẹo: các bạn có thể preview các URL của bài viết đã chia sẻ trước đây, Twitter sẽ tự động cập nhật lại các tweet của bạn.