Adding Flickr Feeds shortcode is a great way to display flickr gallery to your website visitors and keep them up to date.

There are 3 main steps to display a flickr feed on your website. These steps include obtaining your API key and ID, adding the shortcode and adding access details to the shortcode.

Flickr feeds shortcode - demo


Obtaining Flickr API Key

To obtain your API key:

1Go to Flickr The App Garden page. You need to have a Flickr account.
2Apply for Non-Commercial or Commercial API key.

Flickr feeds shortcode - choose key

3Briefly explain what is your API key for and click on Submit.

Flickr feeds shortcode - api description

4Keep a note of key (API key) and secret (API secret).

Flickr feeds shortcode - key secret


Obtaining Flickr ID

To obtain your flickr ID:

1Go to idGettr page. You need to have a Flickr account.
2Copy the URL of your Flickr photo stream and paste it into idGettr page.

Flickr feeds shortcode - flickr ID

3Click on find button then take a note of the id.

Displaying Flickr Feeds

To add Flickr Feeds:

1Add a new page or edit an existing page.

2From Visual Composer screen, click + button.

Flickr feeds shortcode - visual composer section

3In Add Element pop-up screen, search for Flickr Feeds and click on it to be added to the page.

Flickr feeds shortcode - add element

4When the shortcode is added, a new pop-up screen called Flickr Feeds Settings opens. In Flickr API Key setting, add the API key you got from Flickr website, and in Flickr ID setting, add the ID you got from idGettr page.

Flickr feeds shortcode - flickr feed settings

5Click Save changes and publish or update the page to see the result.

Configuring Layout

There are some settings in Flickr Feeds Settings pop-up to configure the layout.

SettingDescription

Number of photosSets the number of photos to display.
How many photos in one rowSets the number of photos to display in one row.

Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file. You can read Adding custom CSS class to a shortcode article for further explanation.