Static Made

Written + produced with love in the City of Champions.

 

Employing iOS Hooks on the Mobile Web

One of my favorite recent trends in the area of mobile development is application interconnectivity. iOS apps like Launch Center and Drafts allow for activation and content sharing between installed applications through link commands called URL schemes. While playing around with Launch Center the other day, I wondered about the potential to extend the use of URL schemes outside of applications and into the mobile web. To my delight, after a little bit of experimentation, I got some PHP-infused iOS hooks running on my mobile site.

If you’ve viewed StaticMade.com on your phone or tablet, you know it’s optimized for mobile viewing. Instead of serving the standard desktop design, the site detects the user’s browser and serves up a unique design if it’s being viewed on one of many supported mobile platforms. I was curious to see if I could infuse this mobile design with app action integration.

The Concept

My idea going into this little experiment was to throw some Twitter sharing links at the bottom of each post that, when clicked on an iOS device, would take a specific action on an installed Twitter client. This way users who view a post in mobile Safari or another 3rd party browser wouldn’t have to provide login credentials when clicking the standard “Share on Twitter” link that really just opens Twitter’s login page (because really, who stays logged into Twitter on the mobile web?).

If you’re viewing this post on a mobile device, scroll down to the bottom and check out the post footer. Furthermore, if you’re on iOS and use the official Twitter app or Tweetbot, go ahead and click either of those links. You’ll notice the appropriate app is activated and a new message is created that includes the post title, permalink and source. For users viewing this on a desktop or laptop, I’ve grabbed this screenshot.

I decided to limit the options to Twitter for iOS, Tweetbot and mobile web for the following reasons: Twitter for iOS is the most popular Twitter client and Tweetbot is the best (IMHO). You could certainly include more application options, but I didn’t want to clutter the site with sharing options.

The Code

First, a disclaimer: I don’t consider myself a web developer. I hack stuff together and try to make it look presentable. Static Made is built on WordPress, so the PHP I used to populate the Tweet content is specific to WP’s framework. This can be done on other platforms, but you should consult the appropriate documentation files. If you’d like to implement a similar sharing feature on your mobile site, I’ve published the code below. Simply place these links at your desired location in the loop that drives your individual posts, most likely Single.php or Single-Post.php.

Twitter for iOS

<a href="twitter://post?message=<?php the_title(); ?>%20-%20<?php the_permalink(); ?>%20via%20@StaticMade">Twitter (iOS)</a>

Tweetbot

<a href="tweetbot:///post?text=<?php the_title(); ?>%20-%20<?php the_permalink(); ?>%20via%20@StaticMade">Tweetbot</a>

Mobile Web

<a href="http://twitter.com/home?status=<?php the_title(); ?>%20-%20<?php the_permalink(); ?>%20via%20@StaticMade">Mobile Web</a>

The Conclusion

These little snippets of code certainly aren’t revolutionary. I feel they’re unique, however, because in all my travels throughout the mobile web I’ve yet to come across iOS hooks in the wild. If you know of some existing and interesting uses, I’d love to know. Shoot me a note on Twitter. Happy iOS hooking!