Embeding a Facebook photo gallery in your website
March 9th, 2014 by NikSometimes, 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 …
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
-
Display Facebook Photos on Your Website with Embed Social
-
Display Facebook Photos on Your Website with GalleriaÂ
Apparently there are some issues with the Galleria Plugin according to few comments I saw on the page linked above. Do have quick look at them as some might effect your requirement, provided they are not already taken care in the current build of the plugin
-
Display Facebook Photos on Your Website with FBalbum
I found this one too , which seemed interesting as it gave control over the CSSÂ of the Photo Gallery. So this option could prove surely a choice for those design orientated developers , who wish to tweek the look-n-feel to their satisfaction. Having said that it will take up quite some development hours for you will have to look at the implementation for what happens when the user clicks the thumbnails … Â http://zach.lysobey.com/files/fbAlbum/fbAlbum.html
Seems to be pretty decent, but this was not the one I was looking for …
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 ButtonLet people share pages and content from your site back to their Facebook profile with one click, so all their friends can read them. |
Share ButtonAllow people to share to Facebook, share with particular friends or with a group. Alternatively, they can share in a private message. |
Embedded PostsEmbedded Posts let you add any public post from Facebook to your blog or web site. |
CommentsThe Comments plugin lets people comment on any piece of content on your site. |
Send ButtonLet people privately send content on your site to their friends. |
Follow ButtonLet people subscribe to public updates on Facebook. |
Activity FeedDisplays the most interesting, recent activity taking place on your site. |
Recommendations FeedDisplays the most recommended content on your site. |
Recommendations BarLet people like content, get recommendations, and share what they are reading with their Friends. |
Like BoxA special version of the Like Button only for Facebook pages. |
FacepileDisplay the profile photos of the people who have connected with your Facebook page or app. |
Tags: Facebook Social Plugins
Subscribe to ExpressingIT by Email | Follow Me on Twitter