Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Facebook Photo Gallery di Blog

Cara membuat photo gallery dari Facebook 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

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

101 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Gilaaaa... Keren abis. Hahaha.
    Kang kang kang Ismet.... Foto gw aja donk, jangan fotonya Fatin, Jadi inget mantan gw kan nih... ;(
    1. nyesel ya mutusin fatin... :D
  2. makin keren aja tutor nya
    1. tks sob...
  3. 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.
    1. tidak semua tutorial harus diterapkan sob... tergantung kebutuhan :)
  4. stylo :)
    1. :-bd
  5. Mantap !!!
  6. Cakep banget galerinya, mas :)
  7. Yang digalerinya saya lihat cantik dan manis mas,baru kali lihat facebook photo gallery diblog :)
    1. wkwkkw.. emang tutorial baru sih sob
  8. <i rel="code">:)</i>
    1. maksudnya..... :)
  9. Keren kang galeri photona...hehehe...ternyata penggemar fatin juga heehehe...
    1. bukan penggemar.. ngikuti kemauan pengunjung aja :)
  10. keren kang :D kapan2 coba deh :)
    1. silahkan sob
  11. Wah, kalau ini wajib dicoba nih, habisnya keren abiss kang :D, 4 jempol buat kang ismet :D
    1. xixixi sama jmpol kaki ya :)
  12. itu yang membuat kecintaan saya mengunjungi blog ini..
    selalu ada yang baru saya dapatkan dari kang ismed
    terima kasih banyak kang :-d
    1. itu juga buatan orang lain ko
  13. Hehe nanti saya mau bikin Blog Galery Photo Facebook ah ... :D
    1. wkwkwkw.... :-bd
  14. Costum banget lah kang pokonya .. mantap hehe
    1. thanks sob
  15. kalau pakek album Picasa ada gak kang?
    1. blom nemu sob
  16. fotonya mirip si nini waktu muda he,,,,,
  17. Mantap Om untuk tutor blognya...sip
    1. tengkyu sob :)
  18. weh keren2 nih, btw ane kena block nih dari blog kangismet gara2 pake adblock ~_~, btw, share tutornya dong kang ^_^
    1. xixixi... jalanin aja khusus untuk domain ini :)
  19. mantep nih kang.
    Boleh juga ni :D buat template baru nnti.
    :)
    1. silahkan dicoba2 sob
  20. mencoba tiap hari tampil beda ato lagi bingung nentuin warna kang hahahay
    1. kalo yang merah suasana agustusan aja sob :)
  21. 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 :)
    1. sya blom explor, apa bisa di costumze jumlahnya nanti kita liat dulu deh
  22. 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...
    1. Pantesan, ditunggu loh tutor terbaru dari MDF-Blog. :D
  23. heheh ada2 aja tutorialnya, tapi cukup keren kok, lar sekrg blog kang ismet ini menganti warna, apalage warna kesukaan saya... |o| jreeng.....
    1. 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
  24. gelo teh kehed bisaan manehna :P
    1. edaaaan lah pokonamah :D
  25. wow kereeen, emang postingan kang ismet selalu bermutu
    1. tengkyu sob
  26. Keren Kang, Bisa Juga Photo Gallery Facebook, ada di Blog...
    1. hehehe ya gituu deh
  27. kok gak bisa keluar yah mas galerinya anehhh dehhh
    1. kemungkinan jQuery blom terpasang, atau mungkin double
  28. Sumpah keren pisan kang, hebat banget yg buatnya.:D

    Kang di share ath trheadded comment versi akang anu di template zikazev. :)
    1. thread comen tinggal copy CSSna kang, bongkar we zikazep na :)
  29. perlu dicobah ni....!
    1. silahkan sob
  30. Keren kang :D
    1. makasih sob :)
  31. 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]
    1. kebanyakan script jquery.mins nya kali
    2. mungkin setingan foto di fb nya di private atau hanya untuk teman, cb di ganti ke mode publik.
  32. Mantap Artikelnya :D
    Saya Suka
    [+] MazDicha
  33. 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?
    1. cari aja cara membuat gambar hitam putih
    2. sekedar membantu ^_^ :

      [catatan]http://blog.riandesign.web.id/2013/04/merubah-gambar-menjadi-hitam-putih.html[/catatan]
  34. adaaawww segeeerr pisyaaan maaanggg!!! -,-

    nyobiann nyak , sareng izin repost daku yang tampan ini ..
  35. mantabbb...kalo digabungkan dengan plugin lazyload kang
  36. Mantaff...!!! I Suka Gallery Yang Kayak Gini...!!! Salut,,,!!! Makasih Gan Infonya...!!!
    1. sama2 sob
  37. kang ko ga bisa pakr id fb punya saya, ??? solusinya apa?
  38. kang ismet, kok di gak bisa dibuka waktu tampilan udah di simpan, loading terus kang, gak muncul fotonya :(
    1. itu untuk halaman, bukan profil
  39. 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
    1. saya liat tidak ada entry.. yang dipasang bukan profil kan?
  40. 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
  41. wah keren bgt ni. saya banyak belajar dari blog kang ismet :D
    thanks kang
  42. Gan Mau Nanya Nih, Setelah Di Coba, galerinya Malah Muncul Di Atas Bukan Di Halaman...!!! Ada Apa?
  43. Kang.kok gak muncul apa-apa ya?
  44. kang, kalo cuma 1 album saja yg d share gimana ya.. hehe..
    1. wah ga ngerti sob... bukan saya buat scriptnya soalnya :D
  45. not working
  46. waduh lama banget loading nya .. berat ksng :D
  47. Kagak nampil bang di demonya -_-
  48. Diedit lagi dong posnya ... :(
  49. gimana cra buat menu disamping kiri seperti blog abg tu?
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.