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/AVvXsEjGn5WiwObyRsRxv-_bCDnu0Pxpi7_9inSg1Dwm3eGsA0-ts-ygjD2ckz25zrb9UlM_Z21xxnzLSEmnVFsw4TGR5QkTTQmUS1wFe7Q1cUBh3gV00AxIIAbj8PxJSVAnb8grypLthkMB3wZW/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/AVvXsEjGn5WiwObyRsRxv-_bCDnu0Pxpi7_9inSg1Dwm3eGsA0-ts-ygjD2ckz25zrb9UlM_Z21xxnzLSEmnVFsw4TGR5QkTTQmUS1wFe7Q1cUBh3gV00AxIIAbj8PxJSVAnb8grypLthkMB3wZW/
s72-c/get-free-xyz-domain.png
Ch� ? nh?ng k? t? sau:
s72-cC�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-cTrong ��: 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-chttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGn5WiwObyRsRxv-_bCDnu0Pxpi7_9inSg1Dwm3eGsA0-ts-ygjD2ckz25zrb9UlM_Z21xxnzLSEmnVFsw4TGR5QkTTQmUS1wFe7Q1cUBh3gV00AxIIAbj8PxJSVAnb8grypLthkMB3wZW/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/AVvXsEjGn5WiwObyRsRxv-_bCDnu0Pxpi7_9inSg1Dwm3eGsA0-ts-ygjD2ckz25zrb9UlM_Z21xxnzLSEmnVFsw4TGR5QkTTQmUS1wFe7Q1cUBh3gV00AxIIAbj8PxJSVAnb8grypLthkMB3wZW/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:
