Your All-in-one Automated Social Tags Setup for WordPress

by • August 14, 2014 • Experts TalkComments Off on Your All-in-one Automated Social Tags Setup for WordPress4452

Warning: Please note that this article requires basic understanding of HTML, PHP and WordPress functionality. Don't tamper with your installation if you are not sure about what to do. Contact a professional, instead.

Plugins? Meh. Free yourselves from the use of plugins that may or may not be compatible with WordPress versions, other plugins, your theme, your sidebar widget and a gazillion other things that might go wrong. And what about customization? Ease of access, manipulation and handling.

What about caching and performance?

Also Read: Schema – Microdata for WordPress Articles

Plugins, no matter how functionally small, force your website to include even more things. More scripts, more files, more data. In the majority of cases, we don’t even know what it is exactly they include.

I have personally seen so many cases where plugins cause more problems than solve them, such as:

  1. Duplicate data, where caching goes wrong
  2. Missing data, where our intended goal is gone
  3. Wrong data, where things pop up that are completely irrelevant

Here is a simple example:

<head>
  <meta property="og:app" content="appX-FILESnumber">
</head>

In which case, Facebook’s debugger warns you to fix it. Fix what exactly?

You need a considerable amount of time to tackle the problem when a plugin is involved. Should you know how to edit files and mess with code, you would have to spend a whole afternoon understanding how the plugin author intended for it to work and in what way.

No code knowledge? Get ready to lose your hair on a Google-night out.

The Basic Setup

Fortunately, there is an easy way.

Tip: This is a rookie’s guide, if you’re here for the snippet, skip ahead the intro.

One that doesn’t involve the use of any files whatsoever, or scripts or anything else that is basically not required. This method takes advantage of WordPress built-in functionality and, voila, PHP conditions in their simplest form. The guarantee is, there is no chance it will ever be incompatible, unless Automatic decides to change WordPress’s mainframe altogether. Not likely.

Note: How about a sneak-peek into WordPress 4.0, I hear plugins are in trouble.

1. Special File

For starters, we need a new php file, which you can create through FTP or via your server administration panel. Make sure it’s located under wp-content/themes/theme-in-use.

I’ll call it z-social.php – this way it will be displayed last on the wp-editor’s right hand menu.

Note: Should you decide to do this, or try it at first glance and see if it works, deactivating plugins that generate social tags is probably the best thing to do. Take SEO ones out, too.

2. Include

That file is part of WordPress. Find your header, or the template file that includes information about your <head> section, and write the following within the <head> section. Do not overwrite any data:

<head>
  ... 
  <?php get_template_part( 'z-social.php' ); ?> 
</head>

What we did there is basically call z-social.php into our <head> section, wherever that is located. So, whatever we write on z-social.php will be displayed inside <head>. Now, depending on the theme or the template’s framework, the <head> section will most likely be located inside the header.php file, which in turn, is called everywhere else. There are numerous ways of doing things.

In any case, the thought process is calling z-social.php once in a file that is called everywhere. Therefore z-social.php will be called on every page, post, home, category, author page, etc.

3. Conditions

Here comes the nifty part.

One file solves so many problems, including caching, processing, speed, SEO, responsiveness. However, one file creates just a tiny little problem: how can we separate our social tags for each content, without having conflicting rules everywhere? For example, we want every article to have its own unique social tags. Every page as well. In one single file.

Well, we can thank Rasmus Lerdorf for that. The concept is simple:

So, if this is a chocolate cake, eat it alone, else, share with guests.

Declaring PHP markup:

<?php ... ?>

How conditions work:

<?php 
  if ( is_home() ){ 
    echo' <h1>hello</h1> '; 
  } 
  else { 
    echo' <h1>bye</h1> '; 
  } 
?>

So, if the page is our homepage, you’ll get a “hello”, if not, you’ll get a “bye”. Tip: echo stands for displaying HTML, or rather, content and not code. Insert your content within echo” tags. To mix both content and more php, this is the method to do it, by closing and opening echo tags, divided with “;”:

<?php 
  if ( is_home() ){
    echo' <h2>Welcome to '; 
    the_title(); 
    echo', how about some coffee?</h2> ';
  }
  else { 
    echo' <h2>No coffee for you.</h2> ';
  }
?>

On the homepage, the result would be:

Welcome to We are Social Media, how about some coffee?

On every page, as we haven’t defined any conditions, the result would be:

No coffee for you.

However, we can’t get what we want with a single condition. Fortunately, we can built a massive tree, with as many conditions as we want – conditions within conditions:

If this is a chocolate cake, eat it alone,

else,

if it has a vanilla topping, throw away,

else, share with guests.

<?php 
  if ( is_home() ) {
    echo'';
  }
  else {
    if ( is_page('about') ) {
      echo'';
    }
    else {
      if ( is_page('contact') ) {
        echo'';
      }
      else {
        if ( is_single() ) {
          echo'';
        }
        else {
          if ( is_category('soups') ) {
            echo'';
          }
          else ( is_category('meat') ) {
            echo'';
          }
        }
      }
    }
  }      
?>

Each else can begin a new tree – or rather, a new if, therefore creating an endless loop if you get carried away. Make sure you have as many closing tags “}” as you have “else”s.

So the basic structure is:

<?php 
  if -definitions- { -content- } else -definitions- { -content- }
  ----or----
  if -definitions- {
    -content-
  }
  else {
    if -definitions- {
      -content-
    }
    else {
      ...
?>

Disclaimer: I am sure there is more that can be done with PHP conditions.

Available tags for WordPress:

( is_home() ), ( is_page( ‘page-name’ ) ), ( is_single () ), ( is_category ( ‘category-name’ ) ), ( is_customposttype() ) // Tip: You can also define special conditions within each tag, such as a specific post via is_single( ‘post-name’ ). Note: Visit the WordPress Codex for more.

The Anti-Plugin Snippet

It all boils down to this. Here’s a very basic structure for a simple installation:

<?php 
  if ( is_home () ) {
    echo' <meta property="og:title" content="';
    the_title();
    echo'" /> 
          <meta property="og:url" content="';
    the_permalink();
    echo'" />';
    echo' <meta property="og:type" content="website/article/product/..." />
          <meta property="og:description" content="description" />
          <meta property="og:site_name" content="name" />
          <meta property="og:see_also" content="link" />
          <meta property="og:image" content="img link" />

          <meta name="twitter:card" content="photo/summary/..." />
          <meta name="twitter:creator" content="@username" />
          <meta name="twitter:site" content="@username" />
          <meta name="twitter:domain" content="base link" />
          <meta name="twitter:description" content="description" />
          <meta name="twitter:image:src" content="img link" />
          <meta name="twitter:title" content="';
          the_title();
          echo'" />';
  }
  else {
    if ( is_page () ) {
      // replace this with the homepage setup,
    }
    else {
      if ( is_single () ) {
        // replace this with a customized homepage setup
      else {
        echo'';
      }
    }
  }
?>

Replace the information above with your data and customize accordingly.

What you’ll need for your social tags displayed above are Facebook OpenGraph settings and Twitter card meta – fortunately, we’ve got some simple guides for those as well that can help you out:

  1. Increase your Social Impact with OpenGraph – An Introduction
  2. [How-to] Create Twitter Cards for your Content

Use Facebook’s debugger and Twitter’s validator to check your data.

Would you like to add anything to this story? Do you have a question about the process or social tags for WordPress? Share your insight and comments on the section 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.