Google Reader replacement

Recently Google announced to shut down its great service Google Reader. That's really a pitty, as many people were using it to synchronize their subscribed RSS feeds among all of their devices. So, if you read an article in your webbrowser at home, it will not show up as unread on your smartphone for example.

To replace Google Reader, I found the cool software tool Tiny Tiny RSS, which almost covers all of the functionality that's needed. But as it can be extended using plugins and the layout can be modified using CSS, you can get pretty close to Google Reader with this.

So here are the steps I took to create my tt-rss Google Reader clone:

  1. Install tt-rss on your webserver. This is pretty straight forward, just follow these instructions.
  2. Install the additional af_feedmod plug-in from GitHub. If you are using tt-rss 1.7.8 make sure, you checkout af_feedmod revision 8ba6cb2.
  3. Configure af_feedmod like this: ``` javascript Configuration for af_feedmod {

"heise.de": { "type": "xpath", "xpath": "div[@class='meldung_wrapper']", "force_charset": "utf-8" }, "berlin.de/polizei": { "type": "xpath", "xpath": "div[@class='bacontent']" }, "n24.de": { "type": "xpath", "xpath": "div[@class='news']" }, "golem0Bde0C": { "type": "xpath", "xpath": "article" }, "oatmeal": { "type": "xpath", "xpath": "div[@id='comic']" }, "blog.beetlebum.de": { "type": "xpath", "xpath": "div[@class='entry-content']" }, "aachener-nachrichten.de": { "type": "xpath", "xpath": "article[@id='articlearea']" }

}

4. Add the following CSS code to the user-custom CSS section:
``` css Google Reader look for tt-rss http://tt-rss.org/forum/viewtopic.php?f=22&t=1287&start=15 Source
/* fix dijit */
:focus {
   outline: none;
}
input[type="search"] {
   -webkit-appearance: none;
}
.claro .dijitToolbar .dijitButton .dijitButtonNode,
.claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
.claro .dijitToolbar .dijitComboButton .dijitButtonNode,
.claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
.claro .dijitToolbar .dijitComboBox .dijitButtonNode {
   -moz-transition: background-color, border-color, color;
   -webkit-transition-property: background-color, border-color, color;
   transition: background-color, border-color, color;
}

/* some style */
body#ttrssMain,
a,
.titleWrap .title  {
   color: #444;
}
a:hover,
.Unread .titleWrap .title,
.Selected .titleWrap .title,
html div.cdmContent a {
   color: #15c;
}
#feeds-holder,
#content-wrap,
#headlines-frame {
   border: none;
}
#ttrssMain #headlines-toolbar,
#ttrssMain .dijitToolbar,
#ttrssMain .cdmHeader {
   background: #fff;
   border-color: transparent;
}
#ttrssMain #headlines-toolbar {
   border-color: #ebebeb;
}
#ttrssMain .cdm {
   margin: 5px 25px 10px 5px;
   border: 1px solid #ddd !important;
   box-shadow: 0 0 4px rgba(0,0,0,.1);
   background: #fff !important;
}
#ttrssMain .cdm.Selected {
   border-left-color: #4d90f0 !important;
   background: #fff !important;
}
#ttrssMain .cdmFeedTitle {
   border-color: #ebebeb;
   background: #fff;
   font-size: 1.2em;
   font-weight: bold;
}
#headlines-frame .cdmFooter {
   border-top: 1px solid #ebebeb;
   background: #fafafa;
}

.titleWrap .title {
   font-size: 1.5em;
}
.Unread .titleWrap .title {
   color: #15c;
   font-weight: bold;
}
div.cdmHeader span.hlFeed {
   padding-top: .5em;
}
  1. Now you're basically done and can subscribe to your favorite RSS feeds again. Of course you can also import the OPML file you exported from Google Reader using Google's export method. Just activate the "googlereaderimport" plugin for this and upload the according files.
  2. Enjoy!