Increase your Social Impact with OpenGraph – Related Articles

by • May 20, 2014 • FacebookComments Off on Increase your Social Impact with OpenGraph – Related Articles4119

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.

Occasionally we like to endeavor on a little like-frenzy trip down our Facebook Newsfeed. We just like content – from images to articles and individual comments – without really reading further into the story.

We may happen to stumble on a particular article with an interesting title, nice picture – but still, not worth visiting or reading. Now, as creators of that article, we can control what the user will see once they like, comment or interact with our post, without leaving their Newsfeed. Much like the Related Posts section on our blog, Facebook’s related articles work in a similar way.

Also Read: An Action Plan to Launch your Business on Twitter

Today we will implement OpenGraph tags for Related Content on our WordPress articles.

By default, Facebook decides to display related information in its own default manner. You have come across such information – other pages you may like, other posts you may find interesting and so on. This information is triggered by default or, should we choose to add a little bit of information, by specific OpenGraph tags, with the result depicted below:

opengraph article

Acquaint yourself with OpenGraph for WordPress.

Adding Meta Tags

This time we will be adding the see_also meta tag on our article. It contains an array<url> of links to related content, which you can define. The links can be specific articles, that is, static content. Make sure your tag is contained within an Article Object Type, otherwise this doesn’t seem to work.

<meta property="og:see_also" content="http://link-one.com, ... " >

WordPress is a powerful content management tool, and changing the code every so may become tedious. In this case, we can call a WP loop of related content within our tag and define our parameters from there. Just in case, take a look into WordPress’s documentation on how loops and queries work.

Here’s a nifty related content solution, with permalinks to 5 posts:

<?php
  if ( is_single() ) {
   $categories = get_the_category();
    if ($categories) {
     foreach ($categories as $category) {
      $cat = $category->cat_ID;
      $args=array(
       'cat' => $cat,
       'post__not_in' => array($post->ID),
       'posts_per_page'=>5,
       'caller_get_posts'=>1
      );
      $my_query = null;
      $my_query = new WP_Query($args);
       if( $my_query->have_posts() ) {
        while ($my_query->have_posts()) : $my_query->the_post();
?>

          <?php echo get_permalink(); ?>

        <?php
        endwhile;
      } //if ($my_query)
    } //foreach ($categories
  } //if ($categories)
  wp_reset_query();
} //if (is_single())
?>

Take the snippet above and insert it within our tag, as depicted below:

<meta property="og:see_also" content=" OUR SNIPPET ">

You need to make sure your code will go on a single.php template, or, if your header.php calls your meta, use our conditional tags instead. Otherwise, this will not work, unless you change conditions.

Essentially, every time a Facebook user interacts with our shared article on their Newsfeed, our see_also property will trigger an action to display our related permalinks ( previews of articles ) underneath the post, from the same category as our original shared article.

Next stop: Creating An App

Would you like to add anything to this story? Share your insight with us on the comments below.

Related Stories:

Did you like this post? Subscribe to our Newsletter!

We don't spam, we will just send you a daily email with the best of our posts.




Comments are closed.