Integrating Twitter into WordPress: The Ultimate Guide

Integrating Twitter into WordPress: The Ultimate Guide

Twitter is one of the most popular social media networks online and one of the biggest sources of traffic for many websites. If one of your articles goes viral on Twitter, you could receive hundreds or even thousands of visitors in a short space of time.

The more you integrate social media into your website, the more likely it is that your visitors will share your content using social media. Therefore, by integrating Twitter into your website, you can tap into the huge traffic potential that it offers.

I recently shared with you a collection of the best social media WordPress plugins. Rather than simply list Twitter plugins that are available to you, in today’s article I would like to show you how other blogs are integrating Twitter, and other social media networks, into their website designs. This will help you understand how others are maximizing the traffic they receive from social media. I hope you find it useful :)

* While this article does focus on Twitter, due to the nature of social media, a lot of examples and suggestions incorporate other social media networks :)

Find out how other sites are integrating Twitter and check out our WordPress solutions.

Integrating Twitter and Other Social Media Follow Buttons

If you can turn a one-time visitor into a Twitter follower, you can display all of your tweets on their Twitter stream. This simple act of gaining another Twitter follower should not be underestimated. It could be the difference between someone forgetting about your website and them returning to your website on a daily basis for many years.

An increase in Twitter followers can greatly increase traffic due to retweets. This also leads to more people following you on Twitter.

Top websites understand this, which is why they prominently display Twitter follow buttons in their website headers. However, they all do it in different ways.

The Header Area

Huffington Post has follow buttons for Twitter, Facebook, and Google+, directly above the main navigation menu. Their website design is quite crowded due to the number of advertisements and featured posts that are displayed. Yet the sharing buttons can be seen at the top of every page of their website.

Huffington Post displays official social media follow buttons above their main navigation menu.

The ever popular I Can Has Cheezburger? displays a Facebook and Twitter icon at the top right of every page. These icons are actually part of the same image. When a visitor scrolls over the image, a drop down menu will appear with official follow links to Twitter, Google+, and Facebook.

I Can Has Cheezburger? displays official follow buttons in a drop down menu.

Both Huffington Post and I Can Has Cheezburger? have integrated official follow buttons into their header. The code for these follow buttons can be downloaded from the links below:

* Note that official follow buttons for other social media networks can be found on their respective networks.

Once you have the code for official sharing buttons, you can integrate the buttons into the desired area of your website header by modifying your theme’s header.php template.

A number of WordPress plugins are available that allow you to insert official follow buttons into your website. WPsite Follow Us Badges is one example. If your WordPress theme has a widget area in the header, you could use a plugin such as this to add official follow buttons directly into your header.

Twitter offers two sizes of follow buttons.

Boing Boing have taken a different approach. They have an item in their main navigation menu entitled “Follow Us”. When you hover over this menu item, links to Twitter, Facebook, and Tumblr, are displayed.

Boing Boing use their main navigation menu to promote their social media accounts.

DailyTekk uses the same technique as Boing Boing and displays links to Twitter, Instagram, and Pinterest, in the main navigation menu.

Unfortunately, these links are hidden in the subscribe menu. Visitors need to click on Subscribe and then scroll down to Social to see their social media links.

DailyTekk has not made promoting social media links a priority.

Adding links to your social media accounts into your main navigation menu is simple. Using the WordPress menu system, all you need to do is add a custom link and then drag it into the desired menu.

By using CSS, you can improve the look of the social media links in your navigation menu. For example, for Twitter you could make the background light blue and display the famous Twitter bird mascot.

The WordPress menu system is a simple and effective way of promoting social media profiles.

Rather than display social media follow links above or below the main navigation menu, technology news blog TechCrunch have integrated theirs into the center of the navigation menu area. The main menu links are displayed at the left hand side and a search box is displayed at the right hand side; however the follow buttons get priority in the center.

TechCrunch’s social media follow buttons become colorful when you hover over them.

Integrating social media follow icons into your header can be done in one of two ways:

