Archive for the 'Web Development' Category

Embedding Twitter

Wednesday, January 11th, 2012

Our editors have been asking for a way to embed twitter searches into their blogs.  It turns out it’s really easy.  Twitter offers a number of embeddable widgets.

  1. Log in to Twitter and click on Resources in the right sidebar
  2. Choose Widgets and then click “My Website”
  3. Choose the Search widget or any other widget
  4. Customize then embed!
  5. You may want to add some css on the page to customize the look of the widget. I had to here because my styles were interfering with it a bit.
  6. Edit the settings to set interval: 5000.  This will make the widget update every 5s instead of the default 30s.  You can also adjust the width and height.

The Ultimate WordPress Search

Thursday, December 8th, 2011

If you’ve been following the story thus far, I’ve been working at refining our search on Streetsblog.  The standard WordPress search only returns results ordered by date, so my first step was to integrate Google Custom Search with Streetsblog.  This works beautifully and should meet the needs of most readers, but soon our editors realized that they’d also like the option of sorting by date.

I played around with biasing the Google search results by date.  This worked fine but, unfortunately, Google searches all site content, including sidebar content and category drop-down lists, when returning results.  So, if you searched for something like a category name, you would essentially end up with a list of all blog posts in reverse chronological order, which is quite useless.

What our editors really wanted was to be able to revert back to the original WordPress search which only searches blog post content.  So I spent some time integrating it with the Google Custom Search interface.  I ended up producing an almost exact replica of the styles and behavior used by Google.  I managed to pull in post thumbnails, to highlight the search term in results, etc.

So now we can search for “bike lanes” by date or by relevance and get useful results for both.  And for anyone else who wants to do this, here’s the code.


Google Custom Search Sort by Date

Thursday, December 1st, 2011

Google generally sorts search results by relevance.  At times, it gives the option to sort by date.  Sometimes people want the definitive piece of information on a certain topic and other times they just want the most recent piece of information.

A few days ago I rolled out Google Custom Search on Streetsblog as an improvement from the default WordPress search.  It is a streamlined form of the Google search engine that integrates with our sites and displays results by relevance.  After I rolled it out, our editors immediately realized that they wanted to be able to see search results sorted by date as well as relevance.  So I set out to discover how to get Google Custom Search to sort by date.

It turns out that it wasn’t so hard.  I came across this thread explaining how to do it and modified the js code accordingly.  I then put an absolutely-positioned link on the search page:

The link toggles to “sort by relevance” when you are viewing results sorted by date.  Google estimates the date of a particular web page to the best of its ability using content on the page, its url and the first time it was crawled.  The search results appear to be “roughly” sorted by date.

Occasionally certain search results are listed higher than newer ones, perhaps when they are significantly more relevant.  For example, for the search on “bike lanes”, this post was listed above this post even though it was older than it, perhaps because it had 28 comments, much more than the 4 on the more recent post.

Still, hopefully this will meet the needs of our users and help them mine the thousands of posts on Streetsblog.

Better WordPress Search

Monday, November 28th, 2011

One of WordPress’ weak points is its search.  Whenever you search for a phrase, it will just return all posts with that word in reverse chronological order.  People are used to the power of Google searches, these days seemingly having the ability to guess exactly where you want to go before you even finish entering the search query.  So, prompted by our Streetsblog editors, I set about to try and improve upon the WordPress default search.

Each time I look into this problem, the landscape is different.  Different plugins are available and Google offers different ways to hook into its API.  This time I was pleased to find a perfect way to offer Google search results on our blogs.  Using Google Custom Search, I created a search engine for each of our sites that restricts its results to just those from the site.  I then customized its look and feel via css in the Streetsblog style sheet.

I ended up with a solution that integrates closely into our blogs:


Related Stories comes to GothamSchools

Wednesday, November 9th, 2011

Over the last few days, I’ve been working with the GothamSchools editors to come up with a way of displaying related stories to readers.  Here is what we’ve come up with:

To accomplish this I started with the same related posts plugin we use on Streetsblog: Yet Another Related Posts Plugin.  This is really an excellent plugin that crunches masses of data to come up with a useful list of related posts for any given post.  By default, it can show this list at the bottom of a post before the comments, or in a sidebar widget.  We soon decided that we didn’t like these options and instead crafted a widget that floated within the story itself. (more…)

