[box type=”note”]Please note that this article requires basic understanding of HTML and WordPress. If you’re not sure what to do, we advise you to avoid tampering with your website’s code.[/box]
WordPress is a great content management platform. You can easily get a website up and running and as far as blogging is concerned, the possibilities are endless. A vast array of free plugins are at your disposal and a great number of them can make social sharing, SEO and tagging a stroll in the park.
However, if you are like me and you enjoy learning, experimenting and having more control over your content, the old-fashioned way of customizing data by hand, is the only way to do it.
This handy guide will help you gain full control over social sharing for WordPress posts.
Also Read: WordPress 3.9 is Here And You Will Love it
Before we begin, you might want to acquaint yourself with data and social sharing, by reading the first post in the series, titled “Increase your Social Impact with OpenGraph – an Introduction“. Whereas on part one we talked about handling static pages, such as the landing page of your website, this post is dedicated to dynamic content: in short terms, the posts of a blog.
Customizing social sharing by hand has its benefits:
- You can easily update, change or alter your settings depending on circumstances,
- You can define social sharing for multiple social platforms in one sweep,
- You can define different social data for different post formats, types, categories and anything you can basically imagine. Sounds cool? It is.
- Customizing social data by hand is the best method to improve multi-author websites.
OpenGraph can also be combined with Twitter Cards.
Social Sharing for Static Content
During our introduction to OpenGraph, we learned to handle social data for static pages. It’s a relatively easy process and requires basic knowledge of HTML and WordPress. This is the code we used:
< meta property="og:title" content="My Website Name" />
< meta property="og:type" content="website" />
< meta property="og:image" content="http://www.mydomain.com/media/example.jpg" />
< meta property="og:url" content="http://www.mydomain.com" />
< meta property="og:description" content="Best Website Evah" />
< meta property="og:site_name" content="BEST WEBSITE EVAH" />
Take the above, fill in the desired information and place it within the <head> </head> section of your website, or the static page you wish to apply the social data to.
Use the Debugging Tool to refresh the cache and check for errors.
Social Data for Single Posts
Posts are dynamic content. It’s simply impractical to apply the above data to every post created.
However, if done correctly, social data customization can produce amazing visual results, with content that is greatly shareable, visually appealing and full of information for the Newsfeed, a place where detail matters. The best part of it? You only have to do it once, for any and all WordPress posts.
- The Title, by using the Post’s Title as the story’s header,
- The Description, by using the first paragraph or excerpt as the description,
- The Image, by using the featured image as your OpenGraph image,
- The Site Name and
- The Author, by displaying the post’s author next to the site name.
Each and every single WordPress post from your blog or website, after the completion of our social data implementation, will have its own unique and matching OpenGraph details.
So, let’s get straight to the code.
Dynamic Content
Since the data we want to customize is dynamic (posts are author/user generated), we need a more flexible coding language. Good thing WordPress has done most of the job for us, so the trick of copying and pasting will always work on any WordPress site 2.8 and above. Meet PHP.
We are just going to slightly change the social data used for static pages.
< meta property="og:title" content="<?php single_post_title(); ?>" />
< meta property="og:url" content="<?php the_permalink(); ?>" />
< meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />
< meta property="og:type" content="website" />
< meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
< meta property="og:author" content="<?php the_author(); ?>" />
That’s it. Copy the code above and let’s proceed to determine exactly where we should place it.
Note: By default, WordPress declares the excerpt of each post as the first 55 letters of a post. You can, as with almost everything on WordPress, define your own excerpt, or define how the excerpt should be formatted, or change the whole process altogether.
Note 2: In order for featured images to work, you need to enable them on your WordPress template.
Placing the Code
Our dynamic code snippet has been created for user generated content.
Every WordPress template operates differently, but all of them use the same basic functionality. Our code snippet needs to be present within our post’s format: the template part handling the appearance, style and functionality of our WordPress posts is single.php.
Our snippet handles meta-data, which means that in order to operate properly, it needs to be inserted within the <head></head> section of our website. However, in most cases, that part of our website is handled by header.php, which offers global attributes for both static content and dynamic content. That is a problem we need to solve in order to avoid mixing our OpenGraph stories.
The concept is simple:
<?php if ( is_single () ) { echo '
// place your DYNAMIC SOCIAL DATA here
'; } else { echo '
// place your STATIC SOCIAL DATA here
'; }
?>
So, if the page is a post, the meta used will be dynamic, while for every other page, the meta retrieved will be our static social data. Place the code above within your <head></head> section within your header.php part (without overwriting the default data in your file) and replace the code comments with each code snippet and you’re done!
Note: If there is a <head></head> section within your single.php, avoid the process above and just paste your dynamic snippet.
Debugging
Naturally, all future posts will have the correct OpenGraph details. However, older posts and articles will still appear with default settings, or the settings you had applied to your WordPress installation before our social data implementation. To fix this issue you need to refresh the cache of your posts (a couple important, if not all the million posts you have).
Use the Debugging Tool to refresh any content’s social story.
Would you like to add something to this story? How have you integrated social functionality on your website? Share your insight and questions on the comment section below.
Related Stories:
- Make the Most of Google+ for Your Business
- [How-to] Create Twitter Cards for your Content
- Tired of LinkedIn Endorsement Pop-Ups? Here’s the Solution