How to Add a Flickr Photo Widget in Blogger

Advertisements
Flickr is among the most prominent and reliable photo streaming website.  It has most hyper active community that actively shares their photos and videos with their friends and families. Flickr has its own Social functionalities and a massive number of loyal users. Recently, we received quite a few emails from our users asked us how they can display an HTML or Flash based galleries of their recent Flickr photos in his Blogger Blog. In this article, we will show you how to add a Flickr Photo Widget in Blogger. 

Step#1: You chose an HTML badge: The First thing you need to do is to login into your Flickr account. After logging in, you have to go to open the Widget generator tool offered by Flickr developers. There you will be able to see two options An HTML badge and A Flash badge. Now it entirely depends on you which style you like the most. Once done, Press “Next” button located at the bottom of the page.
Step#2: Displaying Public Photos: On pressing the next button, you will be able to see a few more options, just select “All of your public photos and video” and hit the “Next: Layout” button present at the bottom. 

Step#3: Set the layout options: In this step you have to customize the appearance of your widget. It would offer a plenty of options like how many items to show, the size of your photos, the orientation and etc.   Carefully fill them according to your needs and move to the next step. 

Step#4: Choosing the color: It allows you to customize the color of your widget so that you can match the color scheme of your website. This feature is offered because most of the users do not like to compromise on their design, so it provides a few options to give the widget a slight touch of your website. Finally press the “Next” button.
Step#5: Apply the widget on your blog: Now you will be able to see a small preview and the HTML coding of the widget. Copy the whole HTML coding and go to Blogger.com >> Add a new post. Now select the Edit HTML tab and paste the coding of the widget in the text area which you copied a few moments ago. In case you want to add this gadget into your sidebar then go to the Layout >> Add a Gadget >> Add HTML/JavaScript and paste the code in the HTML Box and save the widget. 
Congratulations: The Flickr Widget is successfully added into your website. 

You probably notice that few images are big while few are small in size, so if you want to keep the size of your images equal, then you need to add a custom CSS class in your template style file. 

.flickr_badge_image img {
border: 1px solid #fafafa !important;
width: 180px;
height: 175px;
background-color: #f2f2f2;}

You might need to adjust the width and height of the images so that it could match your template’s layout. For example, if you have a small sidebar then you have to reduce the width, as well as the height. Keep on adjusting them until it fits your site. 

We hope this quick article would help you in adding a perfect Flickr widget in blogger. What are your thoughts about this gadget? Do you have a better way to add Flickr galleries in blogger? Feel free to share your views in the comments.   
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

7 comments

May 3, 2013 at 3:07 PM

Well syed good posts. Flicker is not only provides us this widget but its also a popular sites that provides free quality images for blogging.

Syed bro how to find blog duplicate contents. How you finds your blog duplicate contents. Any secret. I am coming bro.

May 3, 2013 at 3:39 PM

I don't really like Flickr much because their service is not that good and their interface is not friendly. Really hard to use. Thanks for the post tho :D

May 4, 2013 at 10:47 PM

Thanks for the post.

June 17, 2013 at 8:30 AM

Very helpful. Thanks

March 19, 2014 at 10:37 AM

Hello... is this no longer working? I tried copying the URL and it said there was a maximum of letters allowed, and wouldn't load the widget. Why isn't it working?

Editorial Team MOD
March 20, 2014 at 9:08 AM

It is Flickr's official widget. Keep trying it will work!

April 1, 2015 at 1:11 AM

Thank a lot

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.