Membuat Facebook Photo Gallery di Blog

Membuat Facebook Photo Gallery di Blog - Tidak dipungkiri bahwa Jejaring sosial seperti Facebook merupakan penghasil traffik dan pengunjung untuk sebuah website atau blog. Oleh karena itu banyak tutorial tentang Cara memasang facebook like box, rekomendasi dsb. Saat ini adalah tutorial tentang bagaimana cara membuat gallery photo Facebook di Blog.facebook photo gallery

Facebook Photo Gallery ini hanya menampilkan photo album pada halaman facebook bukan pada profil facebook. Untuk melihat bagaimana hasilnya siahkan lihat demonya.


Bagi sobat yang ingin memasangnya, silahkan ikuti langkah mudahnya :

Langkah 1 : Pastikan template sobat sudah terpasang script jQuery, kalau belum silahkan kunjungi tutorial Cara Menambahkan jQuery pada Template Blogger.

Langkah 2 : Simpan kode ini di atas </head>
<link media="all" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet" type="text/css" />
<link media="all" href="https://googledrive.com/host/0B-vz7n1QSdEfWE1Wbmxtc2FYN1k" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfRkNxSXVfYjlRU3c"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUDFxcEpsM1ZSTjQ"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfaHU3dTFPallrU1E"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUFhSTlNaaU5tTkE"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfeVlQNnBDZGhtXzQ"></script>
Simpan Template

Cara Memasang Photo Gallery Facebook


Untuk memasang / membuat gallery photo halaman facebook, simpan kode di bawah ini pada artikel / halaman statis. (Lakukan pada mode HTML)
<script>
    $(document).ready(function ($) {
        $('#FB_Album_Frame').FB_Album({
            facebookID: 'ID-Facebook-di-sini',
            responsiveGallery: false,
            fixedWidth: 980
        });
    });
</script>

<div id="FB_Album_Frame"></div>
ganti tulisan ID-Facebook-di-sini dengan ID Facebook berupa Nomor (bukan username).

Cara Mendapatkan ID Facebook


1. Kunjungi halaman ini
2. Ketik username, misalkan halaman facebook demo https://www.facebook.com/FatinShidqiaLubis cukup tulis FatinShidqiaLubis kemudian klik Get Facebook ID

fatin facebook

3. Lihat kode yang diblok, copy kode yang seperti itu dan ganti tulisan ID-Facebook-di-sini pada script di atas.
4. Publikasikan postingan / halaman sobat.

Semoga bermanfaat

Resource: http://www.mybloggerlab.com/2013/08/how-to-create-jquery-facebook-photo-gallery-in-blogger.html
Berita Lebih Baru Berita Lebih Lama
  • Muhammad Ibnu Idris
    Profil: https://www.blogger.com/profile/01153449473462083586
    21 Agustus, 2013

    Gilaaaa... Keren abis. Hahaha.
    Kang kang kang Ismet.... Foto gw aja donk, jangan fotonya Fatin, Jadi inget mantan gw kan nih... ;(

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      21 Agustus, 2013

      nyesel ya mutusin fatin... :D

  • Prisma Try Laksana
    Profil: https://www.blogger.com/profile/05170240561104481444
    21 Agustus, 2013

    makin keren aja tutor nya

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      21 Agustus, 2013

      tks sob...

  • Unknown
    Profil: https://www.blogger.com/profile/14123887184606801094
    21 Agustus, 2013

    Kalau memasang foto galeri seperti ini sulit kang sepertinya, karena memakai frame dari facebook yang sangat memberatkan blog. Tapi setiap orang berbeda selera. Tergantung pemakai.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      21 Agustus, 2013

      tidak semua tutorial harus diterapkan sob... tergantung kebutuhan :)

  • Mohd Adib
    Profil: https://www.blogger.com/profile/09419106123281767562
    21 Agustus, 2013

    stylo :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      21 Agustus, 2013

      :-bd

  • Unknown
    Profil: https://www.blogger.com/profile/04918953956465548361
    21 Agustus, 2013

    Cakep banget galerinya, mas :)

  • Anonim
    Profil:
    21 Agustus, 2013

    Yang digalerinya saya lihat cantik dan manis mas,baru kali lihat facebook photo gallery diblog :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      21 Agustus, 2013

      wkwkkw.. emang tutorial baru sih sob

  • Unknown
    Profil: https://www.blogger.com/profile/18319838540668933474
    21 Agustus, 2013

    <i rel="code">:)</i>

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      21 Agustus, 2013

      maksudnya..... :)

  • Adhy Suryadi
    Profil: https://www.blogger.com/profile/06846144400647921085
    21 Agustus, 2013

    Keren kang galeri photona...hehehe...ternyata penggemar fatin juga heehehe...

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      21 Agustus, 2013

      bukan penggemar.. ngikuti kemauan pengunjung aja :)

  • Sunandar
    Profil: https://www.blogger.com/profile/17786224717024098823
    21 Agustus, 2013

    keren kang :D kapan2 coba deh :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      silahkan sob

  • Anonim
    Profil:
    21 Agustus, 2013

    Wah, kalau ini wajib dicoba nih, habisnya keren abiss kang :D, 4 jempol buat kang ismet :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      xixixi sama jmpol kaki ya :)

  • Imron Fhatoni
    Profil: https://www.blogger.com/profile/18030836574216391697
    21 Agustus, 2013

    itu yang membuat kecintaan saya mengunjungi blog ini..
    selalu ada yang baru saya dapatkan dari kang ismed
    terima kasih banyak kang :-d

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      itu juga buatan orang lain ko

  • Ahlun Nazar
    Profil: https://www.blogger.com/profile/05666832616438100178
    21 Agustus, 2013

    Hehe nanti saya mau bikin Blog Galery Photo Facebook ah ... :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      wkwkwkw.... :-bd

  • Sopala Multapa
    Profil: https://www.blogger.com/profile/17709242066690693656
    21 Agustus, 2013

    Costum banget lah kang pokonya .. mantap hehe

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      thanks sob

  • Dixy
    Profil: https://www.blogger.com/profile/11558697564953155797
    21 Agustus, 2013

    kalau pakek album Picasa ada gak kang?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      blom nemu sob

  • Unknown
    Profil: https://www.blogger.com/profile/13186470907755848482
    21 Agustus, 2013

    fotonya mirip si nini waktu muda he,,,,,

  • Unknown
    Profil: https://www.blogger.com/profile/09483162592740213577
    21 Agustus, 2013

    Mantap Om untuk tutor blognya...sip

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      tengkyu sob :)

  • Unknown
    Profil: https://www.blogger.com/profile/14712215430804044545
    21 Agustus, 2013

    weh keren2 nih, btw ane kena block nih dari blog kangismet gara2 pake adblock ~_~, btw, share tutornya dong kang ^_^

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      21 Agustus, 2013

      xixixi... jalanin aja khusus untuk domain ini :)

  • Unknown
    Profil: https://www.blogger.com/profile/15048689703117101088
    21 Agustus, 2013

    mantep nih kang.
    Boleh juga ni :D buat template baru nnti.
    :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      silahkan dicoba2 sob

  • Unknown
    Profil: https://www.blogger.com/profile/04625695583985114686
    21 Agustus, 2013

    mencoba tiap hari tampil beda ato lagi bingung nentuin warna kang hahahay

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      kalo yang merah suasana agustusan aja sob :)

  • Anonim
    Profil:
    22 Agustus, 2013

    mantap sekali ini... unik kang, hanya ada satu kelemahan di facebook photo gallery untuk blog ini. yaitu foto yang ada di setiap album batas maksimalnya hanya 20 foto yang tampil dan tidak semua album dapat ditampilkan... mungkin bisa dibilang sebagai preview untuk sebuah akun profil / page di fb sepertinya.
    tp secara keseluruhan, trik ini unik menurut saya dan patut dicoba :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      sya blom explor, apa bisa di costumze jumlahnya nanti kita liat dulu deh

  • Unknown
    Profil: https://www.blogger.com/profile/17943695039070055752
    22 Agustus, 2013

    mantap kang... cocok buat blog pribadi..
    btw sorry nih kang, ane udah melewatkan beberapa postingan akang, karena disibukan dengan pekerjaan dunia jadinya ga semper blogwalking dh...

    • Saeful Rahman
      Profil:https://www.blogger.com/profile/12948365880346888770
      22 Agustus, 2013

      Pantesan, ditunggu loh tutor terbaru dari MDF-Blog. :D

  • Admin
    Profil: https://www.blogger.com/profile/13586899371667182261
    22 Agustus, 2013

    heheh ada2 aja tutorialnya, tapi cukup keren kok, lar sekrg blog kang ismet ini menganti warna, apalage warna kesukaan saya... |o| jreeng.....

    • Admin
      Profil:https://www.blogger.com/profile/13586899371667182261
      22 Agustus, 2013

      oh ya kang, coba ditukarin aja gambar icon ini |o| dengan url ini http://reader-download.googlecode.com/svn/trunk/images/emo/applause.gif, biar tidak keliahatan lecet hehehe

  • Beben Koben
    Profil: https://www.blogger.com/profile/08754225607191914278
    22 Agustus, 2013

    gelo teh kehed bisaan manehna :P

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      edaaaan lah pokonamah :D

  • Semar Badranaya
    Profil: https://www.blogger.com/profile/11617415087161101601
    22 Agustus, 2013

    wow kereeen, emang postingan kang ismet selalu bermutu

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      tengkyu sob

  • Unknown
    Profil: https://www.blogger.com/profile/16193528609734671554
    22 Agustus, 2013

    Keren Kang, Bisa Juga Photo Gallery Facebook, ada di Blog...

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      hehehe ya gituu deh

  • hanggarps
    Profil: https://www.blogger.com/profile/04308708259890880594
    22 Agustus, 2013

    kok gak bisa keluar yah mas galerinya anehhh dehhh

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      kemungkinan jQuery blom terpasang, atau mungkin double

  • Saeful Rahman
    Profil: https://www.blogger.com/profile/12948365880346888770
    22 Agustus, 2013

    Sumpah keren pisan kang, hebat banget yg buatnya.:D

    Kang di share ath trheadded comment versi akang anu di template zikazev. :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      thread comen tinggal copy CSSna kang, bongkar we zikazep na :)

  • Techsimo
    Profil: https://www.blogger.com/profile/10853937455708624027
    22 Agustus, 2013

    perlu dicobah ni....!

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      23 Agustus, 2013

      silahkan sob

  • Dandi Saseno
    Profil: https://www.blogger.com/profile/03373217438144230746
    25 Agustus, 2013

    ngeliat demonya si keren, tapi kok pas saya terapkan semua kode itu malah hanya ada gambar loading saja ya? :(
    [img]http://i.imgur.com/KSAJOVe.jpg[/img]

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      25 Agustus, 2013

      kebanyakan script jquery.mins nya kali

    • Anonim
      Profil:
      25 Agustus, 2013

      mungkin setingan foto di fb nya di private atau hanya untuk teman, cb di ganti ke mode publik.

  • Unknown
    Profil: https://www.blogger.com/profile/11443827043831611668
    25 Agustus, 2013

    Mantap Artikelnya :D
    Saya Suka
    [+] MazDicha

  • Anonim
    Profil:
    25 Agustus, 2013

    kang sori nanya lg agak oot, kl bikin thumb / gambar di post jd gak berwarna trus kl di hover berwarna kyk blog kang Ismet yang dulu gmn caranya ya?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      28 Agustus, 2013

      cari aja cara membuat gambar hitam putih

    • Kang Rian
      Profil:https://www.blogger.com/profile/07551541947951019123
      29 Agustus, 2013

      sekedar membantu ^_^ :

      [catatan]http://blog.riandesign.web.id/2013/04/merubah-gambar-menjadi-hitam-putih.html[/catatan]

  • Kang Rian
    Profil: https://www.blogger.com/profile/07551541947951019123
    29 Agustus, 2013

    adaaawww segeeerr pisyaaan maaanggg!!! -,-

    nyobiann nyak , sareng izin repost daku yang tampan ini ..

  • Dat-s
    Profil: https://www.blogger.com/profile/11963088077078082434
    15 September, 2013

    Mantaff...!!! I Suka Gallery Yang Kayak Gini...!!! Salut,,,!!! Makasih Gan Infonya...!!!

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      15 September, 2013

      sama2 sob

  • Riansa Rachman
    Profil: https://www.blogger.com/profile/17612533001704314909
    18 September, 2013

    kang ko ga bisa pakr id fb punya saya, ??? solusinya apa?

  • santoso
    Profil: https://www.blogger.com/profile/16560938943097170929
    07 November, 2013

    kang ismet, kok di gak bisa dibuka waktu tampilan udah di simpan, loading terus kang, gak muncul fotonya :(

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 November, 2013

      itu untuk halaman, bukan profil

  • Unknown
    Profil: https://www.blogger.com/profile/01143778710767288784
    16 November, 2013

    Terima Kasih mas Postingan sangat menarik dan membantu , mohon bantuan nya mas, aku sudah menerapkan panduan diatas pada blog saya, dan tidak muncul pada halaman statis saya, jquery dulu saya pakai 1.4.2 dan saya ganti dengan jquery 1.8.3 , dan sudah saya periksa jquery tidak lebih dari 1. terima kasih mas..

    untuk page masalahnya : http://mediataput.blogspot.com/p/blog-page_10.html

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      16 November, 2013

      saya liat tidak ada entry.. yang dipasang bukan profil kan?

  • Unknown
    Profil: https://www.blogger.com/profile/01143778710767288784
    16 November, 2013

    terima kasih mas, atas perhatiannya, dgn harapan mas dapat membantu saya untuk menerapkan photo album ini pada template simpledesign ini. sekali lagi saya ucapkan terima kasih mas, salam dari saya

  • Unknown
    Profil: https://www.blogger.com/profile/12877811932326803192
    25 November, 2013

    wah keren bgt ni. saya banyak belajar dari blog kang ismet :D
    thanks kang

  • Dat-s
    Profil: https://www.blogger.com/profile/11963088077078082434
    30 November, 2013

    Gan Mau Nanya Nih, Setelah Di Coba, galerinya Malah Muncul Di Atas Bukan Di Halaman...!!! Ada Apa?

  • Muhammad Surya
    Profil: https://www.blogger.com/profile/14636302676400942084
    24 Desember, 2013

    Kang.kok gak muncul apa-apa ya?

  • Unknown
    Profil: https://www.blogger.com/profile/00471557008154454617
    12 Januari, 2014

    kang, kalo cuma 1 album saja yg d share gimana ya.. hehe..

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      12 Januari, 2014

      wah ga ngerti sob... bukan saya buat scriptnya soalnya :D

  • Anonim
    Profil:
    29 Januari, 2014

    not working

  • Unknown
    Profil: https://www.blogger.com/profile/02074652537975559457
    27 Februari, 2014

    waduh lama banget loading nya .. berat ksng :D

  • Mahadilsuper
    Profil: https://www.blogger.com/profile/06212339319391808898
    02 Juni, 2014

    Kagak nampil bang di demonya -_-

  • Johan Ferdian JR
    Profil: https://www.blogger.com/profile/03560462495699629159
    12 Juli, 2014

    Diedit lagi dong posnya ... :(

  • Henry DG
    Profil: https://www.blogger.com/profile/13708614384569907717
    11 Agustus, 2014

    gimana cra buat menu disamping kiri seperti blog abg tu?

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
98 Komentar