Nhúng ảnh từ nhóm Facebook vào WordPress

Vào một ngày đẹp trời hay không chẳng rõ, tự dưng ông Sói và ông Rắn bảo nhau là làm website cho nhóm Vietnam Streetlife Photography. Sau một hồi lời ra tiếng vào thì 4 ông thống nhất dùng tên miền streetphotography.vn. Việc dựng website thì ông Lựợm xung phong làm.

Về phần mình, Lựợm chợt nhận ra là mình còn có mấy cái website nữa đang phải làm. Được cái là mấy cái đấy chủ yếu là cài đặt và tuỳ biến là chính, cái nào khách hàng yêu cầu vượt quá khả năng của giải pháp thì đành từ chối vì không có sức để dựng hàng thửa.

Nhưng cái website ảnh phố này, do đặc thù nội dung cũng như muốn thể thao trí não, nên Lựợm quyết định làm hàng thửa. Thế là tranh thủ những lúc chờ phản hồi của khách hàng, anh kì cạch gõ.

Làm được một thời gian thì anh nhận ra là bắt chước Lens Blog của NYTimes hơi nhiều. Nhưng thôi, bắt chước được cũng tốt, kém tinh tế hơn cũng được, miễn là nó chạy.

Hôm qua, anh đề nghị là website sẽ có chuyên mục ảnh trong tuần, cụ thể là tuyển chọn những ảnh hay nhất mà thành viên nhóm Vietnam Streetlife Photography đã đăng trong tuần. 3 anh kia OK.

Vấn đề là hiển thị như nào. Tải về đăng lại thì khá mất công, mà tính tương tác thấp. Thôi, nhúng cho lành. Nhưng anh sớm thất vọng vì Facebook không hỗ trợ nhúng cho các post trong group như đối với các post trong trang cá nhân hoặc fanpage. Và cấu trúc url mà nó hỗ trợ nhúng là: FB/username/post_id.

Cảnh báo: Phần còn lại của bài viết toàn là những thứ dớ dẩn, nếu không tò mò thì xin mời xem kết quả ở đây 🙂

Sau một hồi Google chỉ ra mấy cái plugin khùng khoằm thì anh biết là FB có cái Graph khỉ gió gì đó mà khi truy vấn nó sẽ trả về dữ liệu định dạng json.

URL của ảnh trên group khi xem sẽ có dạng: https://www.facebook.com/photo.php?fbid=\d+&blah

Như vậy là biết được post_id:

$post_id = preg_replace("/^.*fbid=(\d+).*$/", "$1", $url);

Giờ lấy dữ liệu json bằng FB Graph:

$jasondata = 'https://graph.facebook.com/?id=' . urlencode($url);
$object = json_decode(file_get_contents($jasondata));

Xem cái $object kia thì không có username mà chỉ có id. Nhưng khi thử nhúng thì vẫn được. OK. Thế thì URL cần tìm sẽ là:

$new_url = 'https://www.facebook.com/' . $object->from->id . '/posts/' . $post_id;

Tất nhiên là không thể cứ thế thả mấy chục cái $url vào bài rồi chạy filter. Như thế có mà đến Tết mới xong. Anh phải chuyển hết ra $new_url rồi mới cho vào bài. Và để tiện cho việc biên tập và cũng như tương thích sau này, dữ liệu của anh sẽ là:

$author  = $object->from->name; // Tác giả
$caption = $object->name; // Chú thích ảnh
$preview = $object->images[5]->source; // Ảnh nhỏ

$string = "[fb url='$new_url']" . "<img src='$preview' width='150' />"
        . "$author — $caption" . '[/fb]';

Thế là khi soạn thảo ở chế độ visual, anh có thể nhìn thấy ngay ảnh như thế nào mà không phải mở cái $new_url ra để xem.

Còn cái shortcode [fb] kia thì cũng giản dị thôi:

return '<div class="fb-embed-wrapper"><div class="fb-post" data-href="' . $url . '"></div></div>';

Nếu dở hơi mà đọc đến đây và không hiểu gì thì có thể xem kết quả ở đây :v