Setting Up Your Blog for Social Media & Mobile Devices

With mobile and social media monopolizing more of how users interact, a successful blog needs to be optimized for more than just the various web browsers on their computers. This means some extra details that make for a more interesting experience on mobile devices, and fine tuning to make sure that your content gets published and promoted on social media successfully.

Mobile and Other Devices

Apple iPhone & iPads Homescreen icon (Blavatar)

On Apple’s iOS devices, iPhones, iPod Touch and iPads, you can bookmark a site and add it to the home screen of your device. Normally this takes a snapshot of your site, and makes an icon out of it. This isnt the prettiest way of having your website represented among the sea of beautifully glossy Apple App icons. Luckily you can add your sites icon instead of a snapshot by inserting a simple line of code to your sites header.

Create a png of your site’s icon as a square 64px x 64px image and save as “apple-touch-icon.png”. Place this image in your sites images directory and add the following line of code to your site’s header.

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

This blavatar will also be the main icon for many RSS reader apps and will be used to represent your site.

Mobile Devices (iPhone/Android/Windows Phone 7)

For most cases, your site will be to heavy and javascript feature rich to give smartphone users a usable experience. With WordPress, its easy to adapt your blog or site to mobile devices with the WPTouch plugin from Brave New Code, that will translate your pages and posts to a cut down, fast downloading mobile friendly version. This is a very simple plugin and in most cases more than adequate for most blogs, but if you want more advanced features, check out the Pro paid version.

iPad and Tablets

If you really want to go an extra step and give your users an immersive experience on their tablets that takes advantage of touch interfaces and the accelerometer, you may want to try the Onwsipe plugin. Though still in its development early stages, and can conflict with other javascript heavy themes and plugins, if configured correctly, can give a very fun and interactive way of presenting your content to those on tablets. The plugin at the moment only works for iPad users, but Onswipe is looking in to updating the plugin for Android and other tablet platforms to come.

Brave New Code also offers iPad and broader tablet compatibility with their Pro version of WPTouch. WPTouchPro will give you an iPad friendly version of your site with rich social features and customized tempting features that allow you to customize your look and feel easily.

One thing to take in to account with any of these plugins, is other plugin conflicts. These plugins will not work if you are using multi-language translation plugins such as WPML, and Onswipe will need some testing for plugin and theme compatibility.

Facebook & the Open Graph

Facebook Like/Send

Facebook has become imperative for social syndication of your content, and it’s very important to have a way for the readers of your blog to share and like your content. The problem is that Facebook can publish your user’s activity with the wrong images and descriptions if your site is not set to tell it what it needs to know. First off, you need to know how your content is syndicated on Facebook to see if your good to go or not. Facebook provides an excellent tool, called URL Linter, that gives you feedback on your url and shows you the content it grabs.

By entering your url there, Facebook gives you information on what the title, description, and image that it will use for the profile post when a reader clicks the like button. If things dont look right, then you can update your WordPress header.php to add the following code to make sure that all the Facebook OpenGraph tags are available to help Facebook grab the right content to display on the Newsfeed and Profile.

Place the following code anywhere between the <head></head> tags.

<?php
$thumb= get_post_meta($post->ID,'_thumbnail_id',false);
$thumb= wp_get_attachment_image_src($thumb[0], false);
$thumb=$thumb[0];
$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  }  ?>

*** note: If using a third party theme that handles a posts default image through custom tags, you may have to modify the above script accordingly to get the correct thumbnail image.

Facebook Insights

Facebook now provides analytics and stats on your reader’s interactions with your content, providing you with some insight on the impressions a liked item gets, and a high level overview of your sites engagement.

Facebook Insights also lets you tie your website with its corresponding Facebook Fan Page. This makes it easier for Facebook to relate the website content shared on the Fan Page, and aggregate the interactions with the links that are shared, liked and commented on.

If you are the admin of your Fan Page and your website, all you need to do is go to the Facebook Insights Dashboard and add your domain. You will be asked to choose which profile, page or Facebook app you would like to associate the domain name with. If it’s your personal site, link it to both yourself and your page if you have one. If you represent a company, link it to the Fan Page, as this will give all Admins of the Fan Page access to the analytics.

Once the linking is done, Facebook will present you with a line of meta data code to add to your website header.

<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" />

To get your content across all mediums, devices and social networks take a little bit of work, but it all pays off in the end to make sure that the visibility of your site is top notch. Your readers will appreciate the fine and subtle details and will definitely increase the engagement of your site.

If you have any additional tips on how to better improve your site for social media and smartphone devices, We’d love to see your feedback in the comment section.

Leave a Reply

Your email address will not be published. Required fields are marked *