Optimizing Your Blog for Mobile & Social Media Users

We’re all mobile, all the time, so it would only make sense that your blog should be mobile too. Mobile devices and social media platforms have become the go-to resource for gagging how users interact with each other and sites. That’s why every smart blogger knows the best way to optimize their blog is to make it available on the go.

But how do you stand out? Well, here are some tips on how to make your blog more appealing via a small screen, and ensure your content is getting published and promoted on social media outlets successfully.

Make it Attractive on Mobile and Other Devices

Everyone likes an attractive site, whether on a laptop screen, desktop or mobile device. As more and more people are going online via their mobile devices, every smart blogger knows, you’ve got to flow with the tech trends.

iPhones, iPod Touch and iPads Homescreen Icon (blavatar)

We all love Apple (I think), and we enjoy their devices even more. Thanks to their bookmarking tool, you can add your favorite sites (and of course yours) to the home screen of your device. Yes, that’s right you can create your own personalized apps. But, we’ve got to be honest, sometimes this isn’t the most attractive way to preview a website. No worries though, you can add your site’s icon as an app instead of a snapshot. Awesome, we know. Here’s how you do it:

Create a 64px x 64px png image of your site’s icon, then save it as “apple-touch-icon.png”. Next, place the image in your sites images directory, then go into your header coding, and stick this in:

{code type=codetype}<link rel=”apple-touch-icon” href=http://www.example.com/images/apple-touch-icon.png />{/code}

Easy right? Cool. So now this blavatar will be the main icon for RSS reader apps, and your site.

iPhones, Androids and Windows Phone

Because sites are usually javascript heavy (and mobile devices have a hard time loading the script), most smartphone visitors may not get the full site experience. But, if your blog is WordPress based, you’re a little luckier. WordPress’s WPTouch plugin (made by Brave New Code) easily translates your pages and posts, making them mobile friendly. And it’s free.

While free is pretty sweet, it might not be as functional. So, if you’re really looking to make an impression on a small screen, check out the Pro paid version. Your reader’s will thank you.

iPad and Tablets

With the growing number of iPad and Tablet owners, you have no reason not to optimize your site for these devices too. A big plus about this is that you’re taking advantage of the touch screen interface and accelerometer, giving your readers a more interactive experience. To do this, we suggest trying the Onswipe plugin.

Onswipe makes mobile publishing easy. Just a heads up, Onswipe is still in its early development stages, and could possibly cause conflicts with other heavy javascript themes. This can be avoided; just double check to make sure the plugin is configured correctly for your WordPress blog.

If you’re not sure about Onswipe, than go for WPTouch Pro. The best part about this plugin is the customized template feature, giving you complete control of your visitor’s virtual experience.

Before you get really stoked, keep in mind that even plugins fight. Watch out for potential plugin conflicts with WPTouch and Onswipe if you also have mulit-language translation plugins, such as WPML. Make sure to always test for theme compatibility with any new plugin.

Facebook & Open Graph

Since 2004 Facebook has exploded, crisscrossing between a social sharing platform to a full bucket of information about online interaction and behavior. Now, they’ve created a tool that makes any content-sharing-perfectionist smile. Meet the Facebook URL Linter.

Facebook Like and Send

Everyone reads their Facebook, and it’s no secret it’s the best outlet for content syndication. Unfortunately, Facebook has a nasty habit of publishing (sometimes) user’s activity with the wrong images and descriptions. However this can be avoided if your site’s SEO package and settings are properly configured. In order to figure out what’s up and how it looks in someone’s news feed or your page, do a publishing test on Facebook, and if you’re still having problems use Facebook’s URL Linter.

The URL Linter is a tool that was created by Facebook developers so you can preview how your content will look before publishing it. It’s fairly simple, you enter in the desired URL and poof! It shows you a preview of how the potential post will look. If you’re not happy with the result then go into your header.php and add this code anywhere between the header tags.

{code type=codetype}


$thumb= get_post_meta($post->ID,’_thumbnail_id’,false);

$thumb= wp_get_attachment_image_src($thumb[0], false);


$default_img= get_bloginfo(‘stylesheet_directory’).’/images/default_icon.jpg’;


<?phpif(is_single() || is_page()) { ?>

<meta property=”og:type”content=”article”/>

<meta property=”og:title”content=”<?php single_post_title(”); ?>”/>

<meta property=”og:description”content=”<?php

echo apply_filters(‘the_excerpt_rss’,get_the_excerpt() );

?>” />

<meta property=”og:url”content=”<?php the_permalink(); ?>”/>

<meta property=”og:image”content=”<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>”/>

<?php  }else{ ?>

<meta property=”og:type”content=”article”/>

<meta property=”og:title”content=”<?php bloginfo(‘name’); ?>”/>

<meta property=”og:url”content=”<?php bloginfo(‘url’); ?>”/>

<meta property=”og:description”content=”<?php bloginfo(‘description’); ?>”/>

<meta property=”og:image”content=”<?php  if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>”/>

<?php  }  ?>


This code will make sure that Facebook’s OpenGraph tags are connected and the right content is grabbed, ensuring your post to be up to your standards when you share it on profiles and in news feeds.

If you’re using a third party theme that manages a posts default image via custom tags, you may have to tweak the above coding to make sure you get the right thumbnail image.

Facebook Insights – A Marketer’s BFF

Facebook is always finding ways to make our interests more shareable. Saying this, I’m sure you’ve noticed they now provide analytics and stats about your readers interactions with your content. This includes: insights on impressions on liked status/posts, reader demographics and more. Of course these insights are directly related to your website’s Facebook page.

How exactly does Facebook get these insights? They connect it with your website. If you’re currently not getting this valuable info, simply go to Facebook insights dashboard and add your domain. Once you’ve added your domain you’ll be asked to choose which profile, page or Facebook app you’d like Facebook to read. Just a suggestion: If it’s your personal site, link to yourself and your page (if you have one). If you’re representing a company, link it to their fan page. This will give all the Admins an opportunity to see and understand the analytics.

After you’ve linked everything up, Facebook will give you this meta data code (see below), and then you simply add it to your website’s header.

{code type=codetype}

<meta property=”fb:admins” content=”user_id” />

<meta property=”fb:page_id” content=”your_page_id” />

<meta property=”fb:app_id” content=”your_app_id” />



2011 was deemed the year of mobile, and I think we can all agree- everyone’s got a smartphone, and everyone’s on the go. This is why it’s so important for any blogger to make sure their readers can easily access their blog anywhere, anytime. (OG social platform)?

Sure, sharing your content can be time consuming, but in the end it’s well worth it (if not just for exposure). Always make sure to pay attention to the details of what you’re sharing (watch out for spelling mistakes, poor grammar, bad images), I mean, you’ve worked hard on your blog, and you’ve earned bragging rights. Now just let the bragging be about how awesome it looks on your mobile.