Tạo thumbnail chuẩn cho Blogger khi chia sẻ lên Facebook

Khi chia sẻ một liên kết lên Facebook thì thumbnail (hình thu nhỏ) sẽ được Facebook nhận diện tự động bằng cách quét trang hoặc do chính chúng ta chỉ định.

Trong Blogspot (Blogger) thì chúng ta sử dụng mã như sau:

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

Và Facebook Bot sẽ thu được kết quả giống như này:

<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNGAJbG52gxJLk91paYaEK40SPLNTwfD8uGWzz6IIza0fNLXsJYN4j6ky7oMmUJu0coxjBAkNQXB_AsbA2_nQnY0-yc34f1rmf3cCufVVLAty5ksFQmx9Ncd1QqObK80WBsQPtzHVdXWSz/s72-c/get-free-xyz-domain.png" /> 

Vấn đề ở đây là ảnh thumbnail do Blogspot tạo tự động luôn được resize về kích cỡ 72x72, trong khi kích cỡ thumbnail chuẩn của Facebook khuyến cáo là 600x315.

Sau khi tìm kiếm, tôi nhận ra có vẻ ngay cả Google và StackOverflow cũng chưa có câu trả lời cho vấn đề này. Do đó, tôi quyết định tự trả lời câu hỏi này.

Phân tích cấu trúc link ảnh của Blogspot

Vì dùng Blogger đã lâu, tôi phát hiện ra một điều khá thú vị trong một lần xem mã nguồn một template blogspot được chia sẻ trên mạng. Đó là các liên kết hình ảnh trong Blogspot có thể resize được bằng cách thay đổi vài kí tự trong URL.

Cụ thể, với URL trong đoạn mã trên:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNGAJbG52gxJLk91paYaEK40SPLNTwfD8uGWzz6IIza0fNLXsJYN4j6ky7oMmUJu0coxjBAkNQXB_AsbA2_nQnY0-yc34f1rmf3cCufVVLAty5ksFQmx9Ncd1QqObK80WBsQPtzHVdXWSz/s72-c/get-free-xyz-domain.png

Chú ý những ký tự sau: s72-c

Các bạn có nhớ tôi đã nói ở trên là thumbnail trong Blogspot được resize về cỡ 72x72 không? Ta có thể nhận ra mấy kí tự này có liên quan gì đó. Thử thay thành s200-c thì thấy:

Nó đã to lên đúng không? Như vậy s200 tương đương với width=200px; height=200px. Nhưng như thế thì ta chỉnh kiểu gì cũng chỉ nhận được ảnh vuông??

Không sao, sau khi vọc vạch thêm chút thì tôi phát hiện ra điều thú vị tiếp theo trong cấu trúc ảnh của blogspot - ta có thể resize kích cỡ bất kỳ bằng cách sử dụng định dạng: wXXX-hYYY-c

Trong đó: XXX là chiều dài, YYY là chiều rộng. Tính theo đơn vị Pixel (px).

Như vậy, để có kích cỡ chuẩn của thumbnail khi chia sẻ lên Facebook. Ta sẽ sử dụng: w600-h315-c

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNGAJbG52gxJLk91paYaEK40SPLNTwfD8uGWzz6IIza0fNLXsJYN4j6ky7oMmUJu0coxjBAkNQXB_AsbA2_nQnY0-yc34f1rmf3cCufVVLAty5ksFQmx9Ncd1QqObK80WBsQPtzHVdXWSz/w600-c-h315/get-free-xyz-domain.png

Tạo thumbnail chuẩn cho Blogger

Với những gì ta đã biết ở trên thì áp dụng vào Blogspot như nào? Blogspot sử dụng biến data:blog.postImageThumbnailUrl để tự động lấy ra thumbnail từ ảnh đầu tiên trong bài viết. Chúng ta cũng không thể sử dụng JavaScript để replace các ký tự để tạo link ảnh chuẩn.

Nhưng ta có thể tùy chỉnh các ký tự bổ sung bằng cách:

<meta expr:content='"XXX" + data:blog.postImageThumbnailUrl' property='og:image'/> 

Sau khi render ra HTML sẽ có dạng:

<meta property="og:image" content="XXXhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNGAJbG52gxJLk91paYaEK40SPLNTwfD8uGWzz6IIza0fNLXsJYN4j6ky7oMmUJu0coxjBAkNQXB_AsbA2_nQnY0-yc34f1rmf3cCufVVLAty5ksFQmx9Ncd1QqObK80WBsQPtzHVdXWSz/s72-c/get-free-xyz-domain.png" /> 

Các bạn có chú ý thấy XXX nằm trước URL không? OK, vậy ta có thể tạo ra một proxy URL như:

http://www.example.com/proxy.php?img=[Thumbnail_URL]

Nói tới đây chắc các bạn đã đoán ra tôi định làm gì rồi đúng không? Việc replace ký tự trong URL thì quá đơn giản:

<?php

if (isset($_GET['img']) && filter_var($_GET['img'], FILTER_VALIDATE_URL)) {

    $img = $_GET['img'];

    if (strpos($img, '/s72-c/') !== FALSE) {

        $img = str_replace('/s72-c/', '/w600-h315-c/', $img);

        header("Location: {$img}");

    }

}

exit;

Và code để nhúng trong template hiện tại của tôi có dạng như sau:

<meta expr:content='"http://junookyo.freevnn.com/?img=" + data:blog.postImageThumbnailUrl' property='og:image'/> 

Đoạn mã này có thể áp dụng cho mọi blog nên bạn có thể sử dụng thoải mái nhé!

Kết quả khi chia sẻ lên Facebook: