Tag Archives: twitpic

Self hosted Tumblr / Twitpic using WordPress

Do you have a self hosted WordPress? If so, why are you redirecting traffic away from your blog by using the likes of Twitpic or Tumblr? Aside from giving them traffic, you are also giving them permission to use YOUR content ‘royalty free’ anywhere in the word as per the terms and conditions on their sites (check it out!)

I sat down on Saturday afternoon with a determination to get a solution working in WordPress. About 2 hours later I had it worked out! This method set’s up categories so you can post pictures to your blog and not have them turn up on your front page, then have a link to the pictures in a sidebar like the “Twitter Photos” and “Updates on the Go” in the sidebar on this blog.

You will need the following WordPress plugins :

  • Simply Exclude – if you want to exclude the content posted for twitter from your usual posts.
  • Latest News Widget - a way to include a ‘feed’ in your widgets area.
  • Tweetable – so new updates are instantly tweeted (note this will mean all future posts will be published to twitter as well)

I’m sure there are alternate plugins that will work, but these are the ones which I’ve now set up on 2 blogs and what this post is based one.

Installing Tweetable

  1. Install the Tweetable plugin and ‘Activate’ it once installed.
  2. Click ‘Install’ which is under “Twitter” in the side panel. I have NOT had any luck setting up the link between this application and Twitter via the instructions presented on the page as it only gives ‘Read Only’ access. Go to http://dev.twitter.com/apps and click ‘Register New Application’ there (you may need to log in). Fill out the following fields there as per the instructions on Step 1 Tweetable’s Install. Note: The Description field needs at least 10 characters. See below for an example:

    Be sure to set the “Default Access type” to ‘Read & Write’ otherwise Tweetable WON’T be able to tweet from your WordPress!
    Complete the Captcha, and then click ‘Register Application’. Read through the Twitter API Terms of Service and if you agree, click “I Accept”. Leave the “Application details” screen up as you are going to need information from it in the next step of the Tweetable install.Go back to the Tweetable Installation Step 1 screen and click ‘Continue’.
  3. Tweetable’s Step 2 screen prompts for a “Consumer key” and “Consumer secret”. Copy and paste these from the Twitter “Application details” screen (that you didn’t close last step) and click ‘Save and Continue’.
  4. Tweetable’s Step 3 asks for your “Twitter Username”. Enter your Twitter Username then click ‘Save and Continue’.
  5. Tweetable’s Step 4 will “Authorise Your Twitter Account”. Click ‘Sign in with Twitter’ and follow the prompt to sign in, then click ‘Authorize app’.
  6. Tweetable’s Step 5 is the confirmation that Twitter has been linked to the account. Click ‘Finish’ and you will be taken to Tweetable’s setting screen.

Configuring Tweetable

  1. If you aren’t there, in WordPress, click on ‘Settings’ in the “Twitter” section on the sidebar.
  2. Update the following settings (we will change settings later):
    URL Shortner: In my situation I was using bit.ly. I was able to link it to my account so I could see click throughs etc.
    Tweetmeme button: You can have both Tweetmeme and Tweetable installed, they work together. Initial investigation, Tweetable puts the link at the bottom of the post where as Tweetmeme puts it up the top right!
    Auto-Tweet Posts: UNCHECK!!!! (we will enable this later)
    Remove Stylesheet: For the feature we are setting up, check this box so the additional stylesheets aren’t loaded.
  3. Click ‘Save Changes’

Create New Categories

  1. In WordPress, click on ‘Categories’ in the “Posts” section on the sidebar.
  2. Create 1 (or more if you want to use this like Tumblr for short posts) New Category. eg:
    It doesn’t have to be “Twitter Photos”, it can be anything you would like. That’s just what I’ve chosen for this site. If you want to do a short post update (ala Tumblr), you could create a category for that as well.
  3. Click ‘Add New Category’.

Simply Exclude

  1. Install the Simply Exclude plugin and ‘Activate’ it once installed.
  2. Click on ‘Exclude Categories’ under “Simply Exclude” in the sidebar.
  3. Set the “Inclusion/Exclusion” to ‘Exclude’ for “Front”.
    Set the “Inclusion/Exclusion” to ‘No’ next to “Widget” (if set to Yes, Category lists will display ‘No Categories’).
  4. In the bottom part of the “Manage Category Exclusions”, find the “Category” you just created (or two). I don’t want my “Twitter Photos” to appear as a post on my “Front” page or in peoples RSS “Feed” (“Archive” needs to be unchecked so people can view the individual posts).I do want my ‘Updates on the go’ to appear on the front screen, so I leave everything unchecked.
  5. Click ‘Save Changes’.

Latest News Widget

  1. Install the “Latest News Widget” and ‘Activate’ it once installed.
  2. Click on ‘Widgets’ under “Appearance” in the sidebar.
  3. Drag the “Latest News Widget” to where you want your twitter photos to appear on your blog.
  4. Set a Title (I’ve set it to “Twitter Photos”), then set the first of the “Categories to Pull Posts From” to the Category you specified earlier and the others to ‘None’.
    Check “Show Post Title” and specify a number of “Posts to Show”. Set “Hide the Content”.This will show just the “Title” of the post in the Widget Area you specified, it won’t show the image. This widget won’t shrink images to display properly, so they will appear as text only. 

  5. Click ‘Save’.

Note, if you want to set up a small Tumbler type post, add another “Latest News Widget”, specify the second Category you set up, in my case it was “Updates on the Go”, then in this Widget, select ‘Show Post Title’ and set the “Content Limit” to about ’30′. I think that’s a nice way to display those posts in the sidebar.

Test post

I’d recommend doing a test post so you know what this will look like on your blog first.

  1. Open the WordPress application on your smart phone and create a new post.
  2. The title of the post in future will be the contents of your tweet, so be caution of the 140 character limit. Be sure to specify the Category as the one you have created. In Media, click ‘Add’. Find the image you want to test with and publish the post.

What we’ve got so far

If you have set up everything as above, you should NOT see the post published on your mail blog. Where you widget is, you should see a text link which is the subject:

Clicking the text will open up the post with the image:

Setting up an automatic Tweet

  1. Click on ‘Settings’ under “Twitter” in the sidebar.
  2. Check “Auto-Tweet Posts” and add content to the “Auto-Tweet Posts Prefix”. I’ve just specified “New Stuff:” (10 characters)
    Note: Once this is set, all future posts will be tweeted to your Twitter account with whatever you typed in the “Auto-Tweet Posts Prefix” before your post title in your tweet.
  3. Click ‘Save Changes’

Mobile Theme

If might also be a good idea to install a mobile theme for your blog. That way when people who are using smart phones access your blog, they will see a mobile friendly version of the post which improves their user experience (IMHO).

Post away!

Start creating Posts in your Twitter Application on your smart phone or via the web client.

Just be sure to specify the Category when you post so it will appear in the correct location on your blog!

Small thing to note

As you are posting these photos IN WordPress, when someone opens the post of the image, the next/previous may link them to an actual blog post and viceversa.

Conclusion

So now, you can post images and short blog posts ala TwitPic / Tumblr and have it all hosted on your own site. It won’t clog up the main blog roll and will direct more traffic to your site!

If you found this post useful, and set up something on your site, please let me know in the comments below and maybe even say a little thank you by sending a donation my way.


Switch to our mobile site