Nice little Twitter Widget
So I was wanting to find a nice, simple method of using Twitter to pull in multiple accounts into a single feed. “Why would you want to do that,” you ask? Well, in my case, I was working on a site for a client who runs an organization. The organization itself has a Twitter feed for announcements and such, but its employees each had their own Twitter account as well. So they wanted to pull in the feed from their employees onto the site, all into one feed.
Now, I wasn’t sure if it was possible, because the javascript Twitter usually gives you only allows for one name to be used, and I’m no JS expert at all. So I armed myself with Google and searched.
I came up with three things: 2 were results and one was knowledge. The “knowledge” part was that yep – I’m not the only one who wants to do this, and that yep, it’s pretty hard to accomplish – but I also found that (as usual) I didn’t have this desire first, and there were a couple of methods to pull it off. The most interesting one I found was this one by Sea of Clouds.
The script on it’s own is totally usable, but because I have clients who are hard-pressed to understand what the “power” button is for on their computer (not ALL of them, but some!) I always try to make things as easy as possible for them. So I made a widget for the system, because otherwise, they’d have to read through a lot of javascript code to edit names and such – which is never a good thing to do. For this site, all I needed was the ability to add one user, or sixty users (“sixty” just being a number I randomly said – I basically needed as many as was desired), and the ability to easily add or remove them from the list. The script linked above allows for a LOT more capabilities than that – so if you see something that you wish to be added to this widget, the following code should give you an awesome head-start on it. (In fact, I’m considering turning it into a full-on WordPress plugin, it’s so awesome.)
So without further ado, here’s the code. Just copy and paste into your functions.php file, and it should show up as a reusable widget. This does not allow you to change the title of the widget, nor how many tweets are shown – but if you know enough about what’s going on here and what I’m about to post, you shouldn’t have any issues editing the below code to fit your needs.
First, you need to download the source. (scroll past the demo to the “Download” area.) Make sure you’re running jQuery 1.4.x, minimum. Upload the script files into your theme directory.
Next, you need to open up your header.php file and add in your calls to the script files you just added to your themes folder:
1
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.tweet.js"></script>
Finally, you need to add the following code to your theme’s functions.php file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195
add_action( 'widgets_init', 'twitter_feed_widgets' );
function twitter_feed_widgets() {
register_widget( 'Twitter_Feed_Widget' );
class Twitter_Feed_Widget extends WP_Widget {
function Twitter_Feed_Widget() {
$widget_ops = array( 'classname' => 'twitter_feed_widget', 'description' => __('Widget to display multiple Twitter accounts (or a single one) into a single feed.', 'twitter_feed_widget') );
</code><code>
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'twitter-feed-widget' );
$this->WP_Widget( 'twitter-feed-widget', __('Twitter Feed Widget', 'twitter_feed'), $widget_ops, $control_ops );
}
function widget( $args, $instance ) {
global $post;
extract( $args );
$accountlist = $instance['accountlist'];
$defaultacc = $instance['defaultacc'];
// first we will want to see if we are on a single post page, so we can just grab that user's feed only - userextra and usermeta plugins are required, and a profile field named "twitter" needs to be added
if(is_single()) {
$author = $post->post_author;
$twittername = get_usermeta($author, 'twitter');
// strip "@" if exists
$find = strpos($twittername, '@');
if($find !== false) {
$twittername = str_replace('@', '', $twittername);
}
$followlink = 'http://twitter.com/' . $twittername;
// now add script to pull feeds
$script = '<script type="text/javascript">' . "\n";
$script .= 'jQuery(document).ready(function(jQuery) {' . "\n";
$script .= 'jQuery(".twitter_feed_widget").tweet({' . "\n";
$script .= 'join_text: "auto",' . "\n";
$script .= 'username: "'.$twittername.'",' . "\n";
$script .= 'count: 3,' . "\n";
$script .= 'auto_join_text_default: "we said,",' . "\n";
$script .= 'auto_join_text_ed: "we",' . "\n";
$script .= 'auto_join_text_ing: "we were",' . "\n";
$script .= 'auto_join_text_reply: "we replied to",' . "\n";
$script .= 'auto_join_text_url: "we were checking out",' . "\n";
$script .= 'loading_text: "loading tweets..."' . "\n";
$script .= '});' . "\n";
$script .= '}).bind("empty", function() { jQuery(this).append("No matching tweets found"); });' . "\n";
$script .= '</script>'."\n\n";
} // if we are on any other page, we want to pull the feed that includes everyone
else {
$accountlist = str_replace(", ", ",", $accountlist); // remove whitespace and leave commas
$accountlist = str_replace(',', '", "', $accountlist); // seems redundant, but do it again to add in spaces and apostrophes in the proper order
$followlink = 'http://twitter.com/' . $defaultacc;
// now add script to pull feeds
$script = '<script type="text/javascript">' . "\n";
$script .= 'jQuery(document).ready(function(jQuery) {' . "\n";
$script .= 'jQuery(".twitter_feed_widget").tweet({' . "\n";
$script .= 'count: 3,' . "\n";
$script .= 'username: ["' . $accountlist . '"],' . "\n";
$script .= 'loading_text: "searching twitter..."' . "\n";
$script .= '});' . "\n";
$script .= '}).bind("empty", function() { jQuery(this).append("No matching tweets found"); });' . "\n";
$script .= '</script>'."\n\n";
}
echo '<div class="widget twitter_feed_widget">' . "\n\t\t\t";
echo $before_title . 'Twitter Feed <a class="followlink" href="' . $followlink . '">> follow</a>' . $after_title;
echo $script;
echo '<!--/close twitter feed widget-->' . "\n\t\t\t";
echo '</div>' . "\n\n";
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['accountlist'] = strip_tags($new_instance['accountlist']);
$instance['defaultacc'] = strip_tags($new_instance['defaultacc']);
return $instance;
}
function form( $instance ) {
$defaults = array( 'accountlist' => __('', 'twitter_feed'),
'defaultacc' => __('', 'twitter_feed')
);
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
<p><small style="display:inline-block; color:#777; font-style:italic; padding-bottom:7px;">Enter in a comma-separated list of twitter account usernames that you wish to have added to the feed. Do not include the "@" symbols.</small>
<label style="vertical-align:center;" for="<?php echo $this->get_field_id( 'accountlist' ); ?>"><?php _e('Account List:', 'hybrid'); ?><br />
<textarea class="widefat" rows="5" cols="20" id="<?php echo $this->get_field_id( 'accountlist' ); ?>" name="<?php echo $this->get_field_name( 'accountlist' ); ?>"><?php echo $instance['accountlist']; ?></textarea></label>
</p>
<p><small style="display:inline-block; color:#777; font-style:italic; padding-bottom:7px;">Enter in the default account name (sans "@" symbol) to be used sitewide. If you are also using the "Feed and Follow Widget", you will probably want to use the same user account set for the "Twitter Username" in that widget. </small>
<label style="vertical-align:center;" for="<?php echo $this->get_field_id( 'defaultacc' ); ?>"><?php _e('Default Username:', 'hybrid'); ?>
<input id="<?php echo $this->get_field_id( 'defaultacc' ); ?>" name="<?php echo $this->get_field_name( 'defaultacc' ); ?>" value="<?php echo $instance['defaultacc']; ?>" style="display:inline; border:1px solid #ccc; width:183px;" /></label>
</p>
<?php
}
}
}
Now, you should see up there that I included a reference to “Userextra” and”Usermeta” plugins. I love these two plugins – I’ve used them for a long time to add custom fields to my profile pages and I just haven’t found anything that’s works better for me. The above code has a “main feed” icon in the header tag. It didn’t make sense to me that you would have a “follow” link in the header, but listing 2, 5 or 50 different people in the feed. Who are you following? So what I did was provide a “twitter” field in the user’s profile page, to which they would put in their Twitter username. If you’re on a single post, the widget will look up the name of the page’s author, pull the twitter account name, and link it to the “follow” link in the header. It will also only list the feeds for that particular other. But when you’re on any other page on the site, it will list the multiple accounts you’ve entered into the widget, and make the “follow” link go to the main/default Twitter account.
So there you have it – enjoy! (and if you all talk me into actually turning this into a full-blown widget, you won’t have to push very hard. I love this one!)
Comments
Awesome, Shelly – thanks for the tutorial, and here’s my vote for turning it into a full-blown widget.
May 8, 2010 at 1:03 pm