Blue Peak Digital

Facebook Open Graph meta tags: How to optimize WordPress for sharing

Tyler Pearson — Mon, 11 Jul 2011 23:13:55 +0000

Facebook traffic has become one of the main sources of traffic to many websites, so it is important that websites are optimized for display on Facebook. Facebook has specific meta tags for their site called open graph tags that give a site owner the ability to optimize how their site is displayed when shared on Facebook.

Facebook has four “required” open graph meta tags:

1
2
3
4

The first required open graph meta tag is for the title. Generally, this will mirror the set up that you have for <title> in the <head> of the header.php file. As an example, below is the set up that I use and recommend because it optimizes a site title nicely for search engines and general readability.

If it is the home page, it will return the website name.
If it is a category page, it will return the category and website name.
If it is a single page, it will return the title of the post.
Lastly, if it is a page, the title of the page and website name will be returned.

1
2
3
4
5
6
7
8
9
10
11

if (is_home () || is_front_page() ) {
bloginfo('name');
} elseif ( is_category() ) {
single_cat_title(); echo ' | ' ; bloginfo('name');
} elseif (is_single() ) {
single_post_title();
} elseif (is_page() ) {
single_post_title(); echo ' | '; bloginfo('name');
} else {
wp_title('',true);
} ?>"/>

For example, the output of the above code for this particular post looks like this:

1	<meta property="og:title" content="Facebook Open Graph meta tags: How to optimize Wordpress for sharing"/>

Next in the required meta tags is og:type. There are many, many types that can be used, so visit the Facebook page on Open Graph to determine which is most relevant to your website. For example, when building a political campaign website, I use politician. After you have determined which to use, drop it in the code.

1	<meta property="og:type" content="politician" />

Next up is og:url, which is the URL of the page being shared. To get the URL, we will use the WordPress permalink template tag.

1	<meta property="og:url" content=""/>

As an example, the code below is what will be output for this post:

1	<meta property="og:url" content="http://bluepeakdigital.com/facebook-open-graph-meta-tags-wordpress-sharing"/>

Last of the required open graph meta tags is the image to be used a preview. The code below will first check if there is an thumbnail set for the post being shared. If there isn’t, it will default to an image that you will need to designate in your images folder, so make sure you have one in there. Facebook also has specific requirements for the preview image:

An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats.

