A new App Store rejection sheds some light on the real implications behind Apple’s new in-app subscription policies, and the results aren’t pretty.

The iOS app for Arc90′s recently re-launched Readability service was rejected on Friday for “utilizing a system other than the In App Purchase (IAP) API to purchase content, functionality, or services.” This is significant because unlike companies like Rhapsody (who are already on the record as being firmly against the new policies), Readability is not a a traditional content provider.

As Readability creator and Arc90 founding partner Richard Ziade says in his “Open Letter to Apple” blog post, “Readability’s model is unique in that 70% of our service fees go directly to writers and publishers.” He continues, “if we implemented In App purchasing, your 30% cut drastically undermines a key premise of how Readability works.”

We spoke with Ziade after he posted his letter and he offered us this additional insight:

A big problem with this isn’t just the model (which is a big problem on its own). It’s the additional hoops we’d have to jump through just to make all this work. Imagine two payment distribution systems — one for iOS subscribers and another for web — that would have to exist. It’s just a big obstacle on our roadmap if we decided to do it. We’d rather put our energy towards making Readability better.

About Readability

Readability started as a bookmarklet that provided users with a better-formatted reading experience. Ideally suited for long-form content, Readability cuts out the clutter of modern web writing and presents text in a clean, focused way. The original proof of concept was so popular that Apple even based its Safari Reader feature on Readability.

Last month, Readability evolved into a total reading platform. While the basic bookmarklet remains free, users can subscribe to the Readability service (starting at $5 a month) and add articles, Instapaper-style, to a reading queue accessible from any web browser. What sets Readability apart is that publishers of the content that users choose to read get a percentage of the profits. In fact, 70% of a user’s subscription goes directly to the content writers.

The iOS app, which was developed by Instapaper’s Marco Arment, was supposed to be a special bonus for paid subscribers. It’s based on Instapaper and offers and optimized, offline reading and queuing experience.

Apple’s decision to reject the app doesn’t change the fact that the Readability is still usable within iOS. As a Readability subscriber, I’ve added “Read Now” and “Read Later” bookmarks to Mobile Safari on both my iPhone and iPad and am fully satisfied with the experience.

Instead, the decision very clearly sets the tone for what the rules for subscription-based service apps are going forward.

iOS Adverse Implications

The iOS platform is no stranger to criticism. Even before the official iPhone SDK made its debut in March 2008, developers were complaining about Apple’s policies in keeping the platform locked down, closed off and under a stringent set of guidelines. Through the years, some restrictions have lifted, rules have been better explained and more service offerings have opened up. Still, this is Apple’s show, and anyone who develops for the platform knows it.

For most developers, it’s worth the trouble. Despite Android’s tremendous gains in adoption, developers make more money on iOS and are more likely to cultivate repeat customers. New features tend to appear in the iPhone version of an app first; the iPhone and iPad get more exclusive titles; and the overall app experience tends to be more cohesive and complete.

Major brands and larger development houses target iOS and Android, but there are far more independent developers and smaller software shops that make their living entirely off of the iOS ecosystem than from Android. If Apple isn’t careful, it could start to push some of those indie developers away.

First launched with The Daily, Apple’s new subscription purchasing policy seems largely targeted at print publishers of magazines and newspapers. In that context, we have a hard time finding fault with Apple’s decision to take a 30% cut of all subscriptions obtained through the application download. Newspaper and magazine publishers might not be happy with the arrangement (though they can still offer subscribers the ability to subscribe outside the app), but in the grand scheme of things, 30% is likely on the low side of subscriber acquisition costs.

Even for streaming content services like Rdio, MOG or Rhapsody, we can understand Apple asking for a cut of a subscription rate — if only because those companies typically charge much higher rates for subscriptions that include mobile device support.

Plus, for consumers, the benefits of an in-app subscription system for magazines or music services is to their advangate. Not only is canceling a subscription faster (no having to wai
t on hold with an operator), but user privacy is better protected, too. Furthermore, at least in the case of published content, most content is going to be consumed on the device. If I subscribe to an iPad magazine, I am going to be consuming that content on the iPad.

This isn’t the case with web apps and cloud-based web services like Readability. Readability is an app built for the web browser. Having an iOS app is great — but fundamentally, the app and the service are designed to be platform agnostic and the desktop browser is definitely a major target.

How Far Does This Go?

The frustrating aspect of the Readability rejection is that this makes the road for apps that tie into cloud-based services in the future much less clear.

As Dan Benjamin and I discuss on a near-weekly basis, the line between web apps and native mobile apps is starting to become less and less distinguishable. A recent Appcelerator study showed that cloud connectivity is one of the top requirements for developers when building a mobile application.

Cloud connectivity can often mean plugging into subscription ecosystems. What worries us is what this means for native clients for web services.

Does 37signals now have to offer an in-app Campfire subscription in its Campfire for iPhone app? What about Evernote? Moreover, what about third-party apps that plug into the API for systems like Evernote or Campfire or Basecamp — are they also subject to this new subscription pricing policy? If so, how can that be enforced if the API doesn’t designate a payment or subscription option?

At the end of the day, we think Ziade summs it up best in his letter:

To be clear, we believe [Apple has] every right to push forward such a policy… But to impose this course on any web service or web application that delivers any value outside of iOS will only discourage smaller ventures like ours to invest in iOS apps for our services.

More About: app store, apple, In-app subscriptions, Instapaper, iOS, readability

For more Dev & Design coverage:

The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

If you use or manage a website that runs off of a self-hosted WordPress.org instance, you’re probably using (or have used in the past) a plugin developed by Joost de Valk. He developed and maintains the most popular Google Analytics plugin for WordPress, which has been downloaded over 1.4 million times.

