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:">

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:

A screenshot of Digg Digg

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="" />
<?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:

Mashable's social networks widget

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:

WP MashSocial Widget

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:

  1. FeedBurner will fetch our posts and publish them to Twitter
  2. 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:

A screenshot of FeedBurner

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:

A screenshot of Twitter's settings page

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?


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!

Related Posts
  • Code
    A Guide to Using FeedPress with WordPressA guide to using feedpress with wordpress
    FeedBurner still works great, but it hasn't been updated much in the last few years, and people are worried that Google, owner of FeedBurner, may close it down especially with the track record they've had over the past few years. So for those of us who want to continue tracking statistics about our subscribers, what options do we have available?Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Code
    The Beginner’s Guide to WordPress SEO by Yoast: Social SettingsThe beginners guide to wordpress seo by yoast 400
    We discussed very basic configuration of the WordPress SEO plugin by Yoast in part one of this tutorial series. Today, we're going to continue the series, and I intend to demonstrate how to configure the following: Social configuration of Yoast SEO Facebook - Open Graph tags Twitter - Twitter cards Google Plus - Google+ author and Google+ publisher Read More…
  • Business
    The Top WordPress Plugins You Need for Your Authority Blog5 preview authority blog wordpress plugins
    In the last post we got your blog setup with a unique-looking design courtesy of the Canvas theme framework. But aesthetics are just one piece of the puzzle -- in reality, any successful blog needs to function well in order to succeed. Although WordPress has great functionality out the box, its true power lies in its extensibility, which is exactly what we're going to cover today. I'm going to take you through the top WordPress plugins you can use to elevate your authority site to another level. We're going to cover everything from backups, to security, to search engine optimization, to post promotion and more. This step-by-step guide will show you how to install and setup each of the WordPress plugins I consider to be must-haves for authority site owners. Enjoy!Read More…
  • Code
    Quick Tip: After the Content - Share ThisAfter the content solid
    If we're saying that content is "king", social media might as well be the "queen". We can safely claim that social media is the most efficient way to spread the content around the web, in our time. In this post, we're going to cover how and why we should include a "Share This" section with our content.Read More…
  • Code
    A Guide on Using New Features of Jetpack 2.0Jetpack logo
    Jetpack by is a brilliant plugin which allows you to activate some modules that are ready to use on blogs. And with its recent release (v2.0), they added several very useful modules. In this article, we're going to go through them.Read More…