1
2
3
4
5

} if (is_single() ) { ?>
echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
else { ?>
bloginfo('template_url'); ?>/images/fbpreviewimage.png" />
} ?>

There are two more open graph tags that aren’t required, but should be added: site_name and fb_admin. The first is self-explanatory — the name of your site. We will use the bloginfo('name') WordPress template tag to return the site name.

1	<meta property="og:site_name" content=""/>

The second is fb_admin, which is where you will want to add your individual Facebook ID number so that you will have the ability to administer your site and see Facebook Insights. I’ve found the easiest way to get a Facebook user ID is to go to graph.facebook.com/yourpersonalizedfacebookusername.

Finally, here’s an example of the code all together:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

While these are the most important open graph tags, there is a whole spread of other open graph meta tags that should be added to your code to give more descriptive details on the specifics of your site, so check out the Facebook site to pick the particular ones relevant to the site.

Note: Keep in mind that Facebook will cache the meta data, so if you have made changes to the site, the old information may still display when the page is shared. To reset the information (or see a preview of what the page will look like when shared) use the Facebook URL linter. Also, the ability to change the meta information ends after a page has been shared ten times in order to keep consistency.

Using the datetime microformat attribute to make a WordPress theme more functional

Tyler Pearson — Sat, 09 Jul 2011 22:13:55 +0000

Adding microformat attributes to a WordPress theme is an easy way to add more semantic metadata to your markup, which in turn makes a website more functional. Microformat data are beneficial because it makes is much easier for your site’s information to be parsed and used in other applications, for instance search engines.

We will need to format the date and time to follow the ISO 8601 standard using the WordPress template tag, the_time.

The specific tag we want to get the ISO format is the_time('c'); ?>, which will output in our code like this: 2011-06-22T21:59:08+00:00.

Keep in mind that the datetime attribute is only shown in your code, so we then need to use a template tag like the_time('F j, Y') ?> to output something visible, which in this case would show as June 27, 2011.

Here’s the code together that contains the timedate meta data:

1	the_time('c'); ?>"> the_time('F j, Y') ?>

And here’s an example of a structure that could be used for a post in the WordPress loop:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="meta">
datetime="">
('F j, Y') ?>
</time>
</div>

<h1><a href="">(); ?></a></h1>

<div class="excerpt">
(); ?>
</div>

<a class="read-more" href="">Read more</a>
</article>

How to exclude yourself from Google Analytics reports in WordPress

Tyler Pearson — Sat, 09 Jul 2011 19:45:14 +0000

Being able to exclude yourself from Google Analytics is important in order to ensure your reports are accurate. Many tutorials suggest excluding your IP address from Google Analytics, which is time consuming and isn’t ideal because IP addresses can change.

I’ve found the easiest way is to exclude the Google Analytics script from loading when an admin is logged in. This only requires two additional lines of code and will work with whatever your IP address may be as long as you are logged in to your website.

An added bonus is that this will work after delivering a theme to a client. All they have to do is make sure they are logged in.

Lets look at the code:

1
2
3
4
5

if (!is_user_logged_in()) { ?>

} ?>

All this does is use the WordPress template tag to check to see if a user is checked in. If a user isn’t logged in, it will show the analytics code, which would be all the visitors to your website. If an admin is logged in, the analytics code will be hidden, and consequently anything a logged in user does not show up in Google Analytics reports.

For example, the suggested optimized Google Analytics code from HTML5 Boilerplate would look like this:

1
2
3
4
5
6
7
8
9
10

if (!is_user_logged_in()) { ?>

} ?>

If you already have Google Analytics code installed in your theme, open the file where it located (most likely footer.php, although it may be header.php) and simply drop in the code from above. Just make sure to change UA-XXXXX-X to be your site’s ID.

If you don’t have the analytics code installed already, Google recommends the placing it in the head part of your file. So open header.php and drop the above code right before </head>.

How the 2012 Presidential Candidates’ websites are using splash pages (and what can be done better)

Tyler Pearson — Wed, 06 Jul 2011 01:01:59 +0000

Splash pages are often a necessary evil for political campaign websites. In recent years splash pages have been mostly shunned by web designers across the web because of their ability to hinder usability (and for often being really annoying), but political campaign websites are one of the few places where they are used consistently to collect valuable information and build email lists.

Currently, there are some main candidates — Michele Bachmann, Ron Paul, Tim Pawlenty, Herman Cain, and Gary Johnson — that have opted not to use a splash page for whatever reasons, which I personally feel it a poor decision because the benefits far outweigh the negatives. Now is the time is be building a list, and setting up a splash page is a great way to do it.

A standard splash page for a political campaign website contains an email list signup form that asks for a visitor’s email address and zip code. All of the 2012 candidates that have splash pages follow this standard and collect this information.

Below are screenshots of the splash pages and a little write up with my thoughts on each:

Barack Obama

Currently I keep getting the same splash page (screenshot below, link), but it looks like the Obama campaign has already been testing various splash pages this cycle to determine the optimal page for conversions.

This is in continuum to previous years when the Obama campaign extensively used A/B testing to determine the best splash page for conversions. Here is a great write-up from the campaign’s Director of Analytics on how testing was done in the past. In the post, the 2008 Director of Analytics describes how Google Website Optimizer was used to get the sign-up rate to 11.6% for one of the previous splash pages used.

The Obama campaign also looks to be changing their splash page to reflect various campaign events going on. During the lead up into the end of the fundraising period a few weeks ago, the Obama campaign held a contest where a contributor had the chance to have dinner with the President and Vice President. The splash page was updated during this period to market the event.

Also, I’m digging the clean and clear design of the Obama splash page.

Mitt Romney

The set up of the code and url for the splash page on MittRomney.com implies that the splash page will likely change throughout the campaign. The cookie set up on the homepage directs new visitors to http://mittromney.com/splashgate, which seamlessly redirects the new visitor to whatever the campaign currently has set for the splash page. The url for the current splash page is http://mittromney.com/landing/nh-podium, but the way things are set up indicate that this will most likely not be the splash page used throughout the whole campaign.

Design-wise, I like it. It’s a good-looking splash page with a nice photo.

Rick Santorum

RickSantorum.com also has your standard splash page, except the Santorum campaign includes a video at the top of Glenn Beck interviewing Rick Santorum. The video is an odd choice because it is long (5 minutes), boring (especially compared to the jazzy videos of some of the other candidates), and only deals with one issue (Israel).

The Santorum splash page is the only one that includes a Facebook like box.

Jon Huntsman

The set-up on the Huntsman campaign website makes me cringe for multiple reasons. I’ll point them out because it is a great example of how not to set up a splash page.

There are three(!) splash pages. One is enough. Two is overkill. Three is flat out silly. Each splash page lowers the number of visitors that will be reach the home page, so having three splash pages ensures a much higher percentage of visitors will give up before getting to the home page.
The splash page is still shown to return visitors. The standard way across the internet for splash pages is to only show it to new visitors. After the visitor has clicked through, a cookie is saved on their computer that will prevent the splash page from being shown again upon their return. This cuts down on the annoyance of having a splash page pop up everytime.
The second splash page is completely pointless. A flashing H that says “AT LAST” is tacky, somewhat pompous, and should be nixed because it adds no value to the campaign.
The splash pages suck on mobile. If a website is going to show a splash page to mobile visitors, the splash page should be optimized to work nicely on a mobile phone. The links to skip through the pages are so small on a mobile phone that many visitors will probably just give up.
The splash pages destroy the website’s search engine optimization. Visitors should be redirected to a different url for the splash page (example.com/splash) so that the lowest level (example.com) is for the home page. This is where search engines expect the homepage. Instead it gets a page that is almost completely devoid of content.
Last but definitely not least, the pages are ugly. I understand the Huntsman campaign is going for the minimalist look for the website. Minimalist websites can look great — this doesn’t.
The daily video on the first splash page is redundant. It’s the same video that is already on the homepage.

My suggestion would be to get rid of the first two splash pages because they don’t provide any value. The third page is where the information is collected, so it should be the splash page left up. The Huntsman website is also the only one with a splash page currently using Facebook Connect to collect information.

Page 1:

Page 2:

Page 3:

Newt Gingrich

The splash page on Newt.org is just your simple standard splash page — email address and zip code.

Well that about sums up the splash pages for now. While this is the current state of the splash pages, look for candidates’ campaigns to add, remove, change, and optimize the splash pages on their campaign websites in the months leading up to Election Day.

Launch: ConnectingWV.com — a directory of West Virginia elected representatives online

Tyler Pearson — Tue, 05 Jul 2011 17:52:55 +0000

A few weeks ago I got the idea to set up an online directory of West Virginia’s elected representatives with information on their websites and Facebook and Twitter pages. As a digital politics junkie, I’m often hunting down where politicians are located online, so I figured I’d build a website that contained all this information in a central location. Anything that helps connect constituents and their elected representatives is a good thing.

I’ve also been wanting to do some more in depth work with PHP, APIs, and jQuery, so this was an opportunity to play around with them more.

I added all the representatives I could find online, but if you see someone I missed please let me know by shooting me an email at tyler@bluepeakdigital.com and I will add them.

Some of the technology used:

HTML5 (semantics and data attributes)
CSS3 (including gradients, transitions, box-shadow, text-shadow, and border-radius. The font used for @font-face in the title is Kalico from the Miller Type Foundry.)
PHP (grabbing the info through the APIs and caching)
jQuery (including the spectacular Isotype script)
Google Web Font Library (for the Droid Sans font)
Facebook Social Plugins
Facebook Graph API
Twitter API

The statistics and tweets are cached once a day. I’ll be hooking up a script as a cron job on my server to update the statistics automatically.

Check it out at ConnectingWV.com. It is best viewed in Google Chrome, like pretty much every other website on the internet.

Collecting data like never before: How 2012 Presidential Candidates’ websites use Facebook Connect

Tyler Pearson — Tue, 28 Jun 2011 06:38:27 +0000

While visiting the websites of the 2012 presidential candidates over the past few days, one thing in particular popped out at me as a change from campaign websites in previous election cycles. While email list signups have existed on campaign websites for nearly as long as there have been campaign websites, this is the first election cycle where Facebook is now frequently being utilized as alternative way for supporters to sign up for forms on the websites.

Implementing a Facebook signup on a campaign website is advantageous for two significant reasons:

The first is that anything that makes it easier for people to sign up for the list is a good thing because it leads to increased subscribers. Instead of having to go through and individually fill out each input area in a form, the user can simply click and be signed up in seconds.
The second benefit is the wealth of information about a user that can be accessed through Facebook. Traditionally, campaign email list sign up forms consist of two essential elements: an email address and location. An email address is required (of course) to send the user an email. A location (generally a zip code) gives the campaign the ability to target different messages based on where the user lives.

A user connecting through Facebook gives campaigns the opportunity to ask and get much more data than the typical email address and location. Campaigns can now get information ranging from their birthday to their favorite books. Data is crucial for success in campaigns, so when this information is collected and tied into something like a voter database, more informed decisions can be made about campaign strategy.

Let’s take a look at the various presidential campaign websites utilizing Facebook as a signup option:

Jon Huntsman

Jon Huntsman’s website asks for some of the most information out of any of the candidates. Currently one of his three splash pages pops up with a map of users’ photos and prompts visitors to “Join Generation H. See your face on our map of supporters when you… Connect with Facebook.” While on first impression it seems like it would only need a picture and location, the app also requests permission to get the user’s email address, post to their wall, and access much more in depth profile information like education, work history, and religious views.

The extra profile information is nice for the to have, but users may be hesitant to grant access to so much information and give Jon2012 the ability to post on their wall. Usually explicit details on what they will do with this permission will eliminate hesitations users may have before granting access.

Herman Cain

Herman Cain is using the Wildfire platform on his website as a way to encourage action among his supporters. In addition to basic information and email address, permission is requested for the rest of a user’s profile information.

Barack Obama

Continuing in the same digitally progressive vein as in 2008, President Obama’s campaign announced his re-election a few months ago through the web. Visitors to BarackObama.com were greeted by a splash page with a video, a question “Are you In?”, and the opportunity to click “Get In with Facebook” that would connect them with the Facebook app. After granting permission, an update was made for the user that stated “I’m In” and encouraged users to ask Facebook friends if they were in too, which continued the viral nature of the announcement.

Currently BarackObama.com still has the ability to click “Get In with Facebook,” but it is no longer located on the splash page. The Obama 2012 Facebook app requests permission to access the user’s email address, birthday, current city, and the ability to post to their wall.

Also noteworthy: Obama 2012 currently has 46,749 monthly users, a number drastically higher than any of the other candidates.

Tim Pawlenty

Similar to Obama and Cain, Pawlenty’s use of Facebook Connect is not just for an email list. Pawlenty’s site features a nifty “grassroots action network” called PawlentyAction intended to encourage online and offline activism. The site collects additional profile information like favorite books, quotes, and a user’s “likes.” PawlentyAction’s heavy integration with Facebook explains the requested permission to post to a user’s wall and access news feed posts.

Rick Santorum

Aside from accessing the information already publicly available to everyone about the user (here’s mine), the only permission requested is for accessing the typical email and location.

Michele Bachmann

Michele Bachman launched her new website yesterday in coordination with her formal announcement and is currently requesting the same information as Santorum: basic information, email address, and location.

Being able to retain all this data is important. Previously Facebook only allowed developers to retain a user’s information for 24 hours, but the current Facebook Platform Policies are more lax and allow data needed “to operate your application” to be saved without a set expiration period. A privacy policy URL is supposed to be included in the application that states how the data will be used, but I do not see specific Facebook data privacy policies for any of the candidates.

Here are a few examples of how data could be used:

Getting an email from Barack Obama on your birthday wishing you a Happy Birthday
Receiving an invitation to a group phone call with your favorite author after the author endorses Jon Huntsman
Sharing a message on your wall that you just volunteered at the local office for Tim Pawlenty
Receiving an email from Michele Bachmann with a video of her speaking at a campaign stop at your alma mater

It will be interesting to see how the campaigns will use the additional data. Micro-targeting will be used extensively in this election, so if you grant permission to your Facebook data to a candidate, don’t be surprised when you get messages targeted towards your interests and information based on this data. The possibilities are huge and I can’t wait to see what happens.

Which gubernatorial candidate’s website had the most shares (by far) on Facebook?

Tyler Pearson — Wed, 08 Jun 2011 20:04:20 +0000

A few weeks before Election Day last month, I tweeted a picture that showed number of shares for each candidate’s website on Facebook. A few people DMed me about doing a follow up on on the final number, so here we go.

At 1,882 shares, Speaker Rick Thompson had more than triple the number of shares of every other candidate’s website combined. I worked on Rick Thompson’s campaign during the primary, so I was glad to see that one outcome of our digital strategy was having the most Facebook shares of all the candidates.

Sharing and liking a candidate’s website is a great way to boost name recognition, spread information about a candidate, and pass along a personal endorsement to users’ friends. A Facebook user has an average of 130 friends, so the potential reach of these shares was into the hundreds of thousands of people, many of whom would be voters.

Alright, now let’s see the stats.

Democrats:

Rick Thompson – 1,882 [1,2]
Natalie Tennant – 295 [1]
Jeff Kessler – 115 [1]
Earl Ray Tomblin – 108 [1]
John Perdue – 63 [1]

Republicans:

Betty Ireland – 124 [1]
Bill Maloney – 121 [1]

Additionally, we launched a contrast microsite a few days before Election Day that ended up being shared on Facebook more in one day than the opposing candidate’s website had been shared the entire campaign.

Note: To see the number of shares for each site, I used the Facebook Graph API, which can be accessed through http://graph.facebook.com/http://example.com.

The big email mistake on Sarah Palin’s new website

Tyler Pearson — Mon, 18 Apr 2011 18:31:08 +0000

Sarah Palin’s email list signup on her PAC’s new website is a great example of how not to do it. Every time someone signs up for her list, a unique number is shown in the URL that indicates what number sign up they are. From the launch of the new site about an hour ago until now, it looks like 190 people have signed up (edit: A little over a day later and email signups are at 3200).

Sure, there are other campaign secrets that are a bigger deal, but I can guarantee that the other campaigns will be keeping an eye on the number of people who have signed up for this list.

Go see for yourself at SarahPAC.com.

Edit 2: Looks like the link in the confirmation email isn’t working either. Clicking on it takes me to the website where I get a box that says, “Unable to verify that email address, did you click on the link we sent you?”. Not a good start for the email list.

Launch: Rick Thompson for Governor

Tyler Pearson — Thu, 10 Mar 2011 22:51:14 +0000

Recently we launched a web presence for House Speaker Rick Thompson, a candidate for Governor in West Virginia in 2011.

Check out the website at RickThompsonWV.com

Launch: Nelson France for Morgantown City Council

Tyler Pearson — Thu, 10 Mar 2011 22:25:25 +0000

Last month we launched a website for Nelson France, a candidate for Morgantown City Council.

Check it out at NelsonFrance.com.