Yoast » Social Media

Are ads preventing your posts from being shared?

Joost de Valk — Mon, 05 Sep 2011 12:16:24 +0000

I like sharing links on Twitter, I've been trying to find a good way of doing that without overloading people, and think I've found the solution in Buffer App, which allows me to buffer my tweets. As a result of that, I'm tweeting a lot more links. What I find though, is that I'm reading a lot of articles that I like, but which I wouldn't want to share, not because of the content, but because they're so surrounded by links.

A good example is this post by Ann Smarty on the MakeUseOf blog. It's a good post that could have pointed many readers at 2 nice addons, but I'm hesitant to share it, because of the ridiculous ads. I don't like in-content ads, but I can live with one of them. Having 3 of them though, 1 annoyingly situated just below the title so I had to search for the intro, is just too much and bordering on the plain spammy.

So, when you're adding ads to your site, consider this: they might make me money, but do they prevent me from making more money? If so, don't add those ads!

Are ads preventing your posts from being shared? is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Optimising the Facebook Open Graph Protocol

Alex Moss — Mon, 27 Jun 2011 13:00:08 +0000

A small note from Joost first: I'm working on a project with Alex Moss from Pleer. He knows an awful lot about the Facebook Open Graph protocol, in fact he did a couple of pretty good plugins for Facebook comments and buttons etc. I asked him to do a guest post about Open Graph here, which you'll find below. It fits nicely with my previous post about social buttons, and you should probably know that all of this is integrated and/or will be integrated into my WordPress SEO plugin, you just have to enable Facebook Open Graph on the Indexation page.

When someone likes or shares a URL on Facebook, data is used to create the title, description, image and other attributes to form structured information about that page via the Facebook Open Graph protocol. This article will show you how to optimise this data.

Facebook & Open Graph's XML Nameservers

Within the opening tag, the Facebook and Open Graph nameservers need to be included to tell your browser and other parsers that it can expect tags other than HTML:

xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"

an example end result might look something like this:

Adding some Necessary Facebook Open Graph Tags

Now that we have the XML nameservers in place we can now add a few Facebook Open Graph data entities to the site's header.

"/>

A note about og:description - I have used the Meta Description from Yoast's WordPress SEO plugin to generate og:description. If the plugin is not installed then the post's excerpt will be used instead. On another note, og:descriptioncan allow up to 300 characters. If you're advanced enough you could replace the META description with a custom field and use that to generate a totally unique description just for Facebook!

Generating the best Image Thumbnail

In the example above, I have used the function get_fbimage();to generate the image thumbnail. Here's that function:

function get_fbimage() {
  $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '', '' );
  if ( has_post_thumbnail($post->ID) ) {
    $fbimage = $src[0];
  } else {
    global $post, $posts;
    $fbimage = '';
    $output = preg_match_all('//i',
    $post->post_content, $matches);
    $fbimage = $matches [1] [0];
  }
  if(empty($fbimage)) {
    $fbimage = "http://mydomain.com/default-image.jpg";
  }
  return $fbimage;
}

This code does 3 things:

Looks for a featured image
If there isn't a featured image, it looks for the first image within the_content
If there isn't a featured image or any image within the_contentthen use a default image

og:type - categorising your page type

og:type can describe the type of content the page has. This can encompass many things such as a website, blog, article, product, TV show and many more. Below is a simple example of treating each page and post as an article, and everything else within the site as a website:

"/>

There are several types of page that can be found here. One way you could make og:type more advanced using custom fields. Let's say I have just written a post about a book I have just read, we can use book within the og:type. I can now insert a custom field named og-type and insert the value book. Once I've done this I can now edit the example above to create something more advanced:

"/>

The code above looks for the value of the custom field named og-type. If there isn't a value then it to default values as shown in the basic example.

Some other Facebook Open Graph Tags

The Open Graph tags above are the required tags needed. Below are additional tags you can use to provide even more in-depth detail about that page or site.

Page ID

You can connect your WordPress site to Facebook via Facebook Insights. Once connected, you can view analytics for all sorts of Facebook features. Insert this code to connect your site to Facebook Insights:

App ID

When you add any Facebook App, such as Facebook Comments, to your site you need to link the site to your Facebook Platform application:

Admins

With some Facebook Platform applications, such as Facebook Comments, you don't need this tag as the admins are managed within the App itself. However, there are certain Facebook Platform applications that will need more management. This tag can be used sitewide or per page so is more useful on larger sites with multiple administrators and moderators. Simply create a comma separated list of admins by profile ID:

You can find your Profile ID by hovering over your Facebook profile picture and taking note of the value after set=pa., for example, mine is ?set=pa.223100916

Contact Info

You can embed your email adress, phone & fax numbers like so:

Note that I have set og:emailto the WordPress admin email. You may want to change this if the admin email is not one for public knowledge.

Location

As we know, local search is on the increase. Open Graph have added location based tags which can be used for things such as Facebook Places:

Audio and Video

Adding audio and video can be very useful for Open Graph. A good example of how this is used is where you can click a video in Facebook and it will play it right there and then, instead of you having to visit the page directly to view it. Here's an example of how this can be used:

Audio (only supports MP3):

Video (only supports SWF):

That wasn't so painful, was it?

You can check that your tags have been implemented correctly by using Facebook's URL Linter. You can find more information about the Facebook Open Graph protocol at ogp.me as well as at facebook.com.

Optimising the Facebook Open Graph Protocol is a post by Alex Moss on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Social Buttons: Adding them to your site & Tracking them

Joost de Valk — Thu, 23 Jun 2011 20:48:20 +0000

I've had a lot of questions recently (like literally, several a day) on how I implemented the social buttons in WordPress, whether I was using a plugin or using a theme. First of all I'm glad to see all of you noticing my social buttons section so much. Second, I'd love to share with you how I built this, because I actually made it load nice and fast too and would love for you to have that.

In full "shape" my social buttons look like this:

There are several plugins that do social buttons in WordPress. As a lot of you may know, I used to maintain a plugin called Sociable back in the day when social buttons where all still 16x16, simple, buttons. At some point, I think it was Digg that introduced the script based social button with a counter in it, which was later on adopted by several social sites. To date, there are many many social bookmarking sites that have widgets like these. Not every site needs all of these social buttons. I picked the 5 that work for me, your mileage may vary.

How did you implement these social buttons in WordPress?

I hear you thinking "get on with it already". Ok ok ok. Here we go. It's not a plugin. It's in my theme. Which doesn't mean it couldn't be a plugin, it's just that it'd be pretty hard to embed them in my site as sweet as these social buttons are embedded right now, using a plugin.

So they're in my theme. As you can guess, the buttons themselves are a template part. This template part is actually rather small and simple, it looks like this (line breaks added for readability):


  
    
  
  
    Tweet

As you can see, these are the "regular" buttons for most of these services, with that exception that all of them are lacking the script tag. Back in february, Frederick did an awesome post on his blog about optimizing the performance of widgets & buttons. I used the knowledge in this post, but took it a few steps further.

Loading these Social Buttons script files

Let's start with Facebook. Their asynchronous code works quite well. First, make sure you have a fb-root div:

Then load the JavaScript, (all of the code samples below should be within