What is jQuery Facebook Photo Gallery For Blogger?
This plugin enables you to view and import your all Facebook Galleries and images to your website. It imports your all public albums, but it works only with Facebook Page galleries. It also gives you the flexibility and the freedom to exclude any album that you like. The whole system works on jQuery, so you get enough options to customize it they way you like. In case, you want to see this photo gallery in live action check out the following screenshot.How to create jQuery Facebook Photo Gallery in Blogger?
Installing Facebook Gallery:The first thing you need to do is to login into your Google account. After logging in go to Blogger.com >> Your blog >> Template >> Edit HTML and search for the ending </head> Tag. After finding the head tag just above it paste the following piece of code.
<!-- MyBloggrLab Jquery Facebook Gallery Plugin -->
<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" />
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<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>
After adding the above code in your template, just press the “Save Template” button and proceed to the next step.
Creating Facebook Gallery:
Now you need to find the ID of your Facebook Page profile (remember this only works for pages not profile). To find your Facebook Page ID go to http://findmyfacebookid.com/ enter your Page URL i.e. https://www.facebook.com/Templateism and hit “Lookup Numeric ID” to get a numeric Id of your page.
Now once you find out your ID, it's time to create a gallery. Now it depends on you where you would like to see the photo gallery either in your post or pages. If you like to create a page then, go to Blogger >> Your site >> Pages >> add a new page >> Give your page a title sometime like “Facebook Galleries”. After naming your page, simply paste the following code there. (Do not forget to replace Your-Page-ID with the numeric ID that you got from the previous step.
<script>
$(document).ready(function ($) {
$('#FB_Album_Frame').FB_Album({
facebookID: 'Your-Page-ID',
responsiveGallery: false,
fixedWidth: 980
});
});
</script>
<div id="FB_Album_Frame"></div>
Congratulations: Once everything is done, publish it. You have successfully created a Facebook jQuery Photo Gallery in Blogger. Now go and check if it is working fine.
We hope this tutorial has helped you in learning How to Create a jQuery Facebook Photo Gallery in Blogger. This plugin would certainly help those who are really crazy about facebook and photo galleries. Let us know about your experiance, if you liked it then share it on Facebook.

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
24 comments
I LOVE the idea of this but just can't get it to work. I can get it on my blog but it messes up my navigation bar... am I doing something wrong?
Thanks. This post is unique!
waw.. it's nice.
thanks for share brother
wow great its very intresting who loves to make photos blog
I don't think so you need to mess up with your navigation at all to install this gadget!
Just Paste the copy in either POSTS or Pages (Make sure you are switched to HTML Mode).
I did exactly as the instructions said but it changed the way my navigation bar looked... Normally my navigation category's that have sub category's have an arrow next to the category indicating there is a sub category... after I added the photo gallery the arrows disappeared.
A.o.a! Syed bhai!
I installed the facebook recomendation box from your tutorial from the link in this post but it doesn't show up on my blog. my blog is http://blogchilly.blogspot.com. I have done it exactly you said but it isn't working.
Can you please provide me a link to your blog? Be sure, to install this gadget so i can debug it. Cheers!
wow.. it's awesome, but i wait how it works for profile..
Its not working :(
Here is the link, I re-added the code, and still it's changed my navigation bar. http://www.coachmmorris.com/
Actually never mind! I don't think I am going to use it :(
this is a great app, but is there away to have more than 20 pics displayed per album?
thanks a lot for the shot!
it works pretty well, the only problem is that the album title is white on white background, impossible to see. How to change it on dark font?
and i can display only 9 albums on over 15 i have on facebook
Thanks a lot, well done!! :)
www.gabrielesaluci.com
Can you please provide me the URL of you Album so i can provide you a fix!
here you are! thanks a lot! :)
https://www.facebook.com/salucigabriele/photos_albums
thanks a lot! this is the link to the facebook albums https://www.facebook.com/salucigabriele/photos_albums
the blog is the one i linked before and the jquery is on the page "foto"
thanks a lot for your help :)
Hi thanks a lot for your help!
the page of the blog where the pic are is this: http://www.gabrielesaluci.com/p/foto-fb.html
the URL of facebook is this: https://www.facebook.com/salucigabriele/photos_albums
the problem is still
thanks!!
Its working fine :)
Love it! But how do I remove or exclude albums I don't want showing?
thanks yoo..it works on my blog..but how to remove album that we don want to show in blog..please help me..
It works but i cant see the timeline album of my fb page and also width can not be changed.. :(
Can you provide me your blog url?
Don't Show The Thumbnails!!!
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.