Flickr Feeds Shortcode

Last Updated on

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

In this article

Obtaining Flickr API Key

To obtain your API key:

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

Flickr feeds shortcode - choose key

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

Flickr feeds shortcode - api description

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

Flickr feeds shortcode - key secret

Beware! The above API Key and Secret was created only for the purpose of the article and it has been deleted after the article.

Obtaining Flickr ID

To obtain your flickr ID:

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

Flickr feeds shortcode - flickr ID

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

Displaying Flickr Feeds

To add Flickr Feeds:

Add a new page or edit an existing page.

From Visual Composer screen, click + button.

Flickr feeds shortcode - visual composer section

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

Flickr feeds shortcode - add element

When 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

Click 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.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket