How to display the latest tweet from a staff member on their bio page in WordPress

Why bother with this?

Our research has confirmed again and again that some of the most commonly visited pages on websites are those that pertain to the people who work there. This fact often perplexes and even frustrates many web marketers because they are rarely the pages that webmasters WANT people going to. That is to say that most people don’t build a site to show off the bios of their employees but to sell products and services. Bio pages can, of course, help with this a little but as far as conversion goes, they are not the strongest.

But despite the fact that we’d often prefer that visitors spend time checking out our services and products and doing what we want them to do, many visitors will inevitably spend a lot of time pouring over our staff bios. For this reason, it behooves us to make them worthwhile.

And…what are we doing?

One thing that we have found to be very effective in engaging visitors and keeping our site’s pages looking fresh and interactive is to integrate social media. This can start with some social sharing and follow buttons as well as some feeds like the one you’ll see in the footer of our site that give visitors an opportunity to connect more with your company and gives them a sense that you are active and engaging.

But what about the staff bio pages? We established that they are some of the most commonly visited pages on the average website so what can we do to set them apart? Perhaps an integration of each staff member’s social activity could do the trick.

At least this is what we think and this is why we opted to bring in some Twitter activity for each member of our team on their bio page so visitors can see what each person is up to and talking about in a fresh, engaging way. If you want to see the end result, just visit the bio page of any team member listed on the Real Big Marketing staff page.

1. Set up your staff pages

We really wanted to make our staff pages useful to our visitors and worth checking out so we used a plugin called CustomPress to create a custom post type called “Employees”. Then we used CustomPress again to create a custom field call “Twitter Username”. This way we can write up bios for each staff member and simply insert their username into a field. Nothing fancy yet.

2. Create your custom post template

We could probably do a tutorial on this at some point in the future but for instructions on creating your own custom post template visit this how to. It’s pretty good as is this one.

Why create the custom post type and template?

There are technically a variety of ways that we could choose to accomplish our end goal of displaying the latest tweets. However, it is important to me that the process creating the bios is simple and intuitive, plus I have loads of customizations to make to the staff pages that don’t belong on any other pages. So it makes sense to have a post type for staff and an obvious field for entering a Twitter handle and it makes my job easy to have one PHP file to modify with all of my staff related tweaks.

3. Setup Latest Tweets plugin

1) We’ll start by installing the Latest Tweets plugin. For what we are about to do we will be needing version 1.1.0 of this plugin which at the time of this writing has not yet been released. So all we have to do is download the development version of the plugin under the Developers tab and we are golden.

Once downloaded we can upload, install and activate the plugin within WordPress.

2) Next we need to create a Twitter App and obtain our API keys. Once we have completed the setup for the app, we need to go to our site’s Dashboard – – > Settings – – > Twitter API and enter all four keys. Once this is done, our Twitter requests will be authenticated and will work with the Twitter API 1.1.

create-twitter-add

4. Throw in the code!

Time to really get our hands dirty. The first thing we want to do is determine where we want to display the latest tweet and then throw in the necessary script to make it show up. After that we’ll spruce it up a bit.

[toggle title_open=”Old way (no longer works)” title_closed=”Old way (no longer works)” hide=”yes” border=”yes” style=”default” excerpt_length=”0″ read_more_text=”Read More” read_less_text=”Read Less” include_excerpt_html=”no”]

This method for displaying content from Twitter was stopped by Twitter in June of 2013. Now all content requests must be authenticated.

1) We’ll start by inserting the necessary scripts to get the info from Twitter (special thanks to webdesigndev):


<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?count=1&exclude_replies=true&screen_name=[username_here]&callback=twitterCallback2"></script>

2) Then we can grab our custom field value which will contain the username of the staff member:


<?php

$stafftwit=get_post_meta($post->ID,'ct_Staff_Twit_text_abd5',true);

?>

Here I simply created a PHP variable called $stafftwit and set it to be the value of the custom field ‘ct_Staff_Twit_text_abd5’.

3) Throw the PHP variable into the Twitter API call.


<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?count=1&exclude_replies=true&screen_name=<?php echo $stafftwit; ?>&callback=twitterCallback2"></script>

This is the same code as above, only I inserted the PHP variable $stafftwit where the username should be.

4) Throw in some HTML for displaying. This is my final code in my staff.php template:

<?php $stafftwit=get_post_meta($post->ID,'ct_Staff_Twit_text_abd5',true); ?>

<div class="latest_tweet">
<div class="twitter">t</div>
<h4>Latest tweet:</h4>
<div id="twitter_update_list"></div>
<?php echo do_shortcode("[tweets max=1 user=".$stafftwit."]"); ?>
<a href="https://twitter.com/<?php echo $stafftwit; ?>" class="twitbutton">@<?php echo $stafftwit; ?></a>
</div><!--latest_tweet-->

[/toggle]

1) We will now open up our new staff post template and start inserting our code where we want the tweets displayed. First lets grab our custom field value which will contain the username of the staff member:


<?php

$stafftwit=get_post_meta($post->ID,'ct_Staff_Twit_text_abd5',true);

?>

Here I simply created a PHP variable called $stafftwit and set it to be the value of the custom field ‘ct_Staff_Twit_text_abd5’.

2) Put in some PHP to render the shortcode from the Latest Tweets plugin (this is why we needed version 1.1.0). I also set it to display only one tweet.


<?php echo do_shortcode("[tweets max=1]"); ?>

3) Throw the PHP variable into the shortcode.


<?php echo do_shortcode("[tweets max=1 user=".$stafftwit."]"); ?>

This is the same code as above, only I inserted the PHP variable $stafftwit where the username should be.

4) Throw in some HTML for displaying. This is my final code in my staff.php template:

<?php $stafftwit=get_post_meta($post->ID,'ct_Staff_Twit_text_abd5',true); ?>

<div class="latest_tweet">
<div class="twitter">t</div>
<h4>Latest tweet:</h4>
<div id="twitter_update_list"></div></pre>
<?php echo do_shortcode("[tweets max=1 user=".$stafftwit."]"); ?>
 <a href="https://twitter.com/<?php echo $stafftwit; ?>" class="twitbutton">@<?php echo $stafftwit; ?></a>
<pre></div><!--latest_tweet-->

5) Style with some CSS:

.latest_tweet {
float: right;
width: 200px;
color: rgb(126, 179, 196);
font-style: italic;
font-size: 14px;
}
.latest_tweet h4 {
color: #BBB;
margin: -50px 0 0 0;
}
.latest_tweet h4, #twitter_update_list {
position: relative;
}
.latest_tweet a {
color: #8B9BAF;
}
.single-staff .services_more .col-right {
width: 340px;
}
.latest_tweet .twitter {
font-family: JustVector;
font-size: 190px;
color: #F0F0F0;
margin: 0px 0 0 -42px;
}
a.twitbutton {
font-size: 11px;
color: #D1D1D1;
font-weight: bold;
}
a.twitbutton:hover {
color: #8BA1BD;
text-decoration: none;
}
.latest-tweets ul li p, .latest-tweets ul {
margin: 0 0 0.7em 0;
}

And there you have it! This is basically all I did to get the latest tweet displayed for each staff member. You may notice some interesting things here like the usage of a vector font for the Twitter icon I placed behind the tweet. That’s just making things a little more fun.

I hope you find this simple tutorial helpful. Please leave some comments if you have any questions or suggestions on how this could be improved and what other topics might be useful to cover. Thanks for stopping by!

How to Say “Thank You” – Infographic

Supporting local, small businesses is an integral part of what Real Big Marketing is all about. It is why we love what we do and what made us want to do it in the first place. Every day, we get to help our clients grow their businesses and watch them achieve the success they have always dreamed about. It is truly special.

But the truth is, it doesn’t take a professional company like us to promote a business. We are able to do many things for our clients to ensure their success, but the ultimate promoter for any company is YOU! That’s right, YOU actually have tremendous power to help or hurt any business you have had an experience with.

We have such a passion for helping other businesses grow that we always encourage everyone we know to go the extra mile when it comes to thanking those who have provided us with great products and services. They deserve our gratitude and it goes a long way.

Now we have all heard the phrase “support local businesses”, but what exactly does that mean? To many it means simply buy products and services from local companies. This is, of course, an excellent thing to do. But is there more? Are there are other, easy ways we can show our support and appreciation to those who make our communities a better place? We believe the answer is yes, which is why we put together this infographic illustrating many easy ways that we are able to positively affect those businesses that we love. This can include so many things that take only seconds to do such as a Facebook “Like”, following a Twitter account, commenting on a video, sharing on social media sites or giving a star rating on a business review site. We strongly encourage you to reflect on this and consider taking a few moments of your time to help your favorite local businesses.

 

B2B-handout

Feel free to share this with anyone and remember that is you really are thankful for a business, it is very easy to show it.

Great Twitter Management Tool

[box type=”note”]Important note: This is an older post and some of the features described here are no longer supported by Tweetadder.[/box]

Tweetadder: The Power of Automated Network Building

For the past several months, we have been trying out a popular Twitter automation program called Tweetadder. What Tweetadder does is allows you to automate a number of important tasks related to your Twitter accounts. It is truly a fantastic program for marketing on twitter. Here is my review thus far:

Tweetadder review

Features include automation that allow you to:

I manage a large number of accounts and Tweetadder has been magnificent so far at handling them all. It is a local program that you install on your computer, rather than a web based program such as Hootsuite. This has advantages and disadvantages but for the most part I am happy with. I like the fact that it is a one time purchase and not something you must subscribe to monthly.

What I primarily use this program for is helping grow the network size of my accounts. To do this, you create some automated searches for keywords relating to your account. Then you automate the number of follows and unfollows per day. Lastly I automate the thank you messages to send out something polite and relevant to each account.

In the end, once everything is configured, all I do is look at the program now and then. It makes me smile every time. Every account grows very quickly and I do almost nothing. I do use Hootsuite for actually tweeting but Tweetadder can be an effective tool for that as well if you want to do it all in one.

I have had to contact support several times about a few issues but each time they responded to me in a reasonable time frame and were able to solve my problems.

The two biggest drawbacks are rooted in the fact that it is a local and not a web based application. Because of this, your computer must be on for Tweetadder to do anything. Also, collaboration is difficult because your settings will be stored on the computer. They can be transferred to other machines but it has to be done manually. Plus you only get two or three licenses.

In conclusion, Tweetadder is a very helpful program for anyone who manages multiple accounts and wants to grow a large, relevant following.