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.
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.
3Briefly explain what is your API key for and click on Submit.
4Keep a note of key (API key) and secret (API 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:
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.
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.
3In Add Element pop-up screen, search for Flickr Feeds and click on it to be added to the page.
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.
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.
| Setting | Description |
|---|---|
| Number of photos | Sets the number of photos to display. |
| How many photos in one row | Sets 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.
