The Tech Behind bestofmrsshrop.com

The best projects scratch an itch or fulfill a want or need. I have been wanting to work with the Drupal Feeds module and Drupal 7, but that wasn't enough to get me started.

It turns out that a number of my friends on Twitter and Facebook have commented in the past on how funny my wife, Lisa (@mrsshrop), is when posting on these social networks. I agreed and have often complemented Lisa on her great writing skills and natural wit. With that, I thought it would be great to archive the best tweets from Lisa on a website for all to enjoy, while providing a permanent archive of her best work.

I quickly found that bestofmrsshrop.com was available and picked it up. The next step was to get a local development copy of Drupal 7 running. I downloaded Drupal core and contributed themes and modules using Drush (Drupal-Shell). If you don't use Drush, you should. It is awesome!

My goal was to get the website going in a day. I knew I wouldn't have time to theme something from scratch. I did want to have a theme that would look good on mobile devices (phones and tablets in portrait and landscape views). I found the HTML5 Adaptive theme, which is setup to look great on mobile phones and tablets. The Adaptive theme is really a base theme. To get some additional theming tools, I added the Sky theme. Sky is a subtheme for Adaptive. At that point, I was able to configure the theme settings to get the design I wanted. I changed the background, various colors and added a Google Font to the site name. The only coding change I had to make was some CSS tweaks to add spacing around the site name.

While the theme is exciting, the most important thing for this project is the core functionality. I need an easy way to mark just the @mrsshrop tweets I wanted to show up on the website. I recalled that Twitter publishes some user data over RSS. A bit of Googling and I found the URL for a Twitter user's favorite tweets. To get the Twitter side of things working for me, I setup a new Twitter account, @bestofmrsshrop and followed @mrsshrop. Now I can selectively favorite only the tweets I want to show on www.bestofmrsshrop.com from any Twitter client. The RSS feed used for imports is: http://twitter.com/favorites/bestofmrsshrop.rss

Now that I had Twitter delivering the feed of just the @mrsshrop tweets I wanted on the website, I needed to get the website to pull in the tweets. To accomplish this, I setup a new Drupal content type named "Tweet archives". The default "Title" and "Body" fields will hold the text of the tweets because that is they way Twitter delivers the RSS "Title" and "Description" fields. After installing the required "link" module, I added a field named "Tweet Link URL" to hold the link to the original tweet. Using the "Pathauto" and "Token" modules, I setup a automated URL alias with the path formatted as tweets/[node:nid]. This can help SEO, but I usually do this for consistent and manageable site architecture.

Using the Feeds and Job Scheduler modules, we will import the Twitter RSS feed. To accomplish this, I created a new RSS Feeds Importer and mapped the following fields between the RSS feed and the "Tweet archives" content type.

I declared the "Title" field as a unique target in the Feeds Importer. This ensures that duplicated tweets will not be imported. Due to a bug no exposing the "Unique Target" checkbox in the Feeds Importer UI, I had to install the 7.x-2.x version of Feeds.

To pull in the correct RSS feed into the newly created Feeds Importer, I had to browse to http://bestofmrsshrop.com/import and add the @bestofmrsshrop favorites RSS feed.

Next, I setup a cron job on the server to run every hour. This means that whenever I favorite a @mrsshrop tweet, it will be posted on the website within 60 minutes, depending on the the time of the next cron job execution. Drupal cron setup instructions can be found in Drupal's INSTALL.txt file.

At this point, I had the feed importing and creating new nodes in the "Tweet archive" content type. It was time to display the tweets. Using the famous Views module, I created a view to display the fields necessary. This "tweets_home_page" view outputs a page display to the /frontpage path and a feed display to the /rss.xml path. I made sure to configure the website to use /frontpage and the default front page in site configuration. Additional view configuration settings to note:

• Title
  • "Tweets"
• Format
  • Unformatted list
  • Row Style: Fields
  • Row Style Options: Inline fields: Post date and Tweet Link
• Content
  • Fields: Body
  • Fields: Post date
  • Fields: Tweet link
• Filter Criteria
  • Only display "Tweet archives" content types
  • Only display published nodes
• Sort Type
  • Content: Sticky (desc)
  • Content: Post date (desc)
• Page Settings:
  • Path: /frontpage
• Page
  • Full
  • 25 items per page

I also rewrote the output of the "Tweet Link" field in the Content settings section to show the little star between the tweet link and tweet time for each entry.

At this point the site was providing a nice look and the intended functionality. I decided it would be good to add a few blocks to enhance the site. I added an "About this site" block to discuss the purpose of the site. I also added a block that is generated by a view to display ransom tweets on each page load. The late block added contains a standard Twitter follow button so site visitors can optionally follow @mrsshrop.

I think that is about it. If I think about anything I have missed, I will update this post later. If you want to checkout the site code, feel free. It can be found at https://github.com/shrop/bestofmrsshrop.com.