How to Add Flickr photo stream on Blogger Template

Flickr is a photo storing application integrated with Yahoo Corporation. Flickr photo sharing is an important and popular medium to store and display personal images which is massively used on smart device. It will automatically sync user’s phone's photos to Flickr. Because it can save our device storage space. Professional to personal website and blog using Flickr for storing image and using widget to display images on their blog or website.

Personal blog or website owner upload their family images and share those on their site. On the other hand Corporate and professional level website display their profile and project images on website through Flickr. On Flickr every account holder currently getting 1000GB of free storage. And no doubt you can store more than 500,000 photos. It’s pretty cool.

You will see in every professional blogger template containing flickr images by using a widget. So today I sharing a tutorial that how easily use flickr as our photo album and display them on our website and blog. We have to go through 3 main stages. First we have to create a Flickr account and upload some images. Secondly we have to get flickr photo stream ID. And finally we will integrate uploaded images on our Blog. So let’s proceed.

Creating Flickr Account and Upload image

For opening a flickr account and uploading images you must have a yahoo account. If you have already yahoo account then directly you can use flickr. If not then just follow the below steps

Step 1 Go to https://www.flickr.com

Step 2 Click on Sign Upbutton. It will redirected to sign up form page

Step 3 After fill up the form just click on Create account button

Step 4 Finally Sign in to enter into your account

Step 5 Now click on You -> Photostream from flickr menu.

Step 6 Next upload your picture. At least 10 picture at a time.

You are done.

Getting Flickr photostream  ID

After opening flickr account and upload picture you have to identify your flickr photostream ID. This is not critical but new uses often don’t find the ID. So follow the below steps-

Step 1 Go to https://www.flickr.comand sign in to your account

Step 2 click on You -> Photostream from flickr menu.

Step 3 Now look at the URL from browser and find like below code

https://www.flickr.com/photos/127749514@N05

here the last 127749514@N05 is the flickr photostream id. So find yours copy the code.

Alternative way to find Flickr photostream ID

There are another way you can find Flickr photostream ID easily.

Step 1 Just Go to http://idgettr.com/

Step 2 and add your flickr user name http://www.flickr.com/photos/username/

 Step 3 Click on Find button. And simply copy the code.

Adding Flickr widget in Blogger Template CSS Part

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin>by Pressing Ctrl+F 

Step 4 Paste the below code Above/before ]]></b:skin>

/*Flickr Image Gallery by http://www.bloggerspice.com*/
.flickr_plugin {
width: 300px;
}
.flickr_badge_image {
float: left;
height: 65px;
margin: 5px;
width: 60px;
}
.flickr_badge_image a {
display: block;
}
.flickr_badge_image a img {
display: block;
width: 100%;
height: auto;
-webkit-transition: opacity 100ms linear;
-moz-transition: opacity 100ms linear;
-ms-transition: opacity 100ms linear;
-o-transition: opacity 100ms linear;
transition: opacity 100ms linear;
}
.flickr_badge_image a img:hover {
opacity: .5;
}
.d-header {
margin-top: -1px;
}
.ccounter {
margin-top: -1px;
}

Integrating Flickr widget in Blogger Template (HTML Part)

This is the final steps that we will add the flickr widget code for integrating in our blog.

Step 1 First Go to ->Blogger Dashboard -> Layout

Step 2 Now Click On Add a gadget link and add an HTMl widget

Step 3 Now Copy the Code Given Below and Paste it to there.

<div class="flickr_plugin"><script src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=127749514@N05" type="text/javascript"></script></div>

Customization

• Replace 127749514@N05 With Your Flickr photostream Id

Hope you have successfully followed all the steps and your flickr album is showing in your blog site. If you face any trouble then kindly share with us. Thanks.