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

<!-- tipxbot 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/NatureBeautyOfPakistan and hit “Lookup Numeric ID” to get a numeric Id of your page.

when You click on lookup numeric ID , he gives you numeric ID Like This :

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.

Don't forget give your feedback :)