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 :)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A simpler approach to displaying counts is to use a WordPress plugin. There are a lot of good options available, including free counter solutions such as Social Media Followers Counter and Social Count Plus; and premium solutions such as SocialFans and SocialBox.
Promoting the number of followers you have is not always necessary. Displaying basic social media icons on your sidebar can be just as effective.
American journalist Jeff Jarvis has integrated four social media icons on his website BuzzMachine. It fits well with his minimalist blog design.
As I noted earlier, there is an abundance of social media follow plugins available on WordPress.org and on other WordPress marketplaces. This includes:
- Simple Follow Me Social Buttons Widget
- Social Media Feather
- Social Media Widget
- Social Media Widget by Acurax
- Social Media Tabs
- POWr Social Media Icons
- Social Media Badge Widget
- Round Social Media Buttons
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 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:
Technology blog Engadget has a well-designed footer that displays important website links, social media accounts, their apps, and their newsletter.
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.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
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.
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.
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 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.
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:
- Twitter Timeline Widget (included in Jetpack)
- Rotating Tweets
- Fetch Tweets
- Recent Tweets Widget
- Latest Tweets Widget
- Tweet Master
- Juiz Last Tweet Widget
Most Twitter plugins require you to enter four unique Twitter keys. These can be acquired from Twitter Application Management.
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 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.
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.
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.
Official sharing buttons are available for all social media networks. The official share button for Twitter can show the number of shares of a particular page.
Other official social media sharing buttons also display the total number of shares. The code for official sharing buttons can be found at the following pages:
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.
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:
- Jetpack Sharing(included in Jetpack)
- Social Share Button
- Social Sharing by Danny
- Floating Social Bar
Social Sharing by Danny is a solution I have used in the past many times. I love its minimal style.
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.
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.
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.