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

101 komentar

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

Balas

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.

Balas

nyesel ya mutusin fatin... :D

Balas

Cakep banget galerinya, mas :)

Balas

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

Balas

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

Balas

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

Balas

bukan penggemar.. ngikuti kemauan pengunjung aja :)

Balas

wkwkkw.. emang tutorial baru sih sob

Balas

keren kang :D kapan2 coba deh :)

Balas

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

Balas

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

Balas

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

Balas

Costum banget lah kang pokonya .. mantap hehe

Balas


kalau pakek album Picasa ada gak kang?

Balas

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

Balas

Mantap Om untuk tutor blognya...sip

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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 :)

Balas

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

Balas

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

Balas

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

Balas

gelo teh kehed bisaan manehna :P

Balas

wow kereeen, emang postingan kang ismet selalu bermutu

Balas

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

Balas

kok gak bisa keluar yah mas galerinya anehhh dehhh

Balas

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

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

Balas

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

Balas

xixixi sama jmpol kaki ya :)

Balas

itu juga buatan orang lain ko

Balas

kalo yang merah suasana agustusan aja sob :)

Balas

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

Balas

betul.. ditunggu update MDF

Balas

apa bedanya ya? keliatannya sama aja icon nya :)

Balas

edaaaan lah pokonamah :D

Balas

kemungkinan jQuery blom terpasang, atau mungkin double

Balas

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

Balas

memang sama kang, tapi di browser mozilla ada kelihatan lecet gitu, tepuk tangannya agak lelet hehehehe.....

Balas

kabehanna edan, urang mah hanteu...hoeheoiheoiheiohe

Balas

Kang kode untuk mengubah border kotak nama pada komentar bertingkat yang mana ?
terima kasih

Balas

gpp kang jd ngerepotin :D yang ini jg sudah keren :)

Balas

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]

Balas

kebanyakan script jquery.mins nya kali

Balas

ngga kok, di search ada 1 doang javascript min nya :3
[img]http://i.imgur.com/FsRvN5h.jpg[/img]

Balas

ID halamannya udah betul, fotonya ada... beberapa kemungkinan sih sob

Balas
Komentar ini telah dihapus oleh pengarang.

nah ini baru bisa xD
terimakasih kang atas tutorialnya :)

Balas

Mantap Artikelnya :D
Saya Suka
[+] MazDicha

Balas

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

Balas

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?

Balas

cari aja cara membuat gambar hitam putih

Balas

adaaawww segeeerr pisyaaan maaanggg!!! -,-

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

Balas

sekedar membantu ^_^ :

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

Balas

tetep ngga bisa nih, saya udah ganti semua albumnya publik tapi tetep aja cuma keliatan loading.. tapi pas saya coba pake id-nya fatin, malah tampil..

Balas

mantabbb...kalo digabungkan dengan plugin lazyload kang

Balas

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

Balas

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

Balas

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

Balas

itu untuk halaman, bukan profil

Balas

iya kang udah aku posting di halaman baru, aku simpan kayak cara yang diatas, setelah tak liat blogg nya, di halaman baru itu gak bis muncul kang

coba liat ndek sini kang
http://keluargaxapekdua.blogspot.com/p/blog-page_3025.html

Balas

maksudnya, bukan gitu.. untuk halaman fb (fans page) bukan profile. terus di blog tidak boleh lebih dari 1 jQuery.. hapus salah satu
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Balas

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

Balas

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

Balas

itu halam facebook , mas, terimakasih kebanggan buat saya,:D

Balas

itu page halaman dengan id : https://www.facebook.com/pages/MEDIA-TAPUT/129785827191629,

Balas

coba di blog lain bisa? kl tetep ga bisa, kemungkinan sih bentrok script.. paling dari blog lain di iframe

Balas

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

Balas

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

Balas

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

Balas

Kang.kok gak muncul apa-apa ya?

Balas

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

Balas

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

Balas

waduh lama banget loading nya .. berat ksng :D

Balas

Kagak nampil bang di demonya -_-

Balas

Diedit lagi dong posnya ... :(

Balas

gimana cra buat menu disamping kiri seperti blog abg tu?

Balas

Poskan Komentar


×
Chat