5 Essential Tips on Social Media Integration for WordPress

These days, being social is everything for websites - especially for blogs. Even search engines take account of websites' activity on social media, so ignoring social networks and focusing on ancient SEO techniques is also out of question.

But how do we integrate our website into social media? In this tutorial, we're going to go through 5 essential tips on how to be more social.

1. Using Open Graph to Talk To Social Networks

The Open Graph protocol is a not-so-new standard (founded by Facebook) and may be considered as the social metadata of web pages. To make our content easily recognizable by social networks, we can use the Open Graph spesification so when somebody shares our content, the social network can show accurate information about the page that is shared.

You can check the full spesification at the website of Open Graph, but we will cover the basics in this article. We will fetch the title, the excerpt, the URL and the thumbnail image of the post and use them as Open Graph metadata:

function wptuts_opengraph_for_posts() {
	if ( is_singular() ) {
		global $post;
		setup_postdata( $post );
		$output = '<meta property="og:type" content="article" />' . "\n";
		$output .= '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />' . "\n";
		$output .= '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";
		$output .= '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />' . "\n";
		if ( has_post_thumbnail() ) {
			$imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
			$output .= '<meta property="og:image" content="' . $imgsrc[0] . '" />' . "\n";
		}
		echo $output;
	}
}
add_action( 'wp_head', 'wptuts_opengraph_for_posts' );

This code takes your posts and pages and inserts the Open Graph metadata we mentioned into the <head> inside them. Paste this into your functions.php file and you can see the output on your source code of your posts' pages.

By the way, you need to update the <html> tag of your theme, too. The <html> tag of my theme's header.php is like this:

<html <?php language_attributes(); ?>>

So I need to update it to look like this:

<html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">

And that's it, your posts and pages are now compatible with Open Graph!

Bonus:: While writing this post, version 2.0 of Jetpack has been released and it seems that they included a new feature called Publicize, which allows us to publish to various social networks. If you are using this plugin, just activate this feature (you don't even have to connect to any social networks) and voilà, Open Graph is enabled!

Include Social Sharing Buttons With Style

All right, we made clear for social networks on how our content will be shared... but the social networks aren't going to share our content by themselves, right? We need people, perhaps our visitors to share our posts and pages. That's where Digg Digg comes in handy:

Digg Digg is the almost perfect plugin to allow your visitors to share your content. It allows you to show a "sharing bar" at the top of your posts, at the bottom of your posts or as a floating bar next to your posts. You can change the looks of the bar with an extensive customization panel which even allows you to "lazy load" the buttons. This useful plugin will blend into your theme nicely and allow your visitors to share your content in almost 20 different social networks.

Show Your Google+ Profile Picture on Google Search Results

Attention: This tip will not only help you spread your Google+ account, but also improve the visibility of your SERP listings!

This easy trick is going to help you show off your Google+ account with your avatar. The only thing you need to do is to edit your theme's header.php file and put the code below inside the <head> tag:

<?php if ( is_singular() ) { ?>
<link rel="author" href="https://plus.google.com/115648928803525235666/posts" />
<?php } ?>

Just change my Google+ profile link with yours and that's it! Give it a couple of days for Google to index your pages with the <head> of your Google+ profile. Then, enjoy your links with your Google+ profile image, standing out among other search results. Drawing more attention means drawing more traffic and drawing more traffic means rising to the top of the search results... and rising to the top of the search results means drawing even more traffic but you already know that.

Tip for multi-author blogs: If you have more than one author on your website, you might want to check out the code snippet Navjot Singh shared on this article, at the "Promoting Your Authors" section. With that function in your functions.php file, your authors can update their Google+ information on their WordPress profiles to promote themselves on your website's SERP listings.

Promote All Your Social Network Accounts With a Single Sidebar Widget

I don't know if you checked the sidebar of Mashable, but they have this neat sidebar widget that shows off all of their social network accounts:

Strangely enough, I found out that one of Wptuts+' authors, Ahmad Awais has written a WordPress plugin to let us promote our social network accounts just like Mashable:

You can download the WP MashSocial Widget from the WordPress Plugin repository (or search for its name in your admin panel's Install Plugins page) and install it on your WordPress website. After the installation, simply head over to the Widgets page on your admin panel and drag it to your sidebar. Fill in the fields for your social network profiles, tweak the appearance however you want and you're good to go!

Automatically Publish on Twitter and Facebook... Without a Plugin!

I saved my favorite tip for the last part: I'm going to show you how to publish your posts automatically on Twitter and Facebook without using any plugin!

It's an easy plan:

FeedBurner will fetch our posts and publish them to Twitter
The Facebook application of Twitter will publish the Twitter entries to our Facebook profile and/or pages

Connecting FeedBurner to Twitter

First, log into your FeedBurner account. (And if you don't, well, sign up for an account.) Click on the Publicize tab and on its sidebar, head on to the Socialize page:

Click on the "Add a Twitter Account" button to connect to Twitter. After authorizing FeedBurner, adjust your settings and click on the Activate button at the bottom of the page. Congratulations, you're now publishing your posts automatically on your Twitter account!

Connecting Twitter to Facebook

This is also an easy step, since we're just authorizing another application - this time, a Facebook application. Head over to your Twitter profile settings and right below your "Bio", you can authorize the Twitter application for Facebook to send your Twitter updates to your Facebook profile and/or pages:

That's it! Now everytime you post something on your blog, FeedBurner will send and publish it to Twitter and Twitter will send it to Facebook. Easy, right?

Conclusion

These are the first things that came to my mind about integrating your website into social networks. Do you have any suggestions to extend this article? If you do, please share your thoughts by dropping a comment below. But more importantly, don't forget to share this post, if you found it useful!

HIGHLIGHTS OF THE DAY