How to Create a jQuery Facebook Photo Gallery in Blogger

Advertisements
Facebook is turning out to be the number one source for quality targeted traffic. This is the reason why webmasters are concentrated more towards connecting  their website with different Facebook Plugins and widgets. We have already covered How to Add Facebook comments, Facebook Recommendation box and Facebook Fan Box in Blogger. Recently, one of our visitors asked us How to Create a JQuery Facebook Photo Gallery in Blogger? Today in this article we will be showing you  How to Create a jQuery Facebook Photo Gallery in Blogger.

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.

On the top of that, you can also view the photos within your site through Lightbox functionality. You can browse different albums and can go back to the place from where you started.

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

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

24 comments

August 15, 2013 at 3:35 PM

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?

August 15, 2013 at 9:05 PM

Thanks. This post is unique!

August 15, 2013 at 10:45 PM

waw.. it's nice.
thanks for share brother

August 16, 2013 at 12:43 AM

wow great its very intresting who loves to make photos blog

Editorial Team MOD
August 16, 2013 at 12:54 AM

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

August 16, 2013 at 6:06 AM

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.

August 16, 2013 at 10:57 AM

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.

Editorial Team MOD
August 16, 2013 at 11:16 AM

Can you please provide me a link to your blog? Be sure, to install this gadget so i can debug it. Cheers!

August 18, 2013 at 4:41 PM

wow.. it's awesome, but i wait how it works for profile..

August 20, 2013 at 6:08 AM

Its not working :(

August 20, 2013 at 7:43 AM

Here is the link, I re-added the code, and still it's changed my navigation bar. http://www.coachmmorris.com/

August 20, 2013 at 8:20 AM

Actually never mind! I don't think I am going to use it :(

September 10, 2013 at 9:23 AM

this is a great app, but is there away to have more than 20 pics displayed per album?

October 27, 2013 at 2:54 AM

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

Editorial Team MOD
October 27, 2013 at 4:16 PM

Can you please provide me the URL of you Album so i can provide you a fix!

October 29, 2013 at 5:20 AM

here you are! thanks a lot! :)
https://www.facebook.com/salucigabriele/photos_albums

October 30, 2013 at 12:59 PM

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

November 1, 2013 at 4:36 AM

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

Editorial Team MOD
November 3, 2013 at 4:12 AM

Its working fine :)

Anonymous
November 15, 2013 at 12:44 PM

Love it! But how do I remove or exclude albums I don't want showing?

March 4, 2014 at 12:10 AM

thanks yoo..it works on my blog..but how to remove album that we don want to show in blog..please help me..

September 3, 2014 at 10:58 PM

It works but i cant see the timeline album of my fb page and also width can not be changed.. :(

Editorial Team MOD
September 4, 2014 at 6:34 AM

Can you provide me your blog url?

May 20, 2015 at 6:38 PM

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.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.