Joost (pronounced “yoast”, like “toast”) is a 28-year-old web developer, SEO and online marketer. The excellent bookmarklet Quix is Joost’s creation.

In the WordPress community, in addition to being a developer superstar, Joost is also known as the co-host of the WordPress Podcast (which he hosts with Mashable’s Frederick Townes).

Mashable had a chance to talk with Joost about his newest plugin, WordPress SEO by Yoast.

WordPress SEO is still in beta, but it is extremely impressive. In many ways, WordPress SEO is the culmination of work started by Joost with his other plugins, like the indispensable Robots Meta, Canonical URLs and Permalink Redirect for WordPress.

Beyond just combining these features into one admin interface, the plugin is also designed to help writers learn what makes good SEO. The real “wow” feature — to me as a writer — is the snippet preview addition. This feature lets users get a preview of how a post will appear in Google directly from the WordPress post screen.

You can check out this great guide to the plugin via WPBeginner.

How do you handle SEO for your blog or website? What are some of your favorite plugins and tools? Let us know in the comments.

Series supported by Rackspace


The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

More Dev & Design Resources from Mashable:

HOW TO: Transfer Your Blog From WordPress.com to WordPress.org [VIDEO]
A Beginner’s Guide to Integrated Development Environments
10 Chrome Web Apps to Check Out
HOW TO: Make Your WordPress Blog More Like Tumblr
10 Tools for Getting Web Design Feedback

Image courtesy of iStockphoto, alexsl

More About: joost de valk, video, Web Development, web development series, WordPress, wordpress seo, WordPress seo plugins

For more Dev & Design coverage:

Major city governments across North America are looking for ways to share civic data — which normally resides behind secure firewalls — with private developers who can leverage it to serve city residents via web and mobile apps. Cities can spend on average between $20,000 and $50,000 — even as much as $100,000 — to cover the costs of opening data, but that’s a small price to pay when you consider how much is needed to develop a custom application that might not be nearly as useful.

Here are a few examples of initiatives that are striving to make city governments more efficient and transparent through open data.

1. Apps4Ottawa – Ottawa, Quebec

Careful to adhere to security and privacy regulations for their open data program, the City of Ottawa started sharing data in several areas: geo-spatial (roadways, parks, runways, rivers, and ward boundaries); recreation facilities; event planning; civic elections data; and transit, including schedules. Other data the city is pursuing includes tree inventory, collections schedules for garbage, recycling and compost, and bike and foot paths.

Ottawa aligned their first open data contest, Apps4Ottawa, with the school year (September 2010 to January 2011 ) to involve colleges and universities as well as residents and local industry. Categories for the contest included “Having Fun in Ottawa,” “Getting Around,” “Green Environment/Sustainability,” “Community Building,” and “Economic Development.” The winner is scheduled to be announced later this evening.

Guy Michaud, chief information officer for the City of Ottawa, said their open data efforts have already spurred economic development and is meant to be good for local entrepreneurs. The city receives no revenue through the apps, and the developers can sell what they create. In turn, Ottawa residents get improved services from applications that are created, with better access to city data and more user-friendly formats and platforms.

2. CivicApps.org – Portland, Oregon

After tracking Vivek Kundra’s efforts at the federal level with data.gov, Portland, Oregon launched CivicApps.org, a project initiated out of the mayor’s office to bring a more localized approach to the open data movement. Skip Newberry, economic policy advisor to the mayor, say that the project’s main objective is to improve connections and the flow of information between local government and its constituents, as well as between city bureaus. To call attention to the release of public data, they also launched an app design contest, highlighting the tech talent in Portland’s software community.

According to Rick Nixon, program manager for the Bureau of Technology’s Open Data Initiative for the city of Portland, CivicApps.org took a more regional approach to cover the multiple layers of local government: County, Metro, TriMet, and the City of Portland, all of which collect and maintain various kinds of public data. Data sets released include regional crime, transit, infrastructure (i.e. public works), and economic development programs. Additional projects, such as the PDX API, have been launched in order to make the raw data from CivicApps more useful to developers.

In addition to developer-specific apps, a number of transit related apps — bike, train, bus, mixed modes — were also developed. A very popular and established transit app, PDXBus, was re-released as open source under the rules of the CivicApps contest. Other popular apps helped provide residents greater awareness of their surroundings such as where to find heritage trees, where to find urban edibles, and where to locate each other during disaster relief efforts.

3. CityWide Data Warehouse – Washington, DC

For years, the District of Columbia provided public access to city operational data via the Internet. In keeping with the mayor’s promise to be transparent, the program CityWide Data Warehouse was launched, and provides citizens with access to over 450 datasets from multiple agencies. The first two datasets released were service requests from the mayor’s call center, including trash pickup, pot hole repair, street light repair, snow removal, parking meter issues and crime data.

According to David Stirgel, program manager for Citywide Data Warehouse, the project looks for data that be of interest to the widest possible audience and which will remain reusable over time. Some of the applications that have come out of the program include Track DC, which tracks the performance of individual District agencies, and summary reports that provide public access to city operational data. Some of the applications built by companies and individuals using the data include Crime Reports and Every Block.

In 2008, the District Mayor’s office, the District of Columbia’s Office of the Chief Technology Officer, and digital agency iStrategyLabs launched Apps for Democracy, an open code app development contest tapping into District data that cost $50,000 and generated 47 apps. The contest was repeated in 2009. Over 200 ideas and applications were submitted, and the winner was an iPhone and Facebook app called Social DC 311. It could be used to submit service requests, such as reporting potholes and trash problems. An honorable mention was given to FixMyCityDC. Unfortunately, neither app is maintained today.

4. NYC Data Mine – New York, NY

