Embeding a Facebook photo gallery in your website

March 9th, 2014 by Nik

Sometimes, so seemed trivial tasks becomes so daunting. “Add a Facebook image gallery to your site”, was just such a task. I simply though it would as  simple as adding any other Facebook Social Plugins  .

I started , by assuming that there would surely be a plugin provided by Facebook Developers Portal to  accomplish this task. To my surprise there is no such plugin provided as a part of Facebook Social Plugins  ( If you are one of those , who  havn’t used Facebook Social Plugins before , I have added a note at the end of this post simply for your benefit).

I googled for a solution and I realized that there are few options to go about doing this task . There were solutions which actually lead me to believe that this is NOT A TRIVIAL TASK, after all. There are solutions out there that suggest several techniques , one also had some solution using Facebook Graph API… Frankly, for all I know, this would be THE way to go about it, but not some simple solution I was looking for.

Finally , after looking a few options ( I have listed some below , for your reference) , I finally found one … I saw this embedded Facebook photo gallery on some page. The developer in me , did a view source and found the simple solution I was looking for  …. Just add the following code into your HTML , where you require the Facebook Photo Album to be inserted .


<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> 
<div class="fb-post" data-href="https://www.facebook.com/media/set/?set=a.375518759212.157287.64037939212&type=3" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/media/set/?set=a.375518759212.157287.64037939212&type=3">Post</a> by <a href="https://www.facebook.com/chembur">inchembur.com</a>.</div></div>

Well! The code above displays the FB Album as below …

Insert-facebook-photo-gallery-into-website-02

Now this one seemed to have everything,  Facebook social links, comments etc.

Other three good techniques that I explored and that would be useful for a few,  looking at a different sort of look-n-feel , are listed below

 

Facebook Social Plugins

For those who are unaware , here is a list of  Social Plugins provided by default by Facebook, that a developer could use to add to any website. Its pretty simple to add these plugins to any webpage you create, as simple as Ctrl-C & Crtl-V. Surely, if are a developer you would’nt require any more spoon feeding than this…  For exact codes that you would need to embed , I suggest you visit  Facebook Social Plugins page

Like Button

Let people share pages and content from your site back to their Facebook profile with one click, so all their friends can read them.

Share Button

Allow people to share to Facebook, share with particular friends or with a group. Alternatively, they can share in a private message.

Embedded Posts

Embedded Posts let you add any public post from Facebook to your blog or web site.

Comments

The Comments plugin lets people comment on any piece of content on your site.

Send Button

Let people privately send content on your site to their friends.

Follow Button

Let people subscribe to public updates on Facebook.

Activity Feed

Displays the most interesting, recent activity taking place on your site.

Recommendations Feed

Displays the most recommended content on your site.

Recommendations Bar

Let people like content, get recommendations, and share what they are reading with their Friends.

Like Box

A special version of the Like Button only for Facebook pages.

Facepile

Display the profile photos of the people who have connected with your Facebook page or app.

Tags:


get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter


Leave a Reply

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter