You may have noticed a section containing the latest tweet in a custom styled manner on several websites. No, I am not talking about the Twitter Profile widget, nor about embedding tweets. Refer the below given screenshot for better idea.

Display your Latest Tweet on your Blog

How can I show my latest tweet on my website?

1. Show latest tweet using PHP

This method is for the websites and blogs using PHP scripting. As WordPress uses PHP in abundance, the method works for it also. If you are not familiar with PHP, skip to Method 2. To show latest tweet on your WordPress blog, you need to follow the below given steps:

Note: This process includes editing of files which are written in PHP. Before doing the changes, make it sure to back up your WordPress theme in case if using WordPress.

  • Go to Appearance » Editor » Functions in your WordPress.
  • Copy and paste the below code in the end before ?>
    function showLastTweet($twitterID) {
      include_once(ABSPATH.WPINC.'/rss.php');
      $latest_tweet = fetch_rss("http://search.twitter.com/search.atom?q=from:" . $twitterID . "&rpp=1");
      echo $latest_tweet->items[0]['atom_content'];
    }
  • Now, you have to edit WordPress theme files and paste the below given code in them to display it according to your desire.
    showLastTweet('techably');

    Replace techably with your twitter username in the above code.

    If you are using Exec PHP WordPress plugin, you can directly add the following code in your posts, pages and widgets.

    I am not going in depths of editing theme files as every WordPress theme comes with a different structure of code and you may face problems after saving changes, better do not proceed until you are not good at PHP.

2. Show latest Tweet using jQuery

If you are not good at code, or if your website do not supports PHP, here comes an alternate way to display latest tweet!

SeaOfClouds.com provides an easy way to achieve the same with jQuery. Alongside, they’ve also provided a nice styling to it. All the instructions are given there on the website, still I am providing a quick version of the same code for you, with hosted files:

  • Put the below code in <head> section of your website:
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    <script language="javascript" src="http://static.tumblr.com/qrccltj/ixqlqc0q5/jquery.tweet.js" type="text/javascript"></script>
    <link href="http://static.tumblr.com/qrccltj/Kc9lqc0po/jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
    <script type='text/javascript'>
      $(document).ready(function(){
        $(".tweet").tweet({
          username: "techably",
          join_text: "auto",
          avatar_size: 32,
          count: 3,
          auto_join_text_default: "we said,",
          auto_join_text_ed: "we",
          auto_join_text_ing: "we were",
          auto_join_text_reply: "we replied to",
          auto_join_text_url: "we were checking out",
          loading_text: "loading tweets..."
        });
      });
    </script>
    

    Replace techably with your twitter username in the above code.

  • Place this code in your posts, pages or widgets (in HTML mode) – where you want to show the latest tweet:
    <div class="tweet"></div>

I hope you have displayed your latest tweet on your blog using this post. If so, leave a link for a preview in the comments. If you find some problem while implementing any of the methods, let me know in your comments.