One option is to download a social media icon set and upload the appropriate icons to your website. The CSS hover selector can be used to change the color of icons when a visitor hovers over one of your social media follow buttons. Using your own icon set is a great option as it allows you to choose the design you want for your icons i.e. you are not limited to what icons are included with a plugin.

Another option is to use a WordPress plugin. If your header has a widget area, you might prefer the simplicity of simply dragging and dropping a social media follow plugin into your header area. There are a lot of WordPress plugins available that allow you to do this.

The Sidebar

As I am sure you are all aware, one of the most popular places to promote a social network such as Twitter is the top of the sidebar. This is the area in which a large majority of blogs promote their social media accounts.

When social media following buttons are integrated directly into the header area, they are usually added around other important design elements such as the logo, a 728×90 advertisement banner, and navigation links. The sidebar offers a little more room, therefore buttons can be larger and you can use text if you wish. Many blogs use this additional space to promote how many followers they have.

As you can see from the top of the sidebar to the right hand side, WPMU DEV promotes how many followers and members it has. This social proof can encourage more people to follow.

WPMU DEV shows off how many followers it has.

The number of Twitter followers you have can be retrieved using the Twitter API and displayed as text. To do this, you need to add a custom function to your theme’s functions.php file. Similar functions can be created for other social media networks that you want to advertise follower counts.

You will sometimes see a website displaying their main social media follow buttons below the fold. For example, on a WordPress website the follow button for Twitter may be displayed in the 4th or 5th widget.

I am of the opinion that the main social media follow area should always be displayed prominently above the fold, however on small personal blogs it is less of an issue as there is less advertisements and other distractions in the website design.

The Footer

The footer is another place in which most websites display a link to Twitter and other social media accounts. If you scroll down to the bottom of WPMU DEV, you will our social media links displayed next to a search bar:

We display social media links at the bottom of every page.

Technology blog Engadget has a well-designed footer that displays important website links, social media accounts, their apps, and their newsletter.

Engadget also uses the footer to promote their social media accounts.

Even the WordPress.org website uses the footer area to display official follow buttons for Twitter and Facebook. In fact, it is the only part of their design that follow links are displayed. They are completely absent from the header and sidebar.

WordPress.org displays two small follow buttons at the bottom of their pages.

The majority of WordPress designs have a widget area in the footer, therefore adding follow buttons to this area is very simple. You can insert social follow buttons using the WordPress HTML widget or by using a social media follow widget. You could also use simple text links in your footer instead of using graphics.

Social media follow buttons can be integrated into other areas of your website. For example, WPMU DEV displays follow buttons underneath blog posts.

It is clear that different websites promote social media networks such as Twitter in their own unique way. I believe social media accounts should be displayed prominently in the header area or at the top of the sidebar. The footer is a good place to display a second link to your social media accounts.

Ultimately, the decision is yours, but please understand the benefits of placing follow buttons in a prominent position in your website design.

Displaying Tweets on Your Sidebar

A great way to promote your Twitter account is to display your latest tweets on your website. I have seen a few websites doing this in the footer, however I believe the sidebar is by far the most effective place to display your latest Twitter posts.

Food blog Chocolate & Zucchini displays its latest tweets using the official Twitter widget. In addition to tweets, the widget also displays a Twitter follow button.

Chocolate & Zucchini use the official Twitter widget.

You can create a new widget in the Twitter widget settings page on Twitter. The widget can be customized in a number of ways.

You can choose to exclude replies and auto expand photographs. You can also define the height of the widget, change the light theme to dark, and change the link colors.

By default, the widget will default to your main timeline. However, if you wish, you can display tweets you have favorited, lists, keywords, or collections.

The official Twitter widget tool is very easy to use.

The fashion blog The Sartorialist displays its last three tweets and a follow link underneath. The notepad style background would not fit in with a lot of other website designs, however it works well with the minimalist design of The Sartorialist.

The Sartorialist is a fashion blog that displays its latest tweets on the sidebar.

Custom functions can be created for retrieving your latest tweets from Twitter. You can find more information about this on the Twitter API information page.

