Tất Cả Bài Viết $type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home

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 c...

Get Full Size Thumbnail Blogger

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="http://1.bp.blogspot.com/-t5-HTAnnThU/Vicp0SSNPeI/AAAAAAAACZw/9lbrjwRY64A/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.

Thumbnail

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:

http://1.bp.blogspot.com/-t5-HTAnnThU/Vicp0SSNPeI/AAAAAAAACZw/9lbrjwRY64A/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:

Thumbnail

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

http://1.bp.blogspot.com/-t5-HTAnnThU/Vicp0SSNPeI/AAAAAAAACZw/9lbrjwRY64A/w600-h315-c/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="XXXhttp://1.bp.blogspot.com/-t5-HTAnnThU/Vicp0SSNPeI/AAAAAAAACZw/9lbrjwRY64A/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:

Fullsize Thumbnail Blogger

COMMENTS

Tên

.:: Connect Trojan ::.,111,.htaccess,2,0-day,3,2017,2,Add-on,16,Affiliate,1,Anotador,1,AutoIT,17,Ấn Độ,1,BackDoor,1,Bán Sách,13,banhangonline,1,Bảo Mật,127,Bất Động Sản Tại Tiền Giang,5,Bestsellers,13,Binder,1,blog,31,Blogger,4,Blogger Template,1,Botnet,3,Brute,1,Bug Bounty,1,Bypass,10,ceh,1,Châu Tinh Trì,2,Checked,6,Chiến tranh,2,Chrome,21,Code,5,coin hive,1,Coin-Hive,2,CoinHive,1,Connect Trojan,342,Connect Trojan ::.,1,Cổ Tích,2,Cổ Trang,11,Crack,3,Crypto,5,CSRF,5,CSS,2,Cuộc Sống,1,Dau tu,6,DDoS,6,Designer,1,Dich vụ,1,DNS,4,Download,2,du-an,3,DVD LUMION Tiếng Việt của anh Dũng Già Pro,1,Đam Mỹ,1,điện,1,Đồ Họa,215,Đô Thị,16,e11.me,1,ebook,15,ebook free,286,eBook Phệ Hồn Nghịch Thiên,1,eBook Thịnh Thế Địch Phi,1,Encrypt,1,Encryption,1,epub,77,epub [Tiên hiệp],1,ET-Logger,1,exploit,23,Exploitation,1,Extractor,2,facebook,69,FireFox,15,Flood,2,Forensic,7,full prc,2,game,177,Gerador,3,Gerenciador,1,Get Root,3,GHDB,3,Giả Tưởng,1,giaitri,1,Google,15,H&Y Shop,2,Hacker,3,Hacking,10,Hacking and Security,6,Hacking Tools,36,Hài hước,8,Hành Động,9,He Thong Site Phim,25,Hijacking,6,Hình Sự,5,hivecoin.hive coin,1,Hỏi Xoáy Đáp Xoay Trên VTV3,1,Hồng Kông,3,HTML,1,Huyền Ảo,92,Hướng dẫn Internet cơ bản,1,IFTTT,703,Imgur,2,Infographic,1,Information Disclosure,1,Internet Explorer,3,IT News,39,J2TeaM,29,J2TeaM Tools,9,JavaScript,6,Javascript Injection,3,Juno_okyo's Blog,23,Khóa Học,28,Khóa Học kiếm tiền online với accesstrade,5,khoá học miễn phí,16,Khóa học Photoshop,19,Khóa học sử dụng mã độc và phòng chống mã độc,1,Khoa Huyễn,6,khuyến mãi,8,kiemhiep,9,Kiếm Hiệp,20,Kiếm Tiền MMO,34,kiếm tiền rút gọn link,1,KilerRat,1,Kinh Dị,25,Kinh Dị - Ma,6,Kinh Doanh,73,kinhdi,1,kinhdoanh,5,KRACK Attacks,1,Lãng mạn,1,lazada,1,Lập trình,2,Lịch Sử,5,Linux,1,Local Attack,2,Logins/Cadastro,1,Lỗi Web,1,Lồng Tiếng,6,Lược Sử Hacker,2,Mã Giảm Giá,2,Mã Hóa,48,Malware,3,Master-Code,31,Máy Tính,1,Metasploit,2,Microsoft,4,mobile hacking,2,monero,1,Movie,25,MySQL,1,NEW PRODUCTS,19,NGHỆ THUẬT ẨN MÌNH,13,ngontinh,10,Ngôn Tình,151,nhà đất,1,Nhà Đất Gò Công,1,Nhân Vật Lịch Sử,2,Nhật Bản,1,Nhựt Trường Group,1,NjRat,5,Nước,1,open redirect,1,Oracle,1,Path Disclosure,2,pdf,77,Pen-Test,6,Pentest Box,9,Phan mem Internet,1,phanmem,22,phanmemdienthoai,3,phanmemmaytinh,10,phần mềm,11,Phim 18,2,Phim 2012,1,Phim 3D,1,Phim Âm Nhạc,2,Phim Bộ,58,Phim Chiến Tranh,5,Phim Dã Sử - Cổ Trang,6,Phim Đài Loan,6,Phim Đang Cập Nhập,5,Phim Đề Cử,4,Phim Hài Hước,26,Phim Hàn Quốc,33,Phim HD Chất Lượng Cao,5,Phim Hoàn Thành,7,Phim Hoạt Hình,2,Phim Hot,2,Phim Hồng Kông,20,Phim HQ,15,Phim Kinh Dị,8,Phim lẻ,7,Phim Mới 2007,1,Phim Mới 2010,1,Phim Mới 2011,4,Phim Mới 2012,2,Phim Mới 2013,2,Phim Mới 2014,6,Phim Mới 2015,4,Phim Nhật Bản,4,Phim SD,12,Phim Thái Lan,6,Phim Thần Thoại,4,Phim Tình Cảm,35,Phim Trung Quốc,37,Phim Truyền Hình,32,Phim Viễn Tưởng,1,Phim Võ Thuật,36,Phim Xã Hội Đen,1,Phishing,5,PHP,16,Plugin,1,Port,1,post mẫu,1,prc,79,Programming,15,Python,1,Quảng Cáo,1,rat,457,Recovery,3,Remote Code Execution,1,Remote Desktop,1,Reverse Engineering,6,review,3,rút gọn link,1,sach,47,Sách,33,Sách Nghệ Thuật Sống,12,Sách Tâm Linh,1,Sách Tiếng Anh,2,sachiep,2,Sản Phẩm,1,Sắc Hiệp,16,Scam,1,Scanner,10,Security,66,SEO,5,share,1,Shell,5,Social Engineering,4,Software,22,Source Unity,1,SQL injection,21,Sức Khỏe,1,Symlink,3,Tài Chính,1,Tài chính cá nhân,2,Tài Liệu,1,Tản mạn,7,Taudio,2,Tâm lý xã hội,1,tấn công,1,Testador,1,Thái Lan,2,Tham Khảo,3,thamkhao,11,Thành Long,1,them,1,Thiệp Cưới,1,Thiết Kế Web,30,Thời Trang,2,Thủ Thuật Hacking,53,Thuyết Minh,5,tienhiep,5,Tiên Hiệp,123,Tiểu Thuyết,100,tiki,3,TIL,8,Tin Tức,52,Tình Cảm - Tâm Lý,16,Tips,39,tool,1,Tool Hack,14,Tools,9,Tổng Hợp,1,Tricks,26,Trinh thám,1,Trinh Thám - Hình Sự,8,trojan original,48,Trọng sinh,11,Trộm mộ,1,Trung Quốc,9,Truyện,1,Trương Định,110,Tu Chân,2,TUTORIALS,124,TVB,3,Twitter,1,Ung_Dung,4,Upload,1,usb,1,vanhoc,11,văn học,6,vBulletin,7,video,16,Vietsub,3,Việt Nam,14,Virus,4,Võ Thuật,12,Võng Du,5,Vulnerability,19,Web Developer,15,webmau,5,WHMCS,3,WiFi,2,wiki lỗi máy tinh,1,wiki lỗi NTG,3,Windows,12,WordPress,43,Write-up,11,XSS,16,Yahoo,1,yeah1offer,1,youtube,11,
ltr
item
Nhựt Trường - Chia sẻ kiến thức miễn phí: Tạo thumbnail chuẩn cho Blogger khi chia sẻ lên Facebook
Tạo thumbnail chuẩn cho Blogger khi chia sẻ lên Facebook
https://1.bp.blogspot.com/-9fTtDFwr3X4/VtW182yFfqI/AAAAAAAACb8/5QRvYNFil1I/s400/full-size-blogger-thumbnail.png
https://1.bp.blogspot.com/-9fTtDFwr3X4/VtW182yFfqI/AAAAAAAACb8/5QRvYNFil1I/s72-c/full-size-blogger-thumbnail.png
Nhựt Trường - Chia sẻ kiến thức miễn phí
https://www.nhuttruong.com/2016/03/tao-thumbnail-chuan-cho-blogger-khi.html
https://www.nhuttruong.com/
https://www.nhuttruong.com/
https://www.nhuttruong.com/2016/03/tao-thumbnail-chuan-cho-blogger-khi.html
true
7607280272436897486
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow Đây là nội dung quý hiếm để tránh google quét chết link Vui lòng đăng nhập Facebook hoặt Tweet để like và share để hiện link Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy