Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Import and Archive Your Tweets With WordPress
  • like 1 28

    Import and Archive Your Tweets With WordPress

    1. January 2015
    2. Daily
    3. read 845

    Final product image
    What You'll Be Creating

    In this tutorial, I'll guide you through the installation, configuration and customization of a free, open source Twitter Archive plugin and its accompanying WordPress theme.

    Why Archive Your Tweets?

    Google once had a search partnership with Twitter, but after this expired it left the discoverability of your tweet archive a bit to chance. Furthermore, search engine traffic to Twitter.com doesn't build your website's search engine ranking or help you earn revenue.

    Developer Ozh Richard built a WordPress plugin which will automatically archive your tweets to your WordPress blog. Richard also created a WordPress theme just for your Twitter archive. He's also the creator of a few other interesting things including YOURLS (which I've written an upcoming tutorial about—check my instructor page). 

    Running a WordPress site of your Twitter archive allows Google to more easily index your tweets, capture more search traffic, and add to your search engine ranking and potential revenue stream. Theoretically, you might be able to earn revenue from advertising on these pages, or engage in discussions with readers posting comments. It may also drive discussions natively back to Twitter from Google web traffic.

    Installing WordPress

    You can use any LAMP server or cloud instance you wish to install WordPress. I am using Digital Ocean because it's inexpensive and offers fast SSD drives for hosting. You can find my visual guide to installing WordPress at Digital Ocean here.

    Once you have WordPress fully installed and configured with your Twitter Archive domain, you can continue below. You can also experiment with adding the Twitter Archive plugin to an existing WordPress site, although this will likely generate a lot of posts, many of the tweets pointing to your site itself.

    Installing the Tweet Archiver Theme

    Since the Tweet Archiver theme is hosted on a public Github repository, I logged into my server and captured and unzipped it there (/var/www/tweets is the directory of my WordPress installation for my Twitter archive):

    cd /var/www/tweets/wp-content/themes
wget https://github.com/ozh/ozh-tweet-archive-theme/archive/master.zip
unzip master.zip
rm master.zip
mv ozh-tweet-archive-theme-master/ tweetarchive

    Note: Another alternative to the approach I'm using would be to create your own local repository of the theme and make changes before pushing them up to your server.

    Then, visit the Dashboard's Appearance > Themes menu and click Activate beside the Tweet Archiver theme:

    Install Theme Tweet Archiver

    Unfortunately, the theme needs to be customized manually; there is no WordPress dashboard interface for customizing it. 

    Use the Appearance > Editor and choose the Header.php file to edit:

    Edit the Themes Header Tweet Archiver

    You'll want to make changes to any HTML links and text fields to your own Twitter account and related pages. You can't global replace on "ozh" because it's used as a prefix for many plugin functions.

    There are two blocks that need to be edited in header.php:

    <div id="stats-wrap">
    <ul id="stats-header">
        <li id="tiny-name">Ozh <a href="https://twitter.com/ozh">@ozh</a></li>
        <li><span class="what">tweets</span><span class="much"><?php do_action('ozh_ta_total_tweets'); ?></span></li>
        <li><span class="what">following</span><span class="much"><?php do_action('ozh_ta_total_following'); ?> <a href="https://twitter.com/ozh/following"><i class="fa fa-caret-right"></i></a></span></li>
        <li><span class="what">followers</span><span class="much"><?php do_action('ozh_ta_total_followers'); ?> <a href="https://twitter.com/ozh/followers"><i class="fa fa-caret-right"></i></a></span></li>
        <li><span class="what">listed</span><span class="much"><?php do_action('ozh_ta_total_listed'); ?> <a href="https://twitter.com/ozh/memberships"><i class="fa fa-caret-right"></i></a></span></li>
    </ul>
</div>

    Here's the second:

    <!-- !BEGIN #user -->
<div id="user">
    <div id="user-pic">
        <a href="https://twitter.com/ozh" class="avatar"></a>
    </div>
    <div id="user-info">
        <ul>
            <li class="user-realname">Jeff Reifman</li>
            <li class="username"><i class="fa fa-twitter"></i>@<a href="https://twitter.com/reifman">reifman</a></li>
            <li class="username"><i class="fa fa-github-alt"></i>@<a href="https://github.com/newscloud">newscloud</a></li>
            <li class="username"><i class="fa fa-facebook-square"></i><a href="https://www.facebook.com/jeffreifman">Jeff Reifman</a></li>
            <li class="user-loc"><i class="fa fa-map-marker"></i>Seattle, Wa.</li>
            <li class="user-url"><i class="fa fa-link"></i><a href="http://jeffreifman.com">jeffreifman.com</a></li>
            <li class="user-url"><i class="fa fa-link"></i><a href="http://lookahead.io">lookahead.io</a></li>
        </ul>
    </div>
</div>
<!-- END #user -->

    Save the changes when you've made your edits.

    Installing the Tweet Archiver Plugin

    Add the Plugin

    Now, we can install the Tweet Archiver plugin itself:

    Tweet Archiver WordPress Plugin

    Go to Plugins > Add new, and search for tweet archiver:

    Add Tweet Archiver WordPress Plugin

    Click Install and activate it. You'll be asked to configure its settings, but first we need to create a Twitter application to get API keys for our Twitter account.

    Tweet Archiver Plugin Configuration

    Create an Application at Twitter

    Visit Twitter's Application manager to register a new application:

    Twitter Application Manager

    Click Create New App and provide the URL for your WordPress Twitter archive:

    Create a Twitter Application

    Visit the keys and access tokens tab to copy the consumer key and consumer secret for your Twitter application:

    Twitter Application Consumer Keys for API Access

    Now, paste these into the plugin settings:

    Configure Tweet Archiver with Twitter keys

    For now, you can leave the extended plugin settings as the defaults:

    Tweet Archiver Settings

    Save the changes.

    The Tweet Archiver in Operation

    The plugin will immediately begin downloading your Tweet archive:

    Tweet Archiver in Action - Archiving Tweets

    Customize the Profile and Background Images

    There are a couple more adjustments we need to make. We need to upload a new profile image and background image and replace the links to these to our own in the stylesheet (style.css). 

    Create a square profile image of 256 x 256 pixels. Upload this using the media library. Make a note of the absolute URL and replace img/new-profile.jpg in the stylesheet below with the link to your new profile image. Use Appearance > Editor > Stylesheet to edit the file:

    #user .avatar {
  width:200px;
  height:200px;
  background-image: url(img/new-profile.jpg);
  background-size: 100% 100%;
  border-radius:10px;
  margin:8px;
  padding:8px;
  display:block;
}

    Also, create a larger background image of 1500 x 500 pixels and upload this to the media library. Make a note of the absolute URL to this image and replace it in the style.css file in the two places where the #header background setting appears:

    /* Structure, basic, unstyled
----------------------------------------------- */

#header {
    background:transparent url(http://twitter.jeffreifman.com/wp-content/uploads/2014/11/background.jpg) right -100px no-repeat;
    background-size: 100% auto;
    width:100%;
    height:250px;
}

...

/* Responsive Styles
----------------------------------------------- */

#tiny-name {display:none;}

@media all and (max-width: 1068px) {
  #header { background:url("http://twitter.jeffreifman.com/wp-content/uploads/2014/11/background.jpg") no-repeat -220px center; }
}

    Alternately, you can replace these files on the server directly via FTP or SCP.

    You can see my site live at http://twitter.jeffreifman.com. Once you've completed the modifications, your site will appear something like this:

    Twitter Archive Site for Jeff Reifman

    Each post created by the tweet archiver is just an individual WordPress post:

    Twitter Archive Generated WordPress Posts

    I really like the way WordPress tagging enhances my Twitter archive:

    WordPress Tags on my Twitter Archive

    Search Engine Optimization

    Now that our site is feeding content from Twitter, we need to optimize it for search engines. I recommend installing the Yoast SEO and Yoast Google Analytics plugins. 

    You'll need to add a new website to your Google Analytics dashboard and paste the custom string (e.g. UA-xxxxxxxx-xx) into the Yoast Google Analytics plugin. 

    Yoast Google Analytics Settings

    Once complete, you can verify your site from the Yoast SEO dashboard; this in turn will register and verify your site with Google Webmaster Tools.

    Yoast SEO Settings

    Yoast SEO will generate Sitemap files which Google will regularly index. Be sure to submit your sitemap to Google Webmaster Tools, e.g. http://yourarchivedomain.com/sitemap_index.xml. 

    Soon, you'll be seeing web traffic build up on your Twitter site—traffic that otherwise would have gone to Twitter.com.

    If you'd like to learn more about how the Tweet Archiver uses the Twitter API in general, check out our Tuts+ series on Building with the Twitter API. You can also inspect this plugin's code under Plugins > Editor > ozh-tweet-archiver/inc/import.php.

    You may also want to check out a series I'm currently writing for Tuts+ on open source social networking. The functionality of this plugin has some relevance to the general open source social networking effort, as it provides a way to migrate your Tweets to a WordPress site. You can find this series and my other Tuts+ tutorials on my instructor page or follow me on Twitter @reifman. Please post any comments, corrections, or additional ideas below. I welcome your input.

    Related Links

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    1
    Add a comment...
    4elements
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News