Create a jQuery Facebook Photo Gallery

How to Create a jQuery Facebook Photo Gallery in Blogger

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.

http://www.mybloggerlab.com/2013/08/how-to-create-jquery-facebook-photo-gallery-in-blogger.html