on Resources Tutorials

Building a WordPress plugin: Tweetable

4 comments
Twitter follower count
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon

Today we are going to build a Tweetable WordPress plugin from scratch, This plugin will pull latest 5 tweets from Twitter and display it in our WordPress sidebar.

Building a WordPress plugin seems difficult, but you will see that, after some practice, it becomes easier every time you write one.

What is Tweetable?

Tweetable is a lightweight jQuery plugin which enables you to display your twitter feed on your site quickly and easily.

More than just displaying the feeds you can highlight @replys as well as links being dynamically generated for ease of use.

How to use Tweetable?

Tweetable version 1.6 has been developed to work with jQuery 1.4.2. Firstly call in the framework and the jquery.tweetable.js file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tweetable.js"></script>

Next create an element on your page that you want to call your twitter feed into. For example #tweets:

<div id="tweets"></div>

Now you can initiate the plugin by calling tweetable onto your selected element:

$('#tweets').tweetable({username: 'codeforest'});

This is real basic usage of the plugin, for more options consider reading the documentation at Philip Beel’s Tweetable jQuery plugin page.

Now let me explain how to make a WordPress plugin out of this.

What is a WordPress plugin?

Well, according to the WordPress Team:

A WordPress Plugin is a program, or a set of one or more functions, written in the PHP scripting language, that adds a specific set of features or services to the WordPress weblog, which can be seamlessly integrated with the weblog using access points and methods provided by the WordPress Plugin Application Program Interface (API).

For this tutorial you will have to obtain and install WordPress.

First, we will create a folder where all our plugin files will be. Let’s call this folder cf_tweetable and create it under our wp-content/plugins folder inside WordPress installation.

As we are building the plugin for Tweetable jQuery Plugin, download it and put inside our cf_tweetable folder.

Inside this folder, create a cf_tweetable.php file. This is the main plugin file.

To tell WordPress that this is a plugin, we need to enter some comments on top of the main plugin file. So, open up cf_tweetable.php and enter this:

<?php
/*
Plugin Name: Cf_Tweetable
Plugin URI: http://codeforest.net
Description: This plugin shows last n Tweets for a Twitter username in sidebar
Version: 1.0
Author: Zvonko Biskup
Author URI: http://codeforest.net
License: GPL2
*/

Now, go to your Plugins page inside your WordPress admin and our new Tweetable plugin should be available in the list. Simple, eh?

Building WordPress plugin

As we want the user to be able to enter desired Twitter username, we will build a shortcode functionality inside our plugin. Open up your main plugin file and paste this code in (under the comment added above):

class CFTweetable {
    
    public function __construct()
    {   
        // Set Plugin Path
        $this->pluginPath = dirname(__FILE__);

        // Set Plugin URL
        $this->pluginUrl = WP_PLUGIN_URL . '/cf_tweetable';
        
        add_shortcode('Tweetable', array($this, 'shortcode'));
        
        // call jquery
        if (!is_admin()) {
            wp_deregister_script( 'jquery' );
            wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
            wp_enqueue_script( 'jquery' );
        }

    }
    
    public function getTweets($username) 
    {
        
        //call Tweetable plugin js file
        echo '<script type="text/javascript" src="' . $this->pluginUrl . '/tweetable/jquery.tweetable.min.js"></script>';
        
        // render results div
        echo '<div id="tweets"></div>';
        
        // render javascript code to do the magic
        echo '<script type="text/javascript">';
        echo 'jQuery(function(){';
        echo 'jQuery("#tweets").tweetable({';
        echo 'username: \'' . $username . '\',';
        echo 'limit: 5,';
        echo 'replies: true,';
        echo 'position: "append"});';
        echo '});';
        echo '</script>';
        
    }

    public function shortcode($atts)
    {
        // pass the attributes to getTweets function and render the tweets
        return $this->getTweets($atts['username']);
    }
    
}

$cfTweetable = new CFTweetable();

This is all the code we need to create our little plugin.

Now, activate the plugin in WordPress admin. If you want to show the last 5 Tweets, simply use a shortcode inside your Post or Page. You simply write [Tweetable username=codeforest] and you will get last 5 Tweets rendered on that spot.

If you want to use the plugin inside Text widget, you must add this line to __construct method above:

// Add shortcode support for widgets
add_filter('widget_text', 'do_shortcode');

That’s it. A simple way to build a cool WordPress plugin.

You can see this plugin in action in the left side of the footer of this blog.

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon



4 Responses to “Building a WordPress plugin: Tweetable”

Trackbacks/Pingbacks