Tuesday 11 February 2014

Facebook Like jQuery Pictures Gallery in Blogger Posts

Pictures are must for the blogger posts because it shows the topic of the post Facebook is one of the common way to get targeted traffic we already released couple of Facebook widgets for blogger recently we released Facebook comments for blogger today we come back with other great widget that will embed your Facebook albums in a gallery in blogger posts it will be a great way to post pictures in blogger post it will import your facebook pictures into blogger post with jQuery.

Advantages of jQuery Pictures Gallery

  • Fast To Load
  • Pictures Open in a Same Window.
  • Works on jQuery
  • It Displays Each Album Separately
  • Displays The Date & Number of Pictures in Each Album

Steps To Add The Widget

Follow the steps properly to get the plugin work.

  • First of All Go to http://findmyfacebookid.com/
  • Enter Your Facebook Page Username For Example
    https://www.facebook.com/TheInformativesBlog
  • The Bold Letter Are the username of your facebook page or profile you have to copy it and put it in the box when you open the above website in step 1
  • After You Click on Lookup Numeric ID you will get the ID of Your Facebook Save it we will use it in the next steps.
  • Now Go to Template --> Edit HTML Search For </Head> and paste the following code just above </Head>
    <!-- Guidetivist 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>
  • Now After pasting The Code Go To Pages & Create a New page & in The Page HTML Section paste the following code

    <script>
        $(document).ready(function ($) {
            $('#FB_Album_Frame').FB_Album({
                facebookID: 'Your-Page-ID',
                responsiveGallery: false,
                fixedWidth: 980
            });
        });
    </script>
    <div id="FB_Album_Frame"></div>
  • Don't Forget To Replace Your-Page-ID With The ID You Find in Step 1,2

Final Words

Now You have successfully added the jQuery Pictures Gallery For Blogger It Will Gave Your Pictures a Cute & Nice Look.

If You Like The Article Please Share it To Facebook or Other Directories I Will be Very Thankful. :)

No comments:

Post a Comment