Tutorial: Turn Your Blog Feed Into Click to Tweet Buttons

click-to-tweet-blog-post-feed
I do a lot of custom WordPress themes and I’ve had a lot of requests from clients who dream up cool functionality. When someone brings an idea to me, I always do my best to figure out a way to make it possible. In fact, it’s these times when I enjoy my job the most – discovering creative solutions to make cool, highly-functional stuff on the web!

On a recent project, the client asked if we could turn the actual posts in a blog feed into “click to tweet”buttons, making them easily shareable. For this website, we were working in the Divi Theme, so it took a little more digging through code than if I were developing a custom wordpress theme from scratch. For the purposes of this tutorial, I’ll show how to set up the default blog loop to incorporate “click to tweet” calls to action.

I found this wonderful tutorial from Zoe Rooney on how to create a “click to tweet” link which gave me a huge head start. I took it a step further to incorporate it dynamically into the WordPress blog loop.

1. Include Twitter Javascript

Make sure to include this line of code in your header between the head tags.

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

2. Create a custom field

For each post, we’ll be specifying the tweet message using a custom field. Name the custom field “tweet” and enter the tweet message under “Value.” You will need to specify the message you want to use within each post. We can then pull the tweet message into our code in the next step.

click to tweet custom field

3. Build the dynamic tweet URL

A click to tweet URL will always begin with

https://twitter.com/intent/tweet?

You can add more content to the tweet by using the following parameters separated by &:

  • url
  • via
  • text
  • hashtags

So if I was building a tweet URL for this post, I would start with this:

https://twitter.com/intent/tweet?text=Tutorial: Turn Blog Posts Into Click to Tweet Buttons&url=http://customtaylor.com/2015/05/tutorial-turn-blog-posts-into-click-to-tweet-buttons&via=iluvpinkerton

However, Text and URLs must be encoded to function properly. There are free encoding tools available which helped me turn the above URL into this:

https://twitter.com/intent/tweet?text=Tutorial%3A%20Turn%20Blog%20Posts%20Into%20Click%20to%20Tweet%20Buttons&url=http%3A%2F%2Fcustomtaylor.com%2F2015%2F05%2Ftutorial-turn-blog-posts-into-click-to-tweet-buttons&via=iluvpinkerton

The use of an encoding tool is great if you’re building one specific link. But for our purposes, we need to do this dynamically. Since our code is running within the loop, we will can pull in the required parameters from each post and wrap them in an encoding function urlencode.

$permalink = urlencode(get_permalink($post->ID));
$tweet = urlencode(get_post_meta( get_the_ID(), 'tweet', true ));

4. The full loop

The finished blog loop will look something like this:

<?php
 while ( have_posts() ) : the_post();
 
 $permalink = get_permalink($post->ID);
 $tweet = urlencode(get_post_meta( get_the_ID(), 'tweet', true ));
 $tweet_text = get_post_meta( get_the_ID(), 'tweet', true ); 
?>

<a href="https://twitter.com/intent/tweet?text=<?php if( ! empty( $tweet ) ) { echo $tweet; } ?>&url=<?php the_permalink(); ?>&via=iluvpinkerton">
 <div class="tweet_text">
 <?php if( ! empty( $tweet_text ) ) { echo $tweet_text; } ?>
 <div class="tweet_it">(Tweet This!)</div>
 </div>
</a>

<?php endwhile; ?>

There are a number of ways to customize this. For instance, if you have multiple authors on your blog, you could use a custom field to pull in a custom author’s twitter handle. And of course, you can always change the styling to control the layout, colors, etc.

a.tweetBtn {
	display: block;
	height: 140px;
	width: 200px;
	background: #B7DADD;
	color: #000;
	text-align: center;
	padding: 20px;
	text-decoration: none;
	float: left;
	margin-right: 10px;
}

You can see the finished product in action here.

About the author

I’m Taylor and I help intentional entrepreneurs like health coaches and yoga teachers transform their vision into an enlightened website to help them grow their businesses, build a tribe, attract ideal clients and create the lifestyle they dream of. Read more…