Keep your traffic in the family! Host Twitter images on your own site.

Image posting on Twitter works by hosting the image somewhere (either on Twitter’s image service, or another service like Twitpic, img.ly, etc.). The service hosts the image for us (and we send them our traffic).

Better to take advantage of that traffic, and host images on your own site. This way, viewers come to your site, instead of someone else’s!

In Twitter Image Host 2, images are posted as normal posts, in a category you choose. You can then configure your WordPress installation to display posts in this category as you wish.

Twitter Image Host 2 can be used at the same time as the original Twitter Image Host plugin, so the prior system will still work after updating.

Provides a utility within WordPress admin for posting image content, as well as an API modelled on that of img.ly, compatible with TweetBot (for iOS) and any other Twitter clients that speak this protocol and offer configuration of custom image hosting services.

Installation

Install Twitter Image Host 2 from within WordPress, or:

1. Download from the WordPress plugins repository.
2. Unzip the package, and upload twitter-image-host-2 to the /wp-content/plugins/ directory

Then,

1. Activate the plugin through the ‘Plugins’ menu in WordPress
2. Visit the settings page and configure the plugin
3. Start submitting images – See the ‘Posting Images’ section for more

If you find Twitter Image Host useful, please consider buying some great iOS software. Then tell all your friends, family and pets.

Posting Images

To start posting from your WordPress blog, select the “Twitter Images” menu item from the “Posts” administration section. Select your image file enter a message, then hit Post, and the image will be uploaded and your message sent to Twitter.

To access this facility from an application, use the access point displayed on the Twitter Image Host options page.

The API is more-or-less the same as that of TweetPic, img.ly, etc.

On iOS at least, the Twitter app no longer supports custom images, but TweetBot does. You can configure a custom image host within Settings - enter the API URL as listed on the options page.

Changelog

2.0

• Initial release of Version 2, which now stores posted images as actual posts, rather than pseudo-posts.

By default, the “Tweet” button that AddThis provides will append “via @AddThis” to the end of tweets, which seems to me a little uncool, given that it’s your content.

So, here’s a little plugin that lets you specify your own Twitter account name instead of @AddThis.

The principle is simple: AddThis were kind enough to define their own filter for the plugin’s output. The plugin plugs itself into this filter, and makes an adjustment to the Tweet button.

To use it, put addthis-modifier.php into your wp-content/plugins folder, open it up and set your twitter name where indicated. Activate it, and you should be good to go.

Download the plugin: AddThis Modifier Plugin

For extra marks: Here’s some code you can use to replace line 14 (the $twittername = … line) to provide a different Twitter account for each post author. Is that not awesome?:

    $accounts = array('Michael'   => 'MichaelTyson',
                      'Katherine' => 'NellieWindmill');
    $twittername = $accounts[get_the_author()];

• cufón – fonts for the people A very impressive framework that embeds any font into a website, via javascript and the canvas element. Great cross-browser support.
• mikeash.com: Method Replacement for Fun and Profit Method replacement and method swizzling in Objective-C.
• Core Data Tutorial: How To Use NSFetchedResultsController | Ray Wenderlich
• TwitThis – Use Multiple Twitter Clients on your iPhone Application The class TwitterClientManager loads a list list of supported Twitter clients is loaded from a plist file, which can be extended to support more clients in the future;
  Each Twitter client is represented by an instance of the TwitterClient class;
  The user can choose his preferred Twitter client at any time, and launch the application by a simple touch; the TwitterClientManager class stores the selected value in the user settings.

Keep your traffic in the family! Host Twitter images on your own site, with support for comments and trackbacks, image resizing and thumbnailing with Lightbox.

Twitter doesn’t yet come with its own inline image support, so we tend to be limited to using image hosting services, and linking to them with short URLs. So, services like Twitpic host the image, and we direct traffic to them in return.

Better to take advantage of that traffic, and host images on your own site. This way, viewers come to your site, instead of someone else’s!

Posted images are displayed in your normal WordPress template, with support for comments and trackbacks, without any setup required. Most themes should work with this, but if not, or if a different layout is required, a custom theme template can also be provided (see ‘Creating a Template’).