NYC BigApps 2.0 is part of an initiative to improve the accessibility, transparency, and accountability of city government. According to Brandon Kessler, CEO of ChallengePost, the company and technology powering the NYC BigApps 2.0 Software Challenge, Mayor Bloomberg challenged software developers to use city data from the NYC.gov Data Mine to create apps to improve NYC, offering a $20,000 in cash awards to the winners.

The second annual challenge closed its call for submissions at the end of January 2011 and opened the vote to the public. Voting ends on March 9. Requirements included that the software applications be original and solely owned by the entrants, that they use at least one of the datasets from the NYC.gov Data Mine, and be free to the public throughout the competition and for at least one year after the challenge. The panel of judges reads like a “who’s who” of New York tech luminaries, and includes Esther Dyson of EDVenture, Fred Wilson of Union Square Ventures, Jack Dorsey of Square and Twitter, and Kara Swisher of All Things Digital. One of the first year’s winning apps was WayFinder, an augmented reality Android app which allows users to point their phone in a direction and see which subways and Path trains are in front of them.

5. DataSF – San Francisco, California

Like other city governments, San Francisco’s goal for their DataSF program was to improve transparency and community engagement as well as accountability. Ron Vinson, director of media for the city’s Department of Technology also stated potential for innovation in how residents interact with government and their community. With an emphasis on adhering to privacy and security policies, the city can stimulate the creation of useful civic tools at no cost to the government.

Before launching, they reached out to Washington, DC to identify the most popular datasets, and learned that 20% of the datasets represented over 80% of the downloads. With this information, they went out first with crime, 311, and GIS data. They also allowed the public to request data through a submissions mechanism on the website where others could vote on their suggestions. This input is now required reading for the city administrator thanks to an executive directive and open data legislation.

Since launching in August 2009, DataSF has accumulated over 60 applications in its showcase. According to Vinson, the city stays engaged with their tech community by participating in local unconferences and meetups.

More Dev Resources from Mashable:

5 Website Features You Can Easily Offload to Reduce Costs
HOW TO: Design & Program a Facebook Landing Page for Your Business
Learning Ruby: Expert Advice for Advanced Developers
10 Predictions for Web Development in 2011
HOW TO: Make the Most of TextMate

Image courtesy of iStockphoto, Veni

More About: app development, apps, data, government, List, Lists, open data, Web Development

For more Dev & Design coverage:

This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.

The term “offload” or “offloading” in information technology and computer science refers to the transfer of something from your system to an external system. In the context of websites, your system is your website (and your web servers/web host), and the external system consists of third-party web services such as Google Analytics or Shopify.

This article suggests five common site features that you can host elsewhere.

Why You Should Or Shouldn’t Offload

There are advantages and disadvantages to having parts of your website catered to by third-party web services. In order for you to decide what should and shouldn’t be on your system, let’s first talk about the pros and cons of website feature offloading.

Pros of Offloading

  • Reduced Cost: Whether it’s lower web server costs, fewer employee hours to commit to maintenance and management, the web solutions listed below will generally lead to cost reductions. Many of the services mentioned are either free or significantly lower in cost than if you were to develop, manage and maintain them yourselves.
  • Generally Better: Third-party solutions are often built by innovative companies such as Google and Yahoo, who are highly regarded as experts in the products they offer. The research, talent and manpower they’re able to commit to solving problems are more than most companies can handle.
  • Faster/More Reliable Service: Companies such as Google and Yahoo have massive IT infrastructures and server farms to ensure that their services perform well and with little to no service interruption.
  • Data Security: If a site feature requires user data management (such as credit card information and phone numbers), the web solutions mentioned below are known to have great security features. If you lack data security expertise in your company, it might be a good idea to let companies that are better equipped to handle sensitive data handle information submitted to you. This also reduces the chance of data compromises due to insecure servers, or may lead to reducing costs related to data security — security audits, SSL certificates, security consultants and developers, and so forth.

Cons of Offloading

  • Potentially Slower Web Pages: Having an external website serve parts of your website could potentially slow down some of your pages, especially for features that are embedded in your web pages (such as contact forms). This is because whenever a widget from a third-party company is included in a webpage, it has to make a connection to the other company’s server — which could be located far away from your own.
  • Lack of Control: Site features that can be offloaded are typically customizable, but there will always be limits to your ability to customize them when compared to things that you manage yourself.
  • More Things to Worry About: Most of the web services discussed here require you to sign up for an account on their website. This means more information to deal with, more systems to learn and more time needed to keep track of stuff.
  • Privacy Concern: If a site feature requires user data to be submitted, you will not be able to completely oversee what happens to that data.

Now that you know the benefits and disadvantages of offloading your website features, let’s look at those web services that are most commonly offloaded.

1. E-Commerce Management System

Custom-built e-commerce systems can be costly — not only the upfront costs of having one developed, but also those incurred once it’s up and running. There are open source software apps like Magento that are far less costly than building your own system, but still, dealing with security and data privacy can be a nightmare. The complexity and robustness in features of typical e-commerce solutions can be taxing to your web servers (and your budget).

Check out the following excellent hosted e-commerce management systems below.

  • Shopify: With a client base that includes Amnesty International and Pixar, it’s no wonder that Shopify is regarded as the go-to for hosted e-commerce systems. It will deal with credit card transactions for you, has a user-friendly interface for managing your inventory and your e-store will be highly customizable so that you’re able to match your existing company brand. Plans start from $29 a month.
  • SolidShops: If you’re a big fan of 37Signals apps (e.g. Basecamp and Highrise), you’ll appreciate the simplicity and ease-of-use of the SolidShops interface. SolidShops is a newcomer in the hosted e-commerce space, so while it’s still in beta, it’s free to use. After beta, plans start at $29 a month.
  • E-junkie: If you deal with digital goods (such as e-books), E-junkie is the premier solution for you. E-junkie lets you embed a widget into your site for near-seamless integration. Plans start at $5 a month.
  • Wazala: Wazala promises that you’ll be able to build your very own e-commerce site in 15 minutes or less. Now that’s a promise we can all appreciate! Wazala can handle credit cards, or PayPal and Google Checkout for utmost convenience to your e-shoppers. Plans start at $9.95 a month.