Precision Linking

Wednesday, November 2nd, 2011

People sometimes ask me, “How do I link to this part of a page, or this paragraph?”  This is useful when you want to direct people to a certain part of a web page or you want to cite from a particular passage of a long post.

The NYTimes has created a sophisticated tool called Emphasis to solve this problem.  If you go to a NYTimes news post and hit the Shift key twice, you’ll expose small paragraph links at the head of each paragraph.  You can fine-tune these links by selecting individual sentences within each paragraph.  The url will change to link directly to that sentence or paragraph:

Amazingly, the NYTimes has open-sourced the code for Emphasis.  I’d be happy to fit this code to our blogs if our editors feel it’ll be useful.  My only hesitation is that adding another js library to our sites would need a thorough round of testing to make sure that it is not conflicting with any of our other libraries.

In the meantime, the easiest way to link to a particular spot in one of our posts, is to edit that post and put an anchor tag at the place where you want to link to, such as this one:

<a name="plink"></a>

Then you can link to that spot on the page like this:

Here’s an example of linking directly to the image of this post.  The text “plink” is arbitrary and can be set to anything.

NYC Bike Share Launch

Wednesday, September 14th, 2011

It’s a big day for NYC Bike Share as the Department of Transportation has announced today the details of the program which will launch next summer. As part of that push, Frank, Andy and I worked on a promotional site for the DOT. Here it is:

Go and check it out.  Suggest a location of a bike share station or vote for already suggested stations.

At this point, we’re not sure how this data will be used by the DOT.  Perhaps it will just be a way of harnessing enthusiasm for the project, which does have its critics.  Right now we have already amassed 738 suggested locations in just three hours.  It’s good to see that, judging by the comments, people are putting some thought into where they suggest locations.  Some are also quite funny.

We built this site in WordPress using the Google Maps API and Janrain Engage for social login functionality.

Our Facebook and Twitter Usage

Wednesday, August 24th, 2011

A couple of weeks ago, I reviewed our social media integration on our blogs.  Since then I’ve started to implement improved share buttons across the Streetsblogs and GothamSchools and also new Follow widgets such as the one below:

These changes should help people share our content and connect with us on Facebook and Twitter.

In this post I’ve done a review of how our various sites use Facebook and Twitter to disseminate content and promote their brand.  By reviewing this we can learn from each other and work towards a set of best practices. (more…)

Social Media Review

Thursday, August 11th, 2011

Is sharing content across social media sites the “new search” as people are saying?  I’m not sure, but it definitely is becoming more and more important.  I’d like to review the way we leverage social media on our sites to come up with a set of best practices.  We want to make sure we are getting the most from our content.  We want to make sure we are enabling it to have the largest reach.

Roughly speaking, we can divide up our social media strategy into two parts:

  • mechanisms allowing a user to consume our content
  • mechanisms that enable a user to share our content with others.

Mechanisms for Content Consumption

Here is our sidebar widget on

If people click on the Twitter icon, they’ll go to the Streetsblog Network Twitter page and will be able to follow it.  This Twitter account currently has 8875 followers.  Each blog post on is tweeted on this account.


Problem Solved

Thursday, August 4th, 2011

For the past couple of weeks, Evan and I have been trying to figure out why StreetsblogSF sometimes takes a long time to load.  I wrote up a post about our work here.  I’m pleased to announce that we have found the solution to this.

First we activated the slow query log on our Mysql database.  It showed us the queries that were taking a long time to run.  Here was the worst of them:

SELECT SQL_CALC_FOUND_ROWS  wp_posts.* FROM wp_posts  LEFT JOIN wp_ec3_schedule ec3_sch ON ec3_sch.post_id=id  WHERE 1=1  AND wp_posts.post_type = ‘post’ AND (wp_posts.post_status
= ‘publish’) AND ec3_sch.post_id IS NULL  GROUP BY wp_posts.ID ORDER BY wp_posts.post_date DESC LIMIT 3030, 10;

This took 12 seconds to run on average.  When it was being run, any other database query would be stalled.