As you would expect, instead of creating custom functions, most WordPress users use a WordPress plugin to display their latest tweets. There are a number of great solutions available including:

If you are active on Twitter, displaying your latest tweets can be a great way of encouraging more people to follow you. I would advise against displaying your latest tweets if you only use Twitter to update followers of new articles you have published. As the tweets would display the same information as a recent posts widget.

Integrating Social Media Sharing Buttons Into Your Website

Sharing buttons are vital if you want to tap into the huge traffic that social media offers. This is why all successful websites integrate sharing buttons into key areas of their design.

Pete Cashmore’s online magazine Mashable is a great example of this. His website design has been customized so that shares on Twitter and Facebook are maximized.

The total number of shares are displayed above the content area with links to Twitter and Facebook. If the visitor clicks on the + symbol, additional sharing links for Google+, LinkedIn, StumbleUpon, and Pinterest, are displayed (these additional links can be minimized with the – symbol). A graph is also displayed that tracks the popularity of the article over time.

At the left hand side of the main featured image are four more sharing links: Facebook, Twitter, Google+, and Pinterest.

Mashable place an emphasis on Facebook and Twitter.

Mashable ensures that visitors can easily share its content. When you scroll down the page to read the article, the header changes so that sharing buttons are displayed at all times.

Social media sharing buttons are displayed at all times.

Here on WPMU DEV, social media sharing buttons are displayed using a floating bar. This is powered by the WordPress plugin Floating Social.

The plugin supports Twitter, Facebook, Google +, Reddit, StumbleUpon and Del.icio.us. The bar can be styled to match your WordPress theme. It is also responsive so will move inline if you change the size of your browser window.

WPMU DEV displays a floating social media sharing bar at the left hand side of pages.

The most common place to display social media sharing buttons is above and below the content area. Some websites only display sharing buttons in one area; however I feel there are benefits to displaying buttons before after an article as it will increase the change of your article being shared.

I was inspired to use the plugin after seeing how my friend Brian Jackson uses the plugin on his website Okay Marketing. As you can see from the screenshot below, Brian has integrated the sharing buttons into his newsletter subscription box.

Easy Social Share Buttons supports over 20 social media networks and has 12 built in templates.

WordPress.org has a large number of social media sharing plugins. Once installed, sharing buttons can be automatically inserted into key areas of your website including posts, pages, archives, custom post types, widget areas, and floating at the side of pages.

Below is a small selection of social media sharing plugins you may want to consider:

Social Sharing by Danny is a beautiful sharing solution with a minimal design.

Be warned that many social media related plugins and solutions can increase your page loading times. This is particularly true for social media sharing plugins.

After you install a new social media button or widget on your website, test the speed of your website using a benchmarking service such as GTmetrix or Google PageSpeed.

It is also in your interest to check the markup validity of your website using the W3C Markup Validation Service; as many plugin developers do not adhere to standard coding practices.

Final Thoughts

I hope this article will inspire you to integrate Twitter and other social media websites into your website design. As you have seen, there are a number of ways in which you can integrate social media into your website.

You may want to consider hiring a developer to help you achieve what you want; as a custom solution gives you full control and allows you to be creative and do something truly unique. Official buttons and widgets available from Twitter and other social media networks are also a good option.

With so many social media plugins available to WordPress users, there is bound to be a good solution available that fits your needs. So be sure to test a few different options before settling on a particular solution.

How do you integrate Twitter into your WordPress website? Please let us know in the comment area below.

5 Responses

Great article Kevin. I also use easy social share buttons (from memory) but have styled them like Mashable. I just wanted to say I don’t think any article about Integrating Twitter into WordPress is complete without a passing reference to Twitter cards. (My apologies I may have missed it I am reading through pretty quickly).

Hi Kevin, no they need additional meta tags – either via plugin or function. Also you have to go through a quick test and approval process with Twitter so even if the meta tags were included they wouldn’t be activated without going through a 2 minute process. The same is true for Pinterest rich pins although the approval process appears more manual and takes days for approval.