2. Website Analytics

It’s impo
rtant to learn what users are doing on your site so that you can ensure optimal use and growth. However, having server-side statistics-gathering tools that you host yourself can be taxing on your web host and will not give you the benefits associated with using third-party services, such as integration with other products.

Here are three web analytics tools you can offload the work to.

  • Google Analytics: Google Analytics is highly regarded in the web marketing space because it’s free, has loads of features and reporting tools, integrates with other Google products and is easy to install.
  • ClickTale: If you would like visuals on what your website users are doing, check out ClickTale, a web analytics service that tracks and records user action. You can see where people are clicking on most (and thus, most fixated on), as well as watch videos of how users are interacting with your site. ClickTale has a free plan that records 300 user interactions, and paid plans start at $99 a month.
  • Yahoo Web Analytics: It’s hard to be trailing Google, but Yahoo has launched a wonderful analytics tool that rivals Google’s Analytics. Yahoo Web Analytics boasts near real-time analytics, whereas Google Analytics can take up to 24 hours to update your data. It has advanced data visualization tools to help you create images that you can use in reports and slideshow presentations.

3. Forums

Building a community has many benefits: It connects your customers with others, allows them to help themselves if they have a question about your product and can increase customer loyalty. However, maintaining your own forums on-site can be a burden to your web servers because of the amount of data interactivity that forums typically generate. Additionally, most self-hosted, open source solutions out there, such as phpBB, are notorious for being difficult to deploy and customize (this is spoken from experience in developing for these systems). Check out hosted solutions for community forums that will reduce your stress and headaches.

  • Ninja Post: With Ninja Post, you can get your very own forums up and running in no time. It has all the features you’d expect from a forums system with some nice perks like real-time thread updating, Twitter/Facebook integration, integration with Google Adsense, and more. Plans start at about $8 a month.
  • Nabble: Nabble is a free and simple tool for creating a basic forum. It allows you to embed your forum on your website, providing you with a tightly integrated solution.
  • ZetaBoards: ZetaBoards is a free, hosted forum web service with tons of awesome features, such as full customization (if you know some CSS), support for custom domains (so that the web address of your forums will match your website’s) and more.
  • Lefora: You can create a forum with Lefora, a free, hosted forum web service. It has beautiful features such as the ability to post images and videos, Facebook and Twitter integration, and a graphical user interface for the forum post editor so that your clients won’t need to deal with code and markup to format their posts.
  • ProBoards: ProBoards is a free, hosted forum web service that allows you to create your very own forum in seconds. It’s simple, customizable and even has an iPhone app that people can use to post on your forums.
  • Zoho Discussions: Zoho Discussions is a forum, customer support and customer feedback system all rolled into one. It’s fully customizable, has content discoverability features such as RSS feeds, search and SEO options, and more. The free plan is great for intranets, with the ability to have two forums and one moderator. The next plan starts at $12 a month and gives you the ability to have public forums, community statistics and increased file attachment limits (for users who would like to post images and videos, for example).

4. Site Search

Using a third-party site search has the benefit of using the technologies these search companies have developed to your advantage. Not only that, but it saves you from having to create/develop your own search feature and can cut some costs related to increased site interactivity and bandwidth usage due to users searching your site. Here are three awesome options for offloading the burden of site search.

  • Bing Box: Bing Box is a free, simple widget by Microsoft that will give your users the ability to search your site using Microsoft’s Bing search engine.
  • Google Custom Search: Google allows you to take its years of experience and excellence in the field of search and integrate it into your site. Using Google Custom Search is a snap, and you can get it set up within minutes.
  • Yahoo Search BOSS: Yahoo Search BOSS is a solution if you need a completely customizable search engine for your site because, unlike Google Custom Search, which retains a lot of Google’s branding, Search BOSS gives you utmost design flexibility. Not only that, but it doesn’t display ads in search results like Google Custom Search. The downside? You’ll need access to a web developer to get it up and running on your site; it’s not a copy/paste solution.

5. Contact Forms and Other Web Forms

Web forms are the bread and butter of website interaction. It is the primary way you can gather data from your users (aside from publishing your e-mail address, which can be clunky and lead to tons of spam). Contact forms can be tricky to set up and develop on your own and won’t nearly come close to the reporting/analytics features and ease-of-use that third-party form building web services have to offer. Here are a few to check out.

  • Google Docs Forms: Not many people take advantage of the fact that you can create embeddable web forms (for contact forms, registrations and online surveys) using Google Docs. What’s great about this web service, besides it being free, is that it integrates directly with the Google Docs office suite (such as its spreadsheets and documents).
  • Wufoo: Wufoo is a fun web form builder that is so simple to use. It allows file uploads/attachments (in case your web form user wants to upload pictures or PDFs, for example), it permits customization and takes the time to make sure your data is safe. Its free plan allows you to have up to three forms and 100 submissions per month.
  • JotForm: JotForm is a free web form builder that has a slick interface for you to take advantage of when buildi
    ng your web forms. You can even build payment forms with it (integrated with PayPal, Google Checkout, Authorize.net, and so forth).
  • Contactify: If you just need a simple contact form, check out Contactify, a free hosted solution for dealing with your website communication needs. It will reduce the spam you get from having to provide your e-mail address in public.

More Dev & Design Resources from Mashable:

HOW TO: Design & Program a Facebook Landing Page for Your Business
Learning Ruby: Expert Advice for Advanced Developers
10 Premium Tumblr Themes Worth Paying For
HOW TO: Get the Most From Crowdsourced Design Competitions
HOW TO: Get More Out of Your Fonts

Image courtesy of iStockphoto, kemie

More About: analytics, business, design, forums, Google, List, Lists, Search, small business, web apps, web design, Web Development, web forms, widgets, wufoo, Yahoo

For more Dev & Design coverage:

While social media is largely used for its ability to connect people, it also has potential to help antisocial types — as proven by a clever site that tells people when museums, libraries and theaters are least busy.

The site, When Should I Visit?, uses Foursquare’s API to map traffic on each day of the week for about 20 venues in London. People who want to avoid crowds can use the site to make decisions about when to visit.

Since Foursquare doesn’t make any historical data available, site creator Dan W. Williams wrote a program that calls its API ever 15 minutes to make a database. The concept is pretty simple: Since Foursquare tells you where people are, it can also tell you where they aren’t.

Other sites for San Francisco and New York are supposed to launch in about a month, but Williams has no plans to expand beyond that or to try making the sites profitable.

“It’s more of a personal project to see if it’s possible,” he says.

Williams set up the London site at Culture Hack Day — a weekend hacking event for which cultural organizations contribute their data — after someone on Twitter asked a local museum what day it would be least busy.

“It’s sort of this class of act that has become popular lately that gives you this really mundane superpower,” Williams says. “Like there are apps that tell you where to sit on the London underground so that you can get off faster, which doors are nearest the exits on the platforms. This is kind of the same. You can go to a gallery when it is slightly quieter. It’s nothing amazing, but it makes city life slightly more pleasant.”

Image courtesy of iStockphoto, spfoto

More About: development, foursquare, foursquare api, hacking

For more Dev & Design coverage:

Coding can be a solitary and frustrating enterprise, but the best thing about it is the community, which is generally waiting and wanting to help struggling programmers get past bugs and issues.

HackerBuddy is a clever, free application that capitalizes on the strength of that community. It allows web developers to find and give help in their areas of expertise — be those areas C++ or Python, SEO or marketing.

The app is simple to use, attractively designed, and with the right userbase, could be a real boon to programmers and startup types.

Hacker News and other developer-friendly forums are often littered with simple requests for help with coding or startup-related projects. These requests can fall on the wrong ears or appear at the wrong time, and giving or getting hacking help isn’t necessarily the purpose of these platforms, which are generally devoted to discussing the news of the day as it pertains to web developers.

On the site, we read that HackerBuddy will allow users to “help out fellow hackers, get the chance to beta test new apps and maybe even make friends with an awesome new startup. Tell HackerBuddy what you’re good at, and it’ll pair you up with a fellow hacker that could do with your friendly advice.”

The app matches you one-on-one with a fellow hacker and potential mentor/mentee in the subject area at hand. For example, I’m learning Java; if I choose the “Get Help” option from my HackerBuddy page, I can find a hacker to help me and chat with me about my Java challenges.

When the app matches up two compatible users, it swaps their email addresses, then “gets out of the way.” The users take over from there with an email exchange, which may evolve into phone or IM chats or even in-person meetings.

In addition to getting one-on-one help, you can also browse all users (there are currently around 1,200). We wish you could browse users by areas of expertise; for example, if I was building a Java app and needed early-stage startup and coding help, I would like the option to get both kinds of advice from the same person.

HackerBuddy was built by Dave Peiris, an iCrossing analyst, developer and SEO expert. He said the site is “a weekend project built using Ruby on Rails.” He built the app to learn RoR and writes, “There is a very large chance that this site will collapse under the weight of its own awkward code. If it does, sorry. I plan to improve it as I get better at coding in Ruby; please bear with me.”

We’re more than happy to bear with Dave; perhaps he could use a HackerBuddy of his own.

Give the app a shot, and in the comments, let us know how your experience with it worked out. Did you get the help you needed, or were you able to help out a fellow hacker?

Image courtesy of iStockphoto, pkline

More About: developers, hacker news, hackerbuddy, hackers, startups

For more Dev & Design coverage:

The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

WordPress.com is a great platform for users who want to easily create a free website or blog. With more than 23 billion pageviews in 2010, the service is a hit with millions of users.

Premium themes are now available for WordPress.com, but the nature of the system still limits what plugins can be used and how deeply customized a design and overall site structure can be.

For that reason, it is natural that some WordPress.com users will want to take the leap to the self-hosted WordPress.org software.

Transitioning from WordPress.com to WordPress.org may seem daunting — especially for users who have lots of content and multimedia already hosted on WordPress.com. That’s why we decided to put together this screencast that walks through the entire process from beginning to end.

Moving From WordPress.com to WordPress.org

Note: This process covers moving from an existing WordPress.com blog to an existing WordPress.org installation. If you need help installing WordPress.org or finding a web host to use with WordPress.org, WordPress offers some recommendations.

Using Plugins to Re-create WordPress.com Features

As I point out in the screencast, the real key to getting WordPress.org to function (and look) like an older WordPress.com site comes via plugins.

Automattic, the company behind WordPress.com, has customized its hosted version of WordPress to include some built-in features that just aren’t included in a standard WordPress.org installation.

As a result, some media like videos, embedded tweets and polls may not show up properly.

I mention some of the most common plugins in the video, but here are some quick links:

  • WordPress.com Stats — This will give you the same kind of stats on WordPress.org that are available to WordPress.com users.
  • VideoPress — If you have ever paid for the VideoPress video upgrade, this plugin will bring the same functionality (and access to your VideoPress videos) to WordPress.org.
  • Wickett Twitter Widget — This is the same widget WordPess.com uses to display tweets in the sidebar of a blog.
  • Grunion Contact Form — This plugin was used as the basis of the new Contact Form feature in WordPress.com.
  • PollDaddy — This plugin will enable any polls created in WordPress.com.

