I recently created shortcodes for Google +1 and Facebook Like and Send button. Finally, to my favorite as I have taken to Twitter over the last year. I now have 500+ random tweets. If your theme doesn’t support Twitter this is a good way to extend its capability. Just remember that when you upgrade your theme you will need to re-add the code to your functions file.
The code was built with Twitter API documentation. To understand all the capabilities this shortcode supports you may what to head over and check out the types.
1) Open your Functions.php file – Create if does not exist in root of template
Assuming you have more than average knowledge and the ability to edit theme files directly in WordPress. This file serves as an entry point for your custom code in WordPress 3.0. So if you have custom classes or external code you need to run within the WordPress context you will add the hooks and init() code blocks there. The file location is ( site/wp-content/themes/YOUR-Theme/functions.php ).
2) Add the Twitter Share Shortcode to WordPress
Highlight the code box below and copy / paste in the functions.php file.
function twitter( $atts, $content=null ){
/* Author: Nicholas P. Iler
* URL: http://www.ilertech.com/2011/07/add-twitter-share-button-to-wordpress-3-0-with-a-simple-shortcode/
*/
extract(shortcode_atts(array(
'url' => null,
'counturl' => null,
'via' => '',
'text' => '',
'related' => '',
'countbox' => 'none', // none, horizontal, vertical
), $atts));
// Check for count url and set to $url if not provided
if($counturl == null) $counturl = $url;
$twitter_code = <<<HTML
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="$url"
data-counturl="$counturl"
data-via="$via"
data-text="$text"
data-related="$related"
data-count="$countbox"></a>
HTML;
return $twitter_code;
}
add_shortcode('t', 'twitter');
3) Add to Template Page with Shortcode
This is the most versatile way of adding the final piece of code. The shortcode.
Example 1
Fastest – Use for Single Pages auto detects page title and URL. Note: If title is too long tweet box will not work. Goto example 3 for trim function.
<!-- Twitter Share Shortcode -->
<?php echo do_shortcode("[t]"); ?>
Example 2
Slightly more overhead if you want to use in on the front page while inside the WordPress loop:
<!-- Twitter Share Shortcode - Get current link in loop -->
<?php echo do_shortcode("[t url='get_permalink();']"); ?>
Example 3
This is a more solid function that will get the WordPress URL and trim the title to 115 characters. It also works on the front page.
I have some pretty long titles here at ilertech.com, so a few of my share boxes required people to remove some text in order to submit to Twitter. You can change that to whatever you like.
Put this into your functions.php, than call it with “twitter_share()” in your template files.
<?php
function twitter_share(){ // (Must be called while in the loop)
/* Author: Nicholas P. Iler
* URL: http://www.ilertech.com/2011/07/add-twitter-share-button-to-wordpress-3-0-with-a-simple-shortcode/
*/
// Get the title and url of posts and pages
$title = get_the_title();
$url = get_permalink();
// Shorten title if its too long
if(strlen($title) < 115){
$shortenedTitle = substr($title, 0, 115);
$shortenedTitle .= '...';
}
echo do_shortcode("[t url='$url' text='$shortenedTitle']"); // Shortcode
}
?>
Call it from within the WordPress loop,
<?php twitter_share(); ?>
Shortcode Usage Examples
[t]
No settings.
[t related='nickiler: PHP Programmer and WordPress Hacker, ilertheme: Premium WordPress Themes']
This version displays @nickiler and @ilertheme as related accounts with description after the tweet to allow tweeters to follow your other accounts. Check screenshot:
Note: Adding a ‘via’ perimeter automatically displays the account and recommends the tweeter follow you.
[t countbox='horizontal']
[t countbox='vertical']
In #7 – the tweet button – there must be an error somewhere in this part of the code because I get a “Parse error: syntax error, unexpected T_SL” message in that line
$twitter_code = <<<script src="http://platform.twitter.com/widgets.js" type="text/javascript"><!--mce:0--></script>
<a class="twitter-share-button" href="http://twitter.com/share"></a>
HTML;
return $twitter_code;
}
I googled for that parse error message and, apparently, this is a whitespace problem in the <<<script…-part of the code. But I could not fix it. Any ideas?
Hey Friiitz, Thanks allot for catching this! Are you by chance using Chrome or Safari?
Possibly, recent updates to WordPress Core have thrown the code example out of whack. Some strange characters were added, and not 100% sure how or why. I also noticed while testing that double-clicking the code while using Chrome or Safari adds bad markup to all my examples, and will not work. If you instead just highlight the code in Chrome its seems to work just fine.
I updated the code sample to remove the bad characters and now its fine… Again thanks for the catch !-)
Man you’re awesome. Best of luck in all u do. And keep it up 2.
Thanks Tomas, Appreciation like this makes me wanna add more articles.
I can’t seem to be able to call this in my loop — I’m really trying to use the vertical box example — do i put the shortcode or the <?php in the loop — I've tried both and nothing seems to work!
N
As long as you add the shortcode to your functions.php file wrapped in < ?php CODE ?>, it should respond to the function call.
If you want to add the shortcodes directly to your templates, which is the easiest you need to use the do_shortcode() function. I would highly recommend using the third example and just call the function without do_shortcode().
This code will only work correctly inside the loop. (last I tested)
Thanks very much for this, I’ve been battling with plugins to get them to work but this was so much easier!
Hey! I’m also having the same issue as Friitz. Is there any chance that you might check on these now with 3.4 released? I’ve opened other browsers and tried to make the code work, but regardless of the source, I get errors around lines with:
<<<<HTMLandHTML;I just upgraded the site to the latest version of WordPress and everything looks fine. I think the editor I’m using on the site has some bugs. Here is replacement code without the HERE statement:
Awesome! This totally fixed the problem! Thank you thank you thank you!
For anyone else who just wants to copy and paste, make sure to remove the errant at the very end, it looks like that might be part of the bug issue.
Great! I’m glad it worked for you. I also removed the random “code” tag that was at the end
Hi Liz, I’ll update the site tonight to 3.4.1 and test it. Nick