Make my own gallery from facebook album with PHP

มีพี่เข้ามาสอบถามเกี่ยวกับอัลบั้มภาพกิจกรรม แบบที่โรงพยาบาลอ่างทอง (ที่ทำงานผม) ใช้อยู่ ว่าเป็น module อะไร? ทำยังไง? เห็นมันสวยดีเลยอยากให้แนะนำ ผมเลยชี้แจงรายละเอียดคร่าวๆ ดังนี้ครับ

code แยกออกเป็นสองส่วนดังนี้ครับ

PHP – ใช้ดึงข้อมูลจาก facebook album มาแสดง
CSS – จัดรูปแบบให้น่าสนใจ

มาดู code php พร้อมคำอธิบาย


<ul class="container-fluid grid cs-style-4">
<?php
/**
 * [$url เปลี่ยนเฉพาะตัวเลข เป็นเลข id บน facebook ของ user หรือ page ที่ต้องการนำอัลบั้มมาแสดงผล]
 * [$obj ดังข้อมูลมาจาก graphAPI ของ facebook รูปแบบข้อมูลจะเป็น JSON]
 * [$ng ตัวแปรนับจำนวนอัลบั้ม เริ่มต้นจาก 0]
 * [$limit กำหนดให้แสดงกี่อัลบั้ม]
 */
 $url = "https://graph.facebook.com/208646139152581/albums";
 $obj = json_decode(file_get_contents($url));
 $ng = 0;
 $limit = 12;

 foreach($obj->data as $item) {

  if ($item->type == 'normal' && $item->name != 'Cover Photos' && $ng <= $limit)
   echo '
   <li class="col-xs-6 col-sm-4">
    <figure>
     <div><img src="https://graph.facebook.com/'.$item->cover_photo.'/picture"></div>
     <figcaption>
      <h5>'.$item->name.'</h5>
      <a href="'.fix_album_link($item->link).'" rel="external">ดูอัลบั้มเต็ม</a>
     </figcaption>
    </figure>
   </li>';
  $ng++;
 }
/**
 * [fix_album_link เพิ่มเข้ามาเพื่อแก้ link ของ อัลบั้มบน facebook ที่มันแก้ไขใหม่ ซึ่งไม่ตรงกับ graphc API ที่มันให้บริการอยู่ อนาคตอาจมีการเปลี่ยนแปลงอีก]
 * @param  [type] $link [ url ของอัลบั้มจาก graphAPI]
 * @return [type]       [url ที่แก้ link แล้ว]
 */
 function fix_album_link($link) {
  $url_parsed = parse_url($link);
  parse_str($url_parsed['query'], $fix);
  return '//www.facebook.com/media/set/?set=a.'.$fix['fbid'].'.'.$fix['aid'].'.'.$fix['id'].'&type=3';;
 }
?>
</ul>

<?php

/**

* [$url เปลี่ยนเฉพาะตัวเลข เป็นเลข id บน facebook ของ user หรือ page ที่ต้องการนำอัลบั้มมาแสดงผล]

* [$obj ดังข้อมูลมาจาก graphAPI ของ facebook รูปแบบข้อมูลจะเป็น JSON]

* [$ng ตัวแปรนับจำนวนอัลบั้ม เริ่มต้นจาก 0]

* [$limit กำหนดให้แสดงกี่อัลบั้ม]

$url = "https://graph.facebook.com/208646139152581/albums";

$obj = json_decode(file_get_contents($url));

$ng = 0;

$limit = 12;

foreach($obj->data as $item) {

if ($item->type == 'normal' && $item->name != 'Cover Photos' && $ng <= $limit)

echo '

<div><img src="https://graph.facebook.com/'.$item->cover_photo.'/picture"></div>

<a href="'.fix_album_link($item->link).'" rel="external">ดูอัลบั้มเต็ม</a>

</figcaption>

</figure>

</li>';

$ng++;

}

/**

* [fix_album_link เพิ่มเข้ามาเพื่อแก้ link ของ อัลบั้มบน facebook ที่มันแก้ไขใหม่ ซึ่งไม่ตรงกับ graphc API ที่มันให้บริการอยู่ อนาคตอาจมีการเปลี่ยนแปลงอีก]

* @param [type] $link [ url ของอัลบั้มจาก graphAPI]

* @return [type] [url ที่แก้ link แล้ว]

function fix_album_link($link) {

$url_parsed = parse_url($link);

parse_str($url_parsed['query'], $fix);

return '//www.facebook.com/media/set/?set=a.'.$fix['fbid'].'.'.$fix['aid'].'.'.$fix['id'].'&type=3';;

}

</ul>

ในส่วนของ CSS นั้นผมใช้ service ของ tympanus codrops

http://tympanus.net/codrops/2013/06/18/caption-hover-effects/

สามารถ download code ตัวอย่างทั้งหมดได้ที่นี่ครับ
https://github.com/MoreMeng/FBgallery

Related