After the Move

After moving content from WordPress.com to WordPress.org and installing any plugins to enable native WordPress.com functionality, users may want to consider purchasing the Site Redirect upgrade from WordPress.com.

For $12 a year, WordPress.com will redirect your old WordPress site links to the new site. These are proper 301 redirects which means search engines will get updated to redirect traffic as well. That also means that most users won’t need to pay for the upgrade after the first year.

You can learn more about Site Redirect at WordPress.com and add the feature from the Upgrades section of the WordPress.com dashboard.

Your Tips

Have you ever migrated from WordPress.com to WordPress.org? Let us know your tips in the comments!

Series supported by Rackspace


The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

More Dev & Design Resources from Mashable:

How WordPress Themes Actually Work [INFOGRAPHIC]
HOW TO: Make Your WordPress Blog More Like Tumblr
5 Hot Design Trends for Aspiring Bloggers
HOW TO: Make the Most of TextMate
HOW TO: Secure Your WordPress Blog

More About: blogging, screencasts, web design, Web Development, web development series, WordPress, WordPress.com, wordpress.org

For more Dev & Design coverage:

facebook image

Jonathan Goldford is a partner at JG Visual, an Internet strategy company that works with organizations to develop and implement their online presence. You can connect with Jonathan on the JG Visual Facebook Page.

Right now Facebook Pages and custom landing pages are bigger than bottled water was on December 31, 1999. Michael Jackson, Lady Gaga, Starbucks, and the TV show House each have more than fifteen million “Likes” and are growing rapidly.

While there are an enormous number of articles that talk vaguely about how to create a custom landing page, very few discuss the nuances of actually designing and programming one. Here we will discuss the subtleties of designing a Facebook landing page and FBML programming. To make this discussion more concrete, we’ll use the creation of our own JG Visual landing page as an example.

Designing Your Company’s Facebook Page

Actually designing a Facebook Page is very similar to designing any website, except for a few considerations:

  • Design for a 520px Width — Facebook Pages must fit within a width of 520px. Since we can’t use a body tag in our Facebook Page, we’re going build our entire page in a container div set to a width of 520px.
  • Design for Any Height — We can make our Facebook Page any height, but we have to remember that most people interact above the fold and at the time of writing this, our Facebook landing page will start 135px from the top if the person viewing is logged in. If they aren’t logged in to Facebook, that increases to roughly 250px from the top of the page to allow space to log in or sign up.
  • Account for the Width of the Company’s Name — Since we’re interested in creating a call to action for our Like button, we must take into account our company’s name. The Like button appears just right of the company name at the top of the landing page. If we’re going to point to the Like button, we need to figure out the pixel width from the left of our landing page to the start of our Facebook Like button.

To take into account the 520px width and the distance for your Like button, you may want to take a screenshot. Once you take a screenshot of your Facebook Page, pull it into a design program like Photoshop and design over it. Here is a look at a piece of our final Facebook Page design.

landing page

Programming Your Company’s Facebook Page

Now that we have a design we’ll walk through how to program our landing page to use on Facebook.

Begin Programming Outside of Facebook

There are a number of reasons why we should start programming our Facebook landing page outside of Facebook.

  • Facebook Offers No Coding Support — Facebook provides only a small box for you to code in, and provides no syntax coloring or syntax checking.
  • Facebook Caches External Files — Facebook caches every external file causing changes to external CSS, images, Flash, or other external files to not show up without changing the version query string on the end of each file.
  • You’ll Publish Untested Code — Once you save changes, those changes will be live on your Facebook Page. You probably don’t want users seeing an unfinished or broken landing page.

Program the Page Without FBML

Since we aren’t going to be using Facebook to start programming, we can’t use Facebook’s Markup Language (FBML). In order to account for how Facebook will handle our code, we will adjust our code to follow these rules as we build our page.

  • Use Plain Old HTML and CSS — Program your Facebook Page like you would any page using HTML and CSS. 90% of the code will act exactly the same way. The rest you can adjust when you move the code onto Facebook.
  • Load CSS Externally — CSS should be loaded using an external style sheet file instead of using an internal style sheet. Internet Explorer 6, 7, and 8 can’t read internal style sheets on Facebook Pages.
  • Host Files on Another Server — Every image, CSS file, Flash video, or other external file needs to be hosted elsewhere. Facebook will not host any files for you.
  • Make All Paths Absolute — All paths to external files must be absolute. Write an image link like http://www.example.com/images/picture.jpg. Don’t write images/pictures.jpg.
  • Remove Firefox’s 1 Pixel Gap — Mozilla Firefox creates a 1-pixel space between images on Facebook landing pages. Use a class with the style display:block to remove the space. In our code, we use the class “nospace” to implement this style.

To start, create one HTML and one CSS file. The HTML file will hold the HTML and eventually the FBML. The CSS file will hold all of your styles. We’ll call them facebook.html and facebook-styles.css.

Start by linking to the CSS file and creating a div with an ID of container. Give the container a width of 520px in the CSS. Also, if you want to brand your landing page a little better, you can choose a font. To override Facebook’s default paragraph style, we added a font-family style for #container p. Finally, Facebook uses a default font size of 11px and a font color of #333. To best imitate Facebook while testing, we included the 11px font size and also set the container text color to black to match our company colors.



Create the remaining HTML and CSS for your Facebook landing page. Here is the code we have after finishing our page. At this point our landing page should look exactly how we presented it in the design instructions before.



