Pop Up Image

Get the Full PDF guide to creating an online store with WooCommerce (88 pages) for FREE

A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Implement a Quote Shortcode with Twitter and Facebook Buttons

How to Implement a Quote Shortcode with Twitter and Facebook Buttons

Getting traffic from Twitter and Facebook is awesome. It shows that people enjoy your content because otherwise they wouldn’t be sharing it!

Some traffic you can get from the usual social plugins, but what about implementing a quick shortcode that lets people share quotes from your posts?

Maybe it can help you get more social traffic just like it helped us get more social traffic.

Implementing the Basic Quote Shortcode

First of all you need some quotes that are worth sharing, but you also need to make the quotes stand out, so your readers will actually spot the quotes.

Your quotes can for example stand out like this:

Quotes

The easiest way to get that effect is by putting the quotes in a shortcode.

If you use the great plugin Shortcodes Ultimate, you can just surround your quotes with [su_quote][/su_quote].

If you also want the horizontal lines above and below the quote, you should also add <hr> tags around the [su_quote] shortcode.

To make things easy, you can put the [su_quote] shortcode and the <hr> tags together in a new shortcode by adding this code to functions.php in your child theme:

add_shortcode('bhs_quote', 'bhs_quote');
function bhs_quote ($atts) {
return "<hr>[su_quote]" . $atts['quote'] . "[/su_quote]<hr>";
}

After adding the code, you can just surround your quote with [bhs_quote][/bhs_quote] to get both the [su_quote] and the <hr> effects.

Make sure you add the code to the functions.php in your child theme. Don’t add it to the parent theme functions.php as that file will be overwritten when the theme is updated.

The Shortcodes Ultimate plugin is highly recommended, but if you haven’t got it you can also create a div with a CSS class that you can wrap your quotes in.

Like this + some CSS that matches your theme and desired style:

function bhs_quote ($atts) {
return "<div class='quote'>" . $atts['quote'] . "</div>";
}

Adding Social Buttons to the Shortcode

The quotes in your posts are now standing out so they are easy to see. That’s great, so now it’s time to make it easy for people to share the quotes.

To make sharing easy, you can add Facebook and Twitter buttons to your shortcode like this:

Adding social buttons to the shortcode

The quote screenshot above is from this interview if you want to check the shortcode and the buttons out live.

Implementing the Twitter Button

Let’s take a look at the Twitter button first.

It’s quite easy to implement as Twitter has an API that you can access with the use of a structured url. To test it out, you don’t need to start up Postman or anything like that. All you need to do is to copy-paste the url into your browser:

Implementing the Twitter button

Building a url in PHP isn’t difficult. All you need to do is to write a function like the one below that generates a button that links to the Twitter URL.

Depending on your theme, you might have a built-in shortcode for adding buttons. If you for example use the Flatsome theme, you can use [button] shortcode like this:

function bhs_twitter_get_button($text) {
$url = "https://www.bulkhackers.com" . $_SERVER['REQUEST_URI']; 
$twitter_link = "https://twitter.com/intent/tweet?text=" . urlencode($text) . "&url=" . $url . "&via=bulkhackers";
$output = "[button text='Tweet This' letter_case='lowercase' size='small' icon='icon-twitter' icon_pos='left' link='" . $twitter_link . "' target='_blank']";
return $output;
}

The code should be added to the functions.php file in your child theme just like the shortcode code we wrote earlier.

If you haven’t got Flatsome or some other theme with a built-in button shortcode, you can create a button like this:

<button onclick="location.href='" . $twitter_link . '" type="button">Tweet This</button>

The Twitter button should be part of the shortcode, so call the new bhs_twitter_get_button function should be called in the quote shortcode and the return value of the function added to the shortcode output:

function bhs_quote ($atts) {
return "<hr>[su_quote]" . $atts['quote'] . "[/su_quote]" . bhs_twitter_get_button($content) . "<hr>";
}

It’s worth noting that Twitter automatically shows the post image when your readers share a quote this way.

Twitter button

Implementing the Facebook Button

Not everybody uses Twitter, so you should also add a Facebook button to your quote shortcode.

Just like with Twitter, Facebook has an API that you can access with the use of a structured url. And just like with Twitter, you can test things out in your browser:

Implementing the Facebook button

The strategy for doing the Facebook button is the same as with the Twitter button.

First you need to write a function that generates a button that links to the Facebook url:

function bhs_facebook_get_button($text) {
$url = "https://www.bulkhackers.com" . $_SERVER['REQUEST_URI']; 
$facebook_link = "https://www.facebook.com/sharer/sharer.php?u=" . urlencode($url) . "&quote=" . urlencode($text);
$output = "[button text='Share This' letter_case='lowercase' size='small' icon='icon-facebook' icon_pos='left' link='" . $facebook_link . "' target='_blank']";
return $output;
}

The function is then added to the quote shortcode and add the return value to the shortcode output:

function bhs_quote ($atts) {
return "<hr>[su_quote]" . $atts['quote'] . "[/su_quote]" . bhs_twitter_get_button($content) . bhs_facebook_get_button($content) . "<hr>";
}

Just like Twitter, Facebook automatically shows the post image when a quote is shared.

Facebook button

Twitter and Facebook Images

Most blog posts have a featured image that is used when the post is shared on Twitter and Facebook.

If there’s no featured image, the first image in the post is usually grabbed by Twitter and Facebook when the post is shared.

But you can also add a bit of code to make Twitter and Facebook use other images when a post is shared.

That’s what we have done to get our avatar images to show up in the Twitter and Facebook screenshots above.

If you want a different image to show up, you have to focus on these two tags in your source:

<meta property="og:image:secure_url" content="https://www.bulkhackers.com/wp-content/images/stan-efferding-facebook.png" />
<meta name="twitter:image" content="https://www.bulkhackers.com/wp-content/images/stan-efferding-twitter.png" />

A good SEO plugin can help you generate such tags, but you can also code them yourself and thereby set what images are used when a post is shared.

Most people seem to use the Yoast SEO plugin, so let’s take a look at implementing some Yoast SEO filters for setting up our Twitter and Facebook images.

Like this for the Twitter image:

add_filter( 'wpseo_twitter_image', 'bhs_yoast_image_twitter' );
function bhs_yoast_image_twitter( $image ) {
return "https://www.bulkhackers.com/wp-content/images/stan-efferding-twitter.png";
}

And for the Facebook image which uses the opengraph image:

add_filter( 'wpseo_opengraph_image', 'bhs_yoast_image_opengraph' );
function bhs_yoast_image_opengraph( $image ) {
return "https://www.bulkhackers.com/wp-content/images/stan-efferding-facebook.png";
}

The functions above are just templates to show you what filters you should implement. You should of course not just return the same image for every post you have.

Depending on your exact needs, you will probably need some logic to get specific images for each post.

Share Buttons Everywhere

So that’s it. It’s not that difficult a coding task to implement a quote shortcode with share buttons.

But why only help people share quotes?

Depending on your site, your readers might want to share what they brought in your Woocommerce shop. If you have contributors, maybe they want to share something about their contributions, etc.

The possibilities are endless – and in the game of traffic, every little thing helps in order to spread the word about your site!

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply