Category Archives: Blogging

Fix broken Facebook sharing – Jetpack only shows the post title in og:description

It’s beautiful and sunny outside. The temperature is a refreshing 60 degrees, and I’m eager to get outside and enjoy the day. Before venturing out I say to myself, “Vanessa, there was a great article you wrote a while back, why not share it on Facebook so others can enjoy it?”. With the certainty that it will be quick I hit the share button, craft some stunning literature about why this article is relevant today and spend the next three hours fixing Jetpack’s broken treatment of og:description.

If you’ve found this page, you’re probably struggling with that same thing – when sharing on Facebook, instead of inserting your expertly crafted post description you just see the title repeated again. As great as your site may be, this is not a welcome invitation to sharing. After three hours of investigation, taking my entire network of sites down twice and much help from this Reddit Article, this WordPress forum post and my own limited PHP skills I have a solution to share.

If you’re using Jetpack, there are three things you need to do to get your blog posts to show up with the correct description when shared on Facebook:

  1. Add code to your theme to correctly set the og:description property
  2. Comment out the code in the Jetpack plugin that incorrectly sets this
  3. Make sure your Excerpts are set

 

Add code to your theme to set the og:description property

Add the code below to the header.php file in your theme. You can find this going to your WordPress dashboard, clicking on Appearance, then Editor.  It’s useful to make a careful note of what you’re changing so you can undo it later, or better yet – backup your files before changing. In general changing your theme files won’t cause too many bad things to happen if you get it wrong.

<?php
if (is_home()) {
echo ‘<meta property=”og:title” content=”Your site name”/>’;
echo ‘<meta property=”og:description” content=”Your site image”/>’;
echo ‘<meta property=”og:image” content=”http://images.yoursite.com/image.png”/>’;

}

else {
echo ‘<meta property=”og:title” content=”‘;
echo single_post_title();
echo ‘” />’;
echo ‘<meta property=”og:description” content=”‘;
echo strip_tags(get_the_excerpt());
echo ‘” />’;
}
?>

Comment out the incorrect og:description code in Jetpack

This one is a bit trickier – so be careful! I brought down my entire network of sites twice because I was trying to get too fancy. Yes, it’s possible to edit Jetpack and put all the code there instead of in your theme, but it’s safer to make as few changes to plugins as possible.

First, edit the Jetpack plugin by going to your WordPress dashboard, select Plugins, then Editor. In the top right select ‘Jetpack’ as the plugin to edit. Now choose the ‘sharedaddy.php’ module on the right by clicking it.  Then click on jetpack/modules/sharedaddy/sharing-sources.php, also on the right. Do a search on the page for og:description and you’ll be taken to code that looks something like the below. Comment out the two lines with if ($post… and echo ‘<…

Hopefully Jetpack fixes this in the near future, but until then you’ll need to add the comments back whenever you upgrade your Jetpack plugin.

public function display_header() {
if ( $this->share_type == ‘share’ ) {
// Set the open graph description, otherwise Facebook may pick up some random text from the page
global $post;

//Comment out because Jetpack is lame with og:descriptions
// if ( $post && $post->ID > 0 )
// echo ‘<meta property=”og:description” content=”‘.esc_attr( apply_filters( ‘sharing_post_title’, $post->post_title, $post->ID, $this->id ) ).’” />’;
}
}

Set your excerpts to get the correct og:description

Lastly, you need to set your the excerpt on your post to get the correct description. It’s not enough to have a description set in an SEO plugin like All in One SEO Pack, because the get_the_excerpt() function only looks at the WordPress excerpt. The excerpt should be right under your post edit box in WordPress, though it may be hidden in later versions of WordPress. You can bring it back by selecting Screen Options where you’re editing your post.

Phew!

You’re done! Congratulations! Test everything and do a quick share to make sure everything is working.

The Essential Guide to Blogging on the iPad

Blogging on the iPadOn my most recent trip I decided to jump headfirst into the Post PC era and forgo my cumbersome Lenovo PC in favor of an iPad. I was confident that the iPad could replace all my needs for email, social networking and entertainment. In fact I’d already shifted many of these activities to my mobile devices. I was a bit more concerned with how efficiently I’d be able to blog. I knew I’d have some free time, so armed with an Apple wireless keyboard I set out to see just how the iPad could handle one of my more complicated daily computing tasks.

Along the way I discovered that the iPad takes you the first 80% of the way with delightful ease, but makes you struggle for the last 20%. Like the ride that drops you 5 miles from home with no bus stops in sight, the iPad left more than a few missing pieces.

My Blogging Setup

Every blogger has their own unique setup. From the most simple text posts with an occasional photo to more elaborate systems that focus on SEO, adorn each post with an image by relying on photo repositories, upload static content to a CDN and use social networking to promote posts.

My setup approaches the latter. I maintain blogs on self-hosted WordPress installs as well as on Blogger. I use Amazon S3 and CloudFront for image hosting, procure images from either stock photo libraries like iStockPhoto or creative commons photos from Flickr and manually promote posts on social networks to build traffic. I’m also picky about the filename, alt text and caption of images for SEO reasons, and on my desktop use tools like JPEGCrop and PNGOut to optimize image size.

Setting Up To Blog on Your iPad

There are generally three options for writing your blog:
1. Use the website – both WordPress and Blogger have very good web editors
2. Use the branded iPad apps for your blog – WordPress has a very robust iPad app, Blogger has a basic and barely functional iPhone app.
3. Use 3rd party iPad apps, of which there are a few.

After some trial and error I ruled out the web interface. The iPad version of Safari is sorely lacking [e.g. no content editable support], which makes WordPress and Blogger sites finicky and cumbersome. Since I’ll spend most of the time writing the post, I needed the environment to be good.

The WordPress native iPad app proved more than adequate, and was easy to setup. Though you’ll need to know some HTML to get the most out of it. Even doing basic things like inserting heading text requires knowing the HTML syntax for such. Since I’m fairly well versed in HTML this wasn’t a problem for me, but could be for others.

The Blogger iPhone app was really rough. It left very little screen real estate for content (since it was an iPhone app), and had issues with escaping characters – Whenever I’d use an apostrophe in the title of a post it would replace it with all the escaped characters – NOT what I had intended. It is however the only way to upload images and have them hosted on Blogger, which can be advantageous.

Since the Blogger app was so rough, I supplemented it with the BlogPress iPad app which does a much better job of text entry. By first uploading any images in the Blogger iPhone app, then opening that post in BlogPress to finish I was able to successfully complete posts.

Handling Images in Blog Posts

Working with images on an iPad can be tricky. There are two separate places that images files are stored on the iPad. The Camera Roll is used for all photos taken from the built in camera, and is also the place that many photo apps open/save from. Unfortunately if you want to specify a specific image file name you’ll need to copy it to the Documents section to rename it. I haven’t found an app that allows renaming of images in the Camera Roll.

Handy apps for handing images include:

  • PhotoPad: This great little free app supports most of the necessary
  • GoodReader: This is a great little app for managing files and reading PDF documents. For our purposes it is the easiest way to copy files from the Camera Roll, rename them and copy them back.
  • Smush.it: I wasn’t able to find apps for optimizing image size on the iPad, but this great service will still do the trick. Unfortunately iPad Safari doesn’t let upload an image for compression, so you need to supply a web link. If you’re using Flickr for images and you don’t need to do processing you can feed the Flickr link to Smush.it. Otherwise it gets a bit tricky since you need to upload the image before compressing it.

Using a CDN for Images

Amazon CloudFront is a popular and easy to use CDN. By serving files from locations that are closer to the user it helps speed up site load time, and also offloads traffic from your web server improving the scale. Uploading files to S3 (and hence CloudFront) is trivially easy on the iPad, though I haven’t found a way to update HTTP headers (e.g. to specify a far future expiry date), this is a small price to pay for such convenience.

Handy apps for working with CDNs:

  • Cloud Services Manager: This app does more than just S3, it will also let you manage your EC2 instances. Uploading images to S3 is fast and easy.

Social Networks on the iPad

Facebook, Google+ and Twitter all have robust mobile websites, so I’d recommend using these to stay connected with your community while on the iPad. Twitter also has a great iPad app, but both Facebook and Google+ still only provide iPhone apps, which aren’t nearly as good as their mobile websites.

Other Useful Apps for Blogging on the iPad

  • Dual Browser: A nifty app that splits your browser window in two, so you can do research in one pane and write notes in another.
  • Atomic Web Browser: A fast and easy to use tabbed web browser. I’m still holding out hope that Safari will bring tabbed browsing to the iPad, but until then this browser is well worth the few dollars from the App store.
  • 10 Blogging Apps for the iPad: A good collection of a few more apps that bloggers will appreciate.

Putting it All Together

My workflow for a typical blog post looks like:

  1. Open WordPress App to begin writing post
  2. Open Safari or Atomic Browser to look for an image
  3. Copy image link, and paste into Smush.it if image is the right size, otherwise download the image and resize in PhotoPad (forgoing the extra compression because it’s too time consuming
  4. Open GoodReader, copy image from Camera Roll to documents, rename, copy back to Camera Roll [You can skip this step if you use Cloud Services Manager, since it lets you rename your file on upload]
  5. Open Cloud Services Manager, upload image and copy image link
  6. Back to WordPress, insert image. Final review of post and publish

That’s it – happy blogging!
If you have any other tips for better blogging on the iPad please post a quick comment, I’d love to hear them.


Photo courtesy of J. Paxton Reyes