Test the landing page in all the browsers at this point to make sure it appears correctly. You really should test the page throughout building, but this serves as a good reminder.

Add in the Necessary FBML

The page looks exactly as we expected it to, but right now if someone already Likes our page, they will still see the call to action for them to Like at the top. Let’s put in a conditional statement using FBML that only shows the action image when you aren’t logged in or haven’t Liked the page. This way, once someone Likes the page, they won’t be prompted to do so again.

Regular HTML

HTML with the FBML Conditional Statement

Let me explain the code:

  • fb:visible-connection — This code checks to see if the user has Liked the page before. If the user has Liked the page then the content inside will appear.
  • fb:else — In this case fb:else will display only to users who haven’t Liked the page. That is why we put the call to action inside the else statement. Also, unlike typical else statements, fb:else is placed inside the other conditional.
  • In case you want to add something else besides a call to action for your Like button, below are some examples of other commonly used FBML items.

    Adding the User’s Name — fb:name

    Fb:name will display the full name of the logged in user. For example, if a user named John Smith comes to your page the code below will display “John Smith”. This can be used to greet a user by name when they come to your landing page.

    Adding the User’s Profile Picture — fb:profile-pic

    Fb:profile-pic will display a user’s profile picture if they come to your landing page. For example, the code below will display the current user’s profile picture at 64px by 64px.

    Adding a Share Button — fb:share-button

    Fb:share-button will display a share button that allows users to share a link on their own profiles. For example, the code below will display a basic share button for Mashable.

    Adding a YouTube Video or SWF File — fb:swf

    Fb:swf will display an image that when clicked will show a video. For example, the code below will display the thumbnail used for The Social Network movie trailer. When that image is clicked, the trailer’s YouTube video will automatically play.

    Unfortunately, Facebook requires that the image be clicked before the video will play. You can create your own image to show through the imgsrc parameter. We wrapped the FBML in a container div to allow us to style it and added ?autoplay=1 to the end of swfsrc so the user won’t have to click twice to play the video.

    If you want to add your own YouTube video, replace the text in the parameters swfsrc and imgsrc where it says “1B95KLmpLR4” with the ID of the YouTube video you want. You can find the ID in the URL of any YouTube video after the text http://www.youtube.com/watch?v=.

    Adding an FLV file — fb:flv

    Fb:flv will display a video player for FLV files. For example, the code below will display a play button that you click to play the FLV video. fb:flv provides the player and all the controls. All you need is the FLV file.

    Adding an MP3 File — fb:mp3

    Fb:mp3 will display and play an MP3 music file. For example, the code below will display a music player that users can click to play. The player will then rotate through a display of the song title, song artist, and the album name.

    Adding a Form

    While adding a form is not FBML, people are often curious to learn how to place them on their Facebook landing pages. To do this, copy and paste your form code into the FBML submission box. Make sure you use the following code to start your form:

    Adding target="_blank" will open a new window when the form is submitted so the user isn’t taken away from Facebook.

    If you want to add a newsletter signup form to Facebook, both MailChimp and CampaignMonitor have tutorials that explain the process. If you don’t use one of those services, you can usually drop in the code from your e-mail marketing company to make this work.

    Adding JavaScript

    Adding JavaScript is outside the scope of this article, but you can learn more about Facebook JavaScript at developers.facebook.com/docs/fbjs. As of right now, you should remember that JavaScript will not be activated on your landing page until the user has taken action.

    If you haven’t found the FBML you’re looking for, visit Facebook’s Official FBML page.

    Publishing Your Company’s New Facebook Page

    After adding all of our FBML, we’re ready to add those final touches and publish our finished Facebook landing page.

    Uploading External Content, Adjusting Links, and Adding a Version Query String

    Once we’re done adding all the necessary FBML we need to move all the CSS, images, videos, and other external files to a server. To host your files, we recommend using your website’s server if possible.

    Once all of our files are located on a public server, we need to adjust our HTML to make all of our paths absolute and add a version query string. Previously I mentioned that Facebook caches all of your external files. This means that once you publish your Facebook Page, any changes you make to external files will not show on your landing page. This happens because Facebook doesn’t know the file has changed and is loading its older saved version. To trick Facebook, we use a query string at the end of our filenames and increase the number whenever we make a change to that external file. Facebook then thinks we’re using a different file and loads it up.

    Old Relative Path with No Version Query String

    New Absolute Path with the Version Query String

    Test Your Page Using the JavaScript Test Console

    One of the biggest disadvantages of Facebook landing pag
    es is that Facebook provides no place for you to test your code. We have to use the Facebook JavaScript Test Console.

    Copy and paste your HTML into the JavaScript Test Console and click “Run Code.” You’ll get to see your code in action. If everything looks good, you’re ready to publish your finished Facebook landing page. If not, make sure to check the links to your external content. Also, I noticed that the Facebook JavaScript Test Console has trouble loading videos, so you may be forced to test that code directly on your landing page.

    Publish Your Finished Facebook Landing Page

    Finally, you are ready to publish your HTML file to the Edit FBML screen. Follow these steps:

    • Click “Edit Page” on your Facebook Page.
    • Click “Apps” on the left side of the page.
    • Under the FBML section click “Go to App.” If you don’t see this, please add the “Static FBML” application to your Facebook Page.
    • Copy and paste your HTML code into the FBML box.
    • Title your FBML. This will show up in the tab at the top of the landing page. While you may want to use “Welcome,” remember that those who Like you will not land on this tab. Instead they will land on your wall and will see another tab that says “Welcome” at the top. We used “Who We Are.” Hopefully you can think of something more creative.
    • Click “Save Changes.”
    • Go view your Facebook landing page.

    • Make Your New Landing Page the Default Landing Tab

      Now that you’ve put in all of this time programming your custom landing page, you probably want to make it your default landing page. This way, when someone that has not Liked your page comes to it, they will be taken to your custom landing page instead of your wall. Here’s how to do it:

      • Click “Edit Page” on your Facebook Page.
      • Click “Manage Permissions” on the left side of the page.
      • Beside “Default Landing Tab,” use the drop-down menu to select the title of your new landing page.
      • Click “Save Changes.”

      Note that as an admin you will always see the content that you only want shown to those who haven’t Liked your page. Check with someone who has Liked your page and is not an admin to make sure they only see the content that’s meant for them.

      Congrats, You’re Finished!

      Nice work. You’re done. In case you need it, here are the final HTML, FBML, and CSS we used for our Facebook landing page.

      HTML and FBML


      Since there is no one correct way to program a landing page, we would love to hear what you think. Have you ever designed or programmed a Facebook landing page? How did it go? Did you run into any issues? Do you have any additional tips we didn’t cover here? Let us know in the comments.

      More Dev & Design Resources from Mashable:

      How App-Like Design Can Turn Your Site Visitors Into Customers
      4 Predictions for Web Design in 2011
      HOW TO: Get the Most From Crowdsourced Design Competitions
      HOW TO: Get More Out of Your Fonts
      10 Predictions for Web Development in 2011

      Image courtesy of Flickr, smemon87

      More About: business, design, facebook, landing page how to, marketing lists, web design, Web Development

      For more Dev & Design coverage:

If you’re a developer interested in earning some passive income for blocks of code, or if you’re a dev who’d like to save time by buying someone else’s code, we’ve got an interesting proposition for you.

Binpress is a new site that hopes to act as a marketplace for source code. Its goal is to bring web developers “high-quality and high-level source-code solutions for development projects and web ventures,” and it promises that all code sold is “mature and tested,” a promise that’s fulfilled in the company’s developer screening and selection process.

You can go buy — or sell — a JavaScript image manager or an auction system coded in PHP, the little code packages that might make your projects a little bit less of a headache and your work process a little bit faster.

For example, if you’re working on an e-commerce app, you can buy this Paypal API abstraction class for Express Checkout and Direct Payment features. It’s written in PHP, and you can buy a single-site license for $25; a multi-site license will run you $200.

And once you buy a code package, you will receive all future updates and fixes of that code. You’ll have the opportunity to contact the developer if you need to, and you also get a money-back guarantee.

On top of all that function, we have to admit that the form is pretty nice, too:

Binpress seems like a lot less effort for everyone involved than “rent-a-coder”-type outsourcing or contracting solutions, and it generally costs less, as well. Some code is even free, and with many packages, you can see a demo of the code in action before you buy.

In addition to single-language, stand-alone components, Binpress also offers code packages for web frameworks such as CakePHP and Django and platforms such as WordPress and Joomla.

Binpress is a fairly new initiative, and its marketplace offerings are slender so far. So to kick things off and incentivize devs to sell their code on the site, the company is running a programming contest with more than $40,000 in cash and prizes for winners. The contest’s sponsors include Google, Microsoft, PayPal, Amazon Web Services, Conduit, O’Reilly, Tropo, Media Temple, uTest and others.

Although the idea of a “code marketplace” is hardly new, it’s timed well for the current development market. We saw a lot of similar ideas floating around in the early 2000s; however, web development and the dev ecosystem and communities have changed significantly since then. It’s long been time for a new, better way to buy and sell code packages and snippets, and Binpress is a good-looking, functional site that meets the need. If enough devs flesh out its code package inventory, we can see the site being of great use to developers, both those who buy and those who sell.

Binpress comes from Lionite, an Israeli web dev shop with a focus on great design.

In the comments, please let us know if Binpress is the kind of resource you’d use, either as a buyer or seller, and why or why not.

Image courtesy of iStockphoto, jgroup

More About: binpress, code, developers

For more Dev & Design coverage:

Automattic has announced that users will now be able to purchase premium themes for their WordPress.com websites and blogs.

The commercial theme marketplace for self-hosted WordPress sites has exploded in the past few years. Moreover, the availability of various WordPress themes — commercial or otherwise — has contributed to increased adoption of WordPress across the web.

It makes sense that Automattic would want to bring some of the most popular WordPress.org premium themes to WordPress.com customers.

Tumblr added the ability for users to purchase and install premium themes in March 2010.

The first two premium themes that will be available on WordPress.com are Headlines by Woo Themes and Shelf from The Theme Foundry.

These themes have been available for WordPress.org users for some time and are both high quality and attractive.

Headlines is $45 and a magazine-style theme, perfect for users who have lots of content. It features 15 different color schemes, drop-down custom menus and a featured post slider.

Shelf, a tumblelog style theme, is $68. It takes advantage of WordPress.com’s new post formats feature (think Tumblr-style icons and formatting for specific types of posts) and has a fun horizontal scrolling design.

To purchase premium themes, WordPress.com users can either go to the Themes Showcase and click on the premium themes, or click on the “Premium” label in the “Browse Themes” section of the Themes menu in Appearances.

It’s interesting to see WordPress.com leverage the commercial theme space. When commercial themes first hit the scene back in 2008, there was a certain amount of unrest in parts of the WordPress community. Most of those issues — which really revolved around licensing — were settled some time ago, but the commercial themes space has, until now, remained untouched on WordPress.com.

For WordPress.com users, this is a great way to get a more unique-looking blog. For WordPress theme developers, it opens some potential business opportunities.

Would you buy a premium WordPress.com theme or would you prefer to buy a theme for a self-hosted WordPress.org installation?

More About: automattic, premium themes, WordPress, WordPress themes, WordPress.com

For more Dev & Design coverage: