Home > Help Center > Applications > WordPress > Jetpack > Jetpack Widgets: Flickr

Jetpack Widgets: Flickr

If you want to connect your Flickr photos with your WordPress site, now you have the right tool - Flickr (Jetpack) widget.

Flickr (Jetpack) widget allows you to show a stream of images from a Flickr account easily, with just few clicks.

We assume that you have an active Flickr account with at least 4 uploaded images.

To activate Flickr (Jetpack) widget go to Appearance > Widgets in your WordPress Dashboard.

jetpack flickr

In Appearance > Widgets screen drag and drop Flickr (Jetpack) widget into an active sidebar:

jetpack flickr

Set up Flickr (Jetpack)

There are few options we need to set in the widget screen:

jetpack flickr

Title - enter the title to be displayed in the sidebar above the widget.

To get your correct Flickr RSS URL follow these steps:

  • Click on photostream link in your Flickr account:

jetpack flickr

  • Click in the address bar at the end of the URL, add ?details=1 and hit Enter:

jetpack flickr

  • Scroll to the bottom of the page and copy the RSS link from the bottom left corner:

jetpack flickr

  • Paste the URL in the text box

Select the number of photos to be displayed - if your album contains more than four photos do not worry - the users will browse the photos within Flickr interface where the number of photos doesn't matter.

If you select Medium or Large size the photos will be displayed one below the other which doesn't look nice:

jetpack flickr

Save the settings and refresh your browser to see your Flickr photos in the sidebar:

jetpack flickr

To change the style of the bottom link go to Customize > Additional CSS and paste the code below:

.flickr-wrapper a.flickr-more {
    color: #1982d1;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2.6em;
    text-transform: uppercase;
}
.flickr-wrapper a.flickr-more:hover {
   text-decoration:none;
}

jetpack flickr

In this example, we use one of WordPress's default themes - twentyeleven and these CSS styles are consistent with its design.

To change the link style in another theme, you need to follow these steps (it takes a bit knowledge on HTML and CSS):

  • Right-click on the link, and from the menu, select Inspect element
  • Click on the nearest HTML wrapper above the link and copy the outer HTML code
  • In the inspector window click on the widget title and copy the original CSS style from the right window
  • Use the collected information to compose the CSS code for your link:
[id#wrapper or class.wrapper] [element.class] {
property1:value1;
property2:value2;
}

#jetpack #social

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support