In this tutorial we will create a simple Flicker widget using the Flicker API and the WordPress widget API. The widget can be used multiple times and it will require your Flicker ID and the number of images to display. If we search for something like this we can find a tons of premade widgets, but nothing can be more fun than making it yourself.

Introduction

Flicker is the most popular photo service out there. By creating the Flicker widget you will learn how to use the Flicker API and how to create WordPress widgets.
You can download the widget here

  1. Create a folder flicker_widget in your plug-ins dir.
  2. Create a php file and name it flicker_widget.php.

Step 1 – Create the widget extend class.

From WordPress 2.8 we can copy and paste the widget skeleton code.

	class flickr_widget extends WP_Widget {
    function flickr_widget() {
    parent::WP_Widget(false, $name = 'Flickr Widget');
    }
    
    function form($instance) {
    }
    
    function update($new_instance, $old_instance) {
    }
    
    function widget($args, $instance) {
    }
    
    }
    
    add_action( 'widgets_init', 'fw_load_widgets' );
    function fw_load_widgets() {
    register_widget('flickr_widget');
    }

Step 2 – Making the form.

Before we can make the widget form we need to figure out the input fields that we will use in this widget.

We will need a text filed for the title, the Flicker id and the number of items to display. Copy and paste the code in the form() function.

	$title = esc_attr($instance['title']);
    $flickr_user_id = esc_attr($instance['flickr_user_id']);
    $flickr_img_limit= esc_attr($instance['flickr_img_limit']);
    ?>
    <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('flickr_user_id'); ?>"><?php _e('Enter Flickr ID:'); ?> <input id="<?php echo $this->get_field_id('flickr_user_id'); ?>" name="<?php echo $this->get_field_name('flickr_user_id'); ?>" type="text" value="<?php echo $flickr_user_id; ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('flickr_img_limit'); ?>"><?php _e('Enter Flickr Image Number:'); ?> <input id="<?php echo $this->get_field_id('flickr_img_limit'); ?>" name="<?php echo $this->get_field_name('flickr_img_limit'); ?>" type="text" value="<?php echo $flickr_img_limit; ?>" /></label></p>
    <?php

Step 3 – Making the form update.

To make the form update, you will need to setup your update() function. This should be very easy, by default WordPress sends two parameters in this function the new and the old instance. You don’t need to use the old instance since we don’t have values that we don’t want to change. Go ahead and paste this code in the update() function.

	return $new_instance;

Step 4 – Creating the costume function.

In the enclosure of the class we can add more functions then just the skeleton ones that can be used in the widget.

To make the code cleaner we can go and crate a function that will interact with the Flicker API and use it in the widget when required.

Go ahead and copy/paste the getFlickrs() function bellow the widget function.

	function getFlickrs($flickr_user_id, $flickr_img_limit = 10){
    $flickr_rss_url;
    if( file_exists( ABSPATH . WPINC . '/rss.php') ) {
    require_once(ABSPATH . WPINC . '/rss.php');
    } else {
    require_once(ABSPATH . WPINC . '/rss-functions.php');
    }
    if($flickr_user_id !=""){
    $flickr_rss_url = empty($options['flickr_rss_url']) ? __('http://flickr.com/services/feeds/photos_public.gne?id='.$flickr_user_id.'&format=rss_200') : $options['flickr_rss_url'];
    }
    if ( empty($items) || $items < 1 || $items > 10 ) $items = $flickr_img_limit;
    $rss = fetch_rss( $flickr_rss_url );
    if( is_array( $rss->items ) ) {
    $out = "";
    $items = array_slice( $rss->items, 0, $items );
    $nub = 0;
    while( list( $key, $photo ) = each( $items )  ) {
    preg_match_all("/<IMG.+?SRC=[\"']([^\"']+)/si",$photo[ 'description' ],$sub,PREG_SET_ORDER);
    $photo_url = str_replace( "_m.jpg", "_t.jpg", $sub[0][1] );
    if($nub == 2){
    $nub = 0;
    $out .= "<li class='margin-0'><a href='{$photo[ 'link' ]}'><img alt='".wp_specialchars( $photo[ 'title' ], true )."' title='".wp_specialchars( $photo[ 'title' ], true )."' src='".$photo_url."' border='0' width='75'></a></li>";
    continue;
    }else{
    $out .= "<li><a href='{$photo[ 'link' ]}'><img alt='".wp_specialchars( $photo[ 'title' ], true )."' title='".wp_specialchars( $photo[ 'title' ], true )."' src='".$photo_url."' border='0' width='75'></a></li>";
    }
    
    $nub ++;
    }
    }
    return $out;
    }

This function will receive two parameters, the id and the number of items $flickr_user_id, $flickr_img_limit.

In the function we need to include the WordPress rss file and create the flicker url variable.

After that we just loop thru the rss items and print out the html.

Step 5 – Making everything work.

The final step is to make the widget function print out our html.

Everything here is self explanatory and you need just to copy and paste the code in the widgets() function.

	$title = apply_filters('widget_title', $instance['title']);
    if ( empty($title) ) $title = false;
    if($title){
    echo $before_title;
    echo $title;
    echo $after_title;
    }
    echo $before_widget;
    
    if($instance['flickr_user_id'] != ""){
    echo $this->getFlickrs($instance['flickr_user_id'], $instance['flickr_img_limit']);
    }else{
    echo "Enter Flickr ID.";
    }
    echo $after_widget;

If you have nice images and you want to show it in your blog then this is a nice way of doing that.

0 Comment

Featured Designs

Parent Society

Parent Society

Marijuana Maps

Marijuana Maps

Cake Journal

Cake Journal

CopyKat Recipes

CopyKat Recipes

Jessica Denay

Jessica Denay

Keith Ferrazzi

Keith Ferrazzi

Rennaissance Yoga

Rennaissance Yoga

Brink Zone

Brink Zone

Illustrious Author

Illustrious Author

Boca Care

Boca Care

KingsCast

Kingscast

Notecook

Note Cook

My Business Musings

My Business Musings