How to add Flicker Widget to Blogger

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.