Provides an HTML form for posting image content, as well as an API modelled on that of img.ly, compatible with Tweetie (for iPhone) and any other Twitter clients that speak this protocol and offer configuration of custom image hosting services.

Uses Twitter’s authentication and a list of authorised accounts, so you can let others use your image host too. You can even post status updates to Twitter while submitting images.

Provides a widget and shortcode to display uploaded images. This supports filtering by Twitter account, styling with CSS, and Lightbox/Thickbox.## Download

Download the plugin at WordPress’s plugin directory

If you like Twitter Image Host, please consider buying some awesome Mac/iPhone software. Then tell all your friends.

Installation

1. Unzip the package, and upload twitter-image-host to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Visit the settings page and add your Twitter account to the list of authorised accounts
4. Start submitting images – See the ‘Posting Images’ section for more

FAQ

I get “Couldn’t place uploaded file” messages

You probably need to create the folder in which Twitter Image Host stores uploaded images — it will try to create the folder automatically, but it will fail if it doesn’t have permission.

Create a folder called twitter-image-host-content within the wp-content folder of your WordPress installation, and make sure it has write permission for the web server user.

I keep getting 404 errors

Make sure your blog is using URL rewriting (i.e. your permalink structure is anything but the boring default ?p=###).

Widget

To use the widget, simply visit the Widgets page and drag the “Twitter Images” widget into a sidebar and configure it.

Shortcode

Shortcodes are snippets of text that can be inserted into pages and posts. These snippets are replaced by various generated content. Twitter Image Host provides a ‘twitter-images’ shortcode to display images you have uploaded within a page/post.

Available parameters:

Example (square brackets replaced by curly brackets):

  {twitter-images columns=4 lightbox="true"}

PHP function

As well as the shortcode, you can also use call twitter_image_host_images() from within a template to produce the same output. Pass the same arguments as the shortcode as associative array values:

<h3>Recently submitted images</h3>
<?php twitter_image_host_images(array('author' => 'ATastyPixel', 'columns' => 6, 'lightbox' => true)); ?>

Tip: Use this in the twitter-image-host.php template (see ‘Creating a Single Template’, below) to display other posted images when viewing an image. Use the_twitter_image_author() to filter the list, to show only other submissions by the same Twitter account as the one of the currently displayed image.

Template Tags

This plugin provides several template tags, for use both in displaying single posts (see ‘Creating a Single Template’), and for custom pages which display many posts in a loop (see ‘Using Template Tags in a Loop’).

The available template tags are:

Single Entry Tags

the_twitter_image_permalink

Returns the URL to the view page

the_twitter_image_url

Returns the full URL to the image, or the image thumbnail if the original image was large

the_twitter_full_image_url

Returns the URL to the full-sized image, if one exists, or false otherwise

the_twitter_image_title

The title of the image

the_twitter_image_date

The date (timestamp) of the image – use date() to configure the display

the_twitter_image_author

The associated Twitter account

the_twitter_image

Returns HTML to display the image and a link to the full-sized image if it exists, with Lightbox rel tags.

Loop Tags

query_twitter_images

Search for Twitter images

Available parameters (passed as associative array):

has_twitter_images

Use with loop: Determine if there are more images

next_twitter_image

Use with loop: Get the next image

Creating a Single Template

By default, this plugin will use the standard post template (‘single.php’). However, if you wish, you can create a custom template to display hosted images. The template should be called ‘twitter-image-host.php’, located within your current theme directory.

Creating a template to use this information is fairly straightforward if you have just a little knowledge of HTML or PHP:

• On your server (via an FTP program, etc.), navigate to your current theme. This will live within wp-content/themes.
• Copy an existing template – single.php is usually a good candidate – and call it twitter-image-host.php.
• Open up twitter-image-host.php, and delete everything that looks post-related: This usually includes everything between the have_posts call and the matching endif, and may include some other surrounding content like an ‘Edit this post’ link.
• Replace that which you have just deleted with something that uses the ‘single entry’ template tags above, like the following:

<?php echo the_twitter_image() ?>
<h1 class="center"><?php echo the_twitter_image_title() ?></h1>
<p class="center">
	From <a href="http://twitter.com/<?php echo the_twitter_image_author() ?>"><?php echo the_twitter_image_author() ?></a>
	 on <?php echo date('F jS, Y', the_twitter_image_date()) ?>
</p>

• Save the file, add some content (see the ‘Posting Images’ section), and see how it looks.

Using Template Tags in a Loop

Just like the WordPress Loop template tags, the template tags provided by this plugin can be used to display multiple posted entries. This can be used to create a custom page template that lists all submitted entries, with more flexibility than that offered by the shortcode.

Use begins with a call to query_twitter_images(), possibly with an argument to configure the search. If the result is true, then the loop begins, conditional upon has_twitter_images(), and starting with next_twitter_image() to load the next entry. The single template tags can then be used to customise the display of each entry.

Here is an example of use:

<?php if ( query_twitter_images() ) : ?>
    <?php while ( has_twitter_images() ) : next_twitter_image(); ?>
        <div class="item entry">
          <div class="itemhead">
            <h1><a href="<?php echo the_twitter_image_permalink() ?>" rel="bookmark"><?php echo the_twitter_image_title(); ?></a></h1>
            <div class="date"><?php echo date('F jS, Y', the_twitter_image_date()) ?></div>
          </div>
 
          <?php echo the_twitter_image() ?>
          <p class="center">From <a href="http://twitter.com/<?php echo the_twitter_image_author() ?>"><?php echo the_twitter_image_author() ?></a></p>
          </div>
    <?php endwhile; ?>
<?php else : ?>
    <p>There are no Twitter images.</p>
<?php endif; ?>

Posting Images

To start posting from your WordPress blog, select the “Twitter Image Host” menu item from the “Posts” administration section. Enter a title for your image, select your image file, hit Submit, and you will be given the URL for the image. If you wish to tweet straight from this facility, you will need to follow the instructions from that page to set up the plugin.

To access this facility from an application, use the access point displayed on the Twitter Image Host options page under “Settings”.

The API is more-or-less the same as that of TweetPic, img.ly, etc.

To post from Twitter (Tweetie 2) for iPhone, visit Twitter/Tweetie’s settings, and within Services, Image Service, select ‘Custom’, then enter the API URL as listed on the options page.

Making the URL even shorter

If you run WordPress from a sub-directory (for example, http://your-site.com/blog), then the short URLs generated by this plugin will look like http://your-site/blog/xxxxx. You can remove that ‘blog’ component via a little .htaccess trickery.

Here’s how:

1. Create and open a new file in your site’s webroot called “.htaccess”. If there’s one already there, just open that up and prepare to edit at the bottom.

2. Add the following, replacing ‘blog’ with the real subdirectory under which WordPress is installed:

   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_URI} ^/([^/]+)/?$
   RewriteCond %{DOCUMENT_ROOT}/blog/wp-content/twitter-image-host-content/%1.jpg -f [OR]
   RewriteCond %{DOCUMENT_ROOT}/blog/wp-content/twitter-image-host-content/%1.png -f [OR]
   RewriteCond %{DOCUMENT_ROOT}/blog/wp-content/twitter-image-host-content/%1.jpeg -f
   RewriteRule (.*) /blog/$1 [L]
   </IfModule>
   

   This will take any requests that:

   • Are located in the web-root (start with a slash, followed by anything but a slash until the end)
   • Have a corresponding file within Twitter Image Host’s content directory Then, it’ll rewrite the request silently to the real Twitter Image Host URL, without the viewer seeing.

3. In Twitter Image Host settings, set the ‘Override URL Prefix’ option to ‘http://your-site.com/’

Thinking it’s better to keep things in the family, and take better advantage of that traffic, I put together an image hosting setup of my own. Now viewers come to my own site, instead of someone else’s!

It looks like this

The setup consists of an Automator service, and some PHP smarts on the site.

Under Snow Leopard, I can right-click on an image in Finder, click ‘Send Image to Image Hosting’, type in a title, then paste the URL that’s automatically been put onto my clipboard into a tweet.

Here’s how it works – this assumes a moderate level of understanding of PHP and assorted web administration. Update: I couldn’t help myself; I made a WordPress plugin for this, with some extra nice features.

Presentation

First, we need to put together a script that will display the image. What’s more, it would be nice to give the image a title, and link it back to the Twitter account.

So, we’ll want a place to put images, and a way to store the corresponding title and account name.

I opted to store the latter in a file alongside the image called (imagename).meta. I store the title, then a newline, then the Twitter account name.

Lets create image.php — it should take an image name parameter, excluding the file extension, and display the corresponding image, with any corresponding meta data.

Here’s a sample:

<?php
$MEDIA_DIR = "twitter-images";
 
// Get the image name, but avoid any path shenanigans by just grabbing the 'basename' of the file
$image = basename($_REQUEST['name']);
 
// Make sure it exists, or report a 404 error
if ( !$image || !is_file("$MEDIA_DIR/$image.jpg") ) {
    include("404.php");
    return;
}
 
// Grab the meta data
if ( file_exists("$MEDIA_DIR/$image.meta") ) {
    list($title, $source) = file("$MEDIA_DIR/$image.meta");
}
 
// Set a default title if we don't have any meta data
if ( !$title ) {
    $title = ucwords(strtolower($image));
}
 
// Include the page header, if you like
include("header.inc.php");
?>
 
<div class="content">
 
    <img src="/<?php echo MEDIA_DIR ?>/<?php echo $image ?>.jpg" alt="<?php echo htmlspecialchars($title) ?>" class="image" />
 
    <h1><?php echo $title ?></h1>
 
    <?php if ( $source ) : ?>
        <p>
            From <a href="http://twitter.com/<?php echo $source ?>">
                <img src="/media/images/twitter.png" width="14" height="14" alt="Follow us on Twitter!">
                <?php echo $source ?>
            </a>
        </p>
    <?php endif; ?>
 
</div>
 
<?php include("footer.inc.php"); ?>

Make sure it works by making a sample image called, say, IMG.jpg, and an accompanying metadata file, called IMG.meta with a title on the first line and a twitter account name on the second, and opening up http://yoursite.com/image.php?name=IMG

Now, we want to keep URLs short, so they don’t take up too much valuable space in a tweet, so we need to use some tricks here.

We’ll set up a .htaccess file that uses mod_rewrite to keep the URL short.

Something like this should do the trick:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/([^/]+)$
RewriteCond %{DOCUMENT_ROOT}/twitter-images/%1.jpg -f
RewriteRule (.*) /image.php?name=$1 [L]
</IfModule>

Note on the fifth line we are checking inside our Twitter images folder — make sure that matches your storage path.

This will take any requests that:

• Are located in the web-root (start with a slash, followed by anything but a slash until the end)
• Have a corresponding file within the directory we’ll store images in

Then, it’ll rewrite the request silently to use image.php.

Save the .htaccess file, and open http://yoursite.com/IMG. It should bring up the image, just as before.

Set up some CSS to make it look good, and you’re set. Here’s mine:

 
/* @group Twitter images */
 
.twitter-image .content {
	margin-top: 50px;
	margin-bottom: 50px;
}
 
.twitter-image .content img.image {
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background: #f1f1f1;
	border: 1px solid #aaa;
	padding:  40px;
	margin-right: 60px;
	display: block;
	margin: 0 auto;
}
 
.twitter-image .content h1 {
	padding-top: 60px;
	text-align: center;
}
 
.twitter-image .content p {
	text-align: center;
}
 
.twitter-image .content a {
	text-decoration: none;
}
 
.twitter-image .content a img {
	vertical-align:text-bottom;
}
 
/* @end */

Automator

Now, with the web side set up, we need to set up an easy way to send content there.

I opted for an Automator service, which uses scp to upload the content. If your web host doesn’t provide for scp, you may want to use something else like ncftpput, or even an Applescript-able application. You’ll need to modify the Automator action’s shell script accordingly.

Here’s the Automator service I set up: Send Image to Image Hosting.zip.

For those interested, it contains the following shell script:

APPSUPPORT=~/"Library/Application Support/Image Hosting"
TMPDIR='/tmp/image-hosting.tmp'
DEST='me@mywebsite.com:www/mywebsite/twitter-images/'
URLPREFIX='http://mywebsite.com/'
UPLOADRETRIES=3
# GROWL="/usr/local/bin/growlnotify" # Uncomment this if you have Growl and growlnotify
 
[ ! -e "$APPSUPPORT" ] && mkdir "$APPSUPPORT"
 
for f in "$@"
do
  if [ ! -e "$f" ]; then
    osascript -e 'tell application "Finder"' -e 'activate' -e 'display dialog "Input file '"$f"' does not exist" with title "Image Hosting" buttons {"OK"} with icon Stop' -e 'end tell'
    exit
  fi
 
  # Generate random name
  while true; do
      name=`perl -e 'use MIME::Base64; $s=encode_base64(rand()); $s =~ s/=|\n//g; $s = substr($s, -5); print $s'`
      if ! grep "$name" "$APPSUPPORT/Taken Names" &>/dev/null; then break; fi;
  done;
 
  # Gather info
  default=`php -r '$s = basename("'"$f"'"); echo ucwords(strtolower(substr($s, 0, strpos($s, "."))));'`
  title=`osascript -e 'tell application "Finder"' -e 'activate' -e 'text returned of (display dialog "Enter image title" with title "Image Hosting" default answer "'"$default"'" buttons {"Cancel", "Continue"} default button 2)' -e 'end tell'`
  [ ! "$title" ] && exit
  defaulttwitter=`cat "$APPSUPPORT/Default Twitter Account" 2>/dev/null`
  twitter=`osascript -e 'tell application "Finder"' -e 'activate' -e 'text returned of (display dialog "Enter Twitter account" with title "Image Hosting" default answer "'"$defaulttwitter"'" buttons {"Cancel", "Continue"} default button 2)' -e 'end tell'`
  [ ! "$twitter" ] && exit
  echo $twitter > "$APPSUPPORT/Default Twitter Account"
 
  # Create temp files
  [ -e "$TMPDIR" ] && rm -rf "$TMPDIR"
  mkdir "$TMPDIR"
  cp "$f" "$TMPDIR/$name.jpg"
  echo "$title
$twitter" > "$TMPDIR/$name.meta"
 
  [ -f "$GROWL" ] && $GROWL -n 'Image Hosting' "Image Hosting: `basename "$f"`" -m "Image Hosting is uploading '$name'"
 
  # Upload
  retries=0
  while [ $retries -lt $UPLOADRETRIES ]; do
    result=`scp "$TMPDIR"/* "$DEST" 2>&1` && break;
    [ -f "$GROWL" ] && $GROWL -n "Image Hosting: `basename "$f"`" 'Image Hosting' -m 'Upload failed: Retrying'
    retries=$((retries+1))
  done
 
  if [ $retries -ge $UPLOADRETRIES ]; then
    osascript -e 'tell application "Finder"' -e 'activate' -e 'display dialog "Could not upload image.  Scp said: '"$result"'" with title "Image Hosting" with icon Stop' -e 'end tell'
    exit
  fi
 
  echo $name >> "$APPSUPPORT/Taken Names"
 
  osascript -e 'tell application "Finder" to set the clipboard to "'"$URLPREFIX$name"'"'
 
  [ -f "$GROWL" ] && $GROWL -n 'Image Hosting' "Image Hosting: `basename "$f"`" -m "Upload complete.  Available at $URLPREFIX/$name (copied to clipboard)"
done

To use it:

1. Unzip it,
2. Put it into Library/Services,
3. Double-click on it to open it in Automator,
4. Change the settings at the top of the ‘Shell Script’ segment —
   • Set DEST to the scp destination
   • Set up key-based SSH authentication, so you don’t have to enter the password to upload, or, if you’d prefer to use something other than scp to upload the file, you can change the upload command further down in the script, underneath the ‘Upload’ comment (look for scp)
   • Set URLPREFIX to http://yoursite.com
   • If you have Growl and growlnotify installed, then set GROWL to the location of growlnotify (highly recommended)
5. Save

Usage

If you’re using Leopard, you may need to log out, then log back in to see the service — I’m not entirely certain. If you’re on Snow Leopard, you should hopefully be set. Right-click on an image file in Finder, and click ‘Send Image to Image Hosting‘.

You should be asked for a title, then asked for a Twitter account name (this will be remembered for next time), then the upload will happen, and when it completes, the URL to the uploaded image will be put onto the clipboard so you can paste straight into Twitter.

Voila.

Recently I released some code to discover and embed Twinkle images linked from Twitter postings, and released a modification to Ricardo González’s Twitter for WordPress plugin which uses it.

I’ve now implemented support for Twitpic as well.

Grab the modified WordPress plugin here:

twitter-for-wordpress-plus-images-v0.2.6.zip

After installation, add the widget and make sure ‘Discover images’ is ticked.

For non-Wordpress users, the base code is also available here:

TwitterImageUtil.class.php-v0.2.6.zip

Include it in your twitter list source code, and use it as a filter for the message content. Something like:

$message = TwitterImageUtil::processContent($message, $mysql_database_handle);

Some configuration is possible – see the header comments for more details.

The code will create a thumbnail of the image, and store it locally. It’ll also cache the results in a MySQL database for speed. It supports Lightbox, too – just supply the relevant flag to turn it on.

Updates

• Version 0.2.6: Bugfix for posts with both images and @mentions
• Version 0.2.5: Bugfix from prior version, plus compatibility fix for Twitpic changes
• Version 0.2.4: Updated to match Twitter for WordPress v1.9.2: Compatibility fix for WP 2.7
• Version 0.2.3: Another update, chasing the moving target that is Twitpic
• Version 0.2.2: Updated to match Twitpic’s new image storage using Amazon S3.

However, if I want to update from, say, Twinkle on my iPhone (side-note: Wow, Tapulous need to do some serious SEO – their Twitter site isn’t even on the first page of Google hits. I’m on the first page of Google hits for it, ferchrissake) the sync won’t happen. This Ruby script will do the trick.

Download: Sync Status With Twitter

To use it:

1. Extract the .rb file to ~/Library/Scripts
2. Open it in, say, TextEdit and edit ‘Username’ at the top of the file to match your username
3. Open Terminal (in Applications, Utilities)
4. Make the script executable: chmod +x ~/Library/Scripts/sync-status-with-twitter.rb
5. Open your crontab: crontab -e
6. Add a line to crontab to run the script regularly:
   • Press ‘o’ to insert a new line
   • Paste the following line:

     */30 * * * * ~/Library/Scripts/sync-status-with-twitter.rb

     The ‘30’ here means run every 30 minutes. Change it if you want. Some alternatives are:

     */10 * * * *… – Every 10 minutes 0 * * * *… – Hourly, on the hour 0 */2 * * *… – Every second hour, on the hour

   • Press escape to stop editing
   • Hold down shift and press ZZ (Z key twice) to save and quit
7. You’re done. Wait a little bit and it’ll update, or if you like, run it immediately from Terminal (~/Library/Scripts/sync-status-with-twitter.rb).

If you want to update Facebook too, you have two options: Either use the excellent Facebook plugin for Adium (comes with the latest version), and it’ll happen all by default [Edit: Looks like I'm wrong; Adium won't update Facebook] , or add the Twitter application to Facebook itself.

This script was inspired by a similar script by John Nunemaker over at RailsTips.org. Thanks, John.

Update: Bed has made some changes which will ignore @reply messages.

Update: I’ve also added an implementation to ignore @reply messages

Update: I’ve added a provision to only update the status if you’re not set as away – if you’re away, the status message will remain unchanged.