WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Add Twitter @anywhere in WordPress

How to Add Twitter @anywhere in WordPress

Last updated on October 12th, 2012 by Editorial Staff
92 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Twitter @anywhere in WordPress

Twitter launched it’s @anywhere platform not too long ago. This new platform integrates twitter into your site with a few lines of JavaScript. It allows for more tweets, more traffic, more follows, more engagement, more users, and more insight. You can now embed a tweet box on your site where people can directly tweet from your site. It also converts all twitter usernames to a link (@wpbeginner). If you enable the hovercard option, then users will see a hover box with a follow button and user information. You can also create connect with twitter buttons, follow @wpbeginner on twitter buttons and much more. We think this new platform will play a huge part in the future of web as twitter grows. In this article, we will share how you can add some elements of Twitter’s anywhere platform on your WordPress blog.

Update: Twitter is turning off @anywhere API on Dec. 6th, 2012. Here is more details.

Step 1: Registering an API

Before you can add the anywhere platform on your site, you need to register an API. You will be prompted to a page which would look like this:

Register a Twitter API for the Anywhere platform

Once you register, you should receive an API key. Next thing you want to make sure is that the permission level is set to Read and Write, otherwise users would not be able to click the follow button. This is a glitch with twitter, but they are working on it to fix this. But to stay on the safe side, we will provide the directions on how to do this.

First click on the link http://twitter.com/oauth. On this page, you will see the application that you registered. Click on your application’s name, and it should take you to the application details page. There is a button called “Edit Application Settings”. Click on this button to go to the edit page where you will need to scroll down to the item labeled “Default Access type”. Change this to “Read & Write”.

Step 2: Implementing it on your site

Because there are numerous features in the anywhere platform, we will explain each of them one by one. First thing you need to do is call the main JavaScript. Twitter recommends that you place this script in your header.php file (<head>In between these two codes </head>).

<script src="http://platform.twitter.com/anywhere.js?id=YourAPIKey&v=1" type="text/javascript"></script>

Remember to add your API key where it says YourAPIKey in the link.

Now lets take a look at the individual features this platform can do for you.

Auto-Link all Twitter usernames

This function will auto-link all twitter usernames on your posts and comments. If you mention a twitter username in this format: @wpbeginner << It will automatically be linked to the appropriate twitter account. This can save you a lot of time if you write posts with mentions to twitter users. To add this feature, you simply paste the following code in your site's header, after the main script. [php] <script type="text/javascript"> twttr.anywhere(onAnywhereLoad); function onAnywhereLoad(twitter) { twitter.linkifyUsers(); }; </script> [/php] This will link all twitter usernames mentioned in your body tag excluding the links, scripts, iframes, text area, title tags, and other buttons.

Auto-Link all Twitter usernames with a Hovercard

Auto-Link all Twitter usernames with a Hovercard

This feature auto-links all twitter usernames found on the page, and it also provides a hovercard on a mouseover effect. So when your site’s user bring the mouse over to a username like @wpbeginner they will see a hoverbox like shown in the example above. If they click the follow button, then they can directly follow the user from your website. To enable this function, simply paste the following code in your site’s header below the main script.

<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.hovercards();
};
</script>

Smart Follow Buttons for Twitter

Smart Follow Button for Twitter

Smart follow button lets your user follow your account directly from your site. You can create buttons for your site and use them in your post or anywhere else. See the live example below:

To add this type of button your site, first paste the following code in your site’s header below the main script:

<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter('#follow-wpbeginner').followButton("wpbeginner");
};
</script>

Second, you need to add the following div tag where you want this button to show:

<div id="follow-wpbeginner"></div>

Remember to change wpbeginner to your username otherwise it will show a follow link to our twitter account.

Live Tweet Box on your site

You can create a tweet box on your site which will allow users to directly tweet from your site without ever going on twitter. An example of this box can be seen below: (Remember if you click tweet, it will tweet).

Try tweeting from the live box above to see how cool it is. We would really appreciate if you tweet the default content, so it helps us :)

Well as you can see that this live tweet box is really powerful. You can even add Retweet text in there if you want with slight customization. To add a live tweet box on your site, first paste the following code in your site’s header after the main script:

<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter("#custom-tweetbox").tweetBox({
label: "Live Tweet Box:",
defaultContent: "Everyone should follow @wpbeginner for awesome #WordPress tips",
height: 50,
width: 480,
});
};
</script>

Then add the following code where you want to display the live tweet box:

<div id="custom-tweetbox"></div>

We see that there are already few plugins in the WordPress plugin directory that lets you use the basic features such as hover card, or auto-link. You can use those plugins if you want, but this is something so simple that you are better of placing the codes manually.

If you liked this article then please retweet it. If we missed anything then please let us know in the comments.

Additional Resource:

Twitter Anywhere Documentation
Simple Twitter Connect Plugin (Great plugin by a supportive author – Thanks Otto)

92 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

57 Comments

Leave a Reply
  1. Rajesh Namase says:
    Sep 20, 2012 at 3:30 pm

    Twitter will turn off @Anywhere on December 6th, 2012, check this: https://dev.twitter.com/blog/sunsetting-anywhere :(

    Reply
  2. DocteurTweety says:
    Nov 23, 2011 at 9:45 am

    Hi all,

    Probably I have a basic question but I don’t find solution for issue that I meet.

    I’m using retweet-anywhere WP pluggin and I open TweetBox whe I click on a link in using this code <a target=”_blank” href=”” title=”Retweeter ce message” rev=”RT ‘.$tweets15[$i].’ (via @’.$tweets2[$i].’)”>Retweeter</a>

    When I click on “Tweet” button in the opened dialogbox after changing the texte it works well if I’m already Logged in Twitter thru https://oauth.twitter.com/2/authorize.

    My issue is if the elapsed time of 2 hours is reached when I clikc on “Tweet” button the call of https://oauth.twitter.com/2/authorize.?…. is openned in the current windows and not in popup so even if the redirection is good I loose information in my application. Is that possible to force the call of https://oauth.twitter.com/2/authorize.https://oauth.twitter.com/2/authorize?… in a popup in that case?

    many thank for your help.

    Joel.

    Reply
  3. Rudolf says:
    Aug 15, 2011 at 3:21 pm

    Help me I cannot make hovercard work. I`m using a plugin called simple twitter widget for display my recent tweets. I paste the code above but It doesn`t work. Could someone give me some advice?

    Reply
  4. iamdesigning says:
    Jul 14, 2011 at 9:10 pm

    Nice tut, that people must to know ! I found this post to be an effectual informative article !

    Useful for me at this time : ) Thanks for your sharing your tips . . . !

    Reply
  5. WindowsTalk says:
    Jun 13, 2011 at 8:39 am

    Great WordPress/Twitter tip! Thanks!

    Reply
  6. juliet says:
    Jun 13, 2011 at 2:18 am

    I’ve been looking for this kind of twitter button and I’m just glad I’ve found it here. You made my blogging life so simple. Thanks a lot!

    Reply
  7. HarrySehgal says:
    Jun 10, 2011 at 12:09 am

    Thanks It was a Nice Post. I was looking to add Twitter Button on a Specific Location. Thanks for This Post.

    Reply
  8. KQuandry says:
    Jun 2, 2011 at 1:07 pm

    Good job… I like this a lot. Your article made this so much easier than others I have seen. Thank you. @kquandry of kquandry.com

    Reply
  9. Rajesh says:
    Apr 10, 2011 at 9:24 am

    Great article, I am looking for it last few days, thanks :)

    Reply
  10. Paul says:
    Feb 1, 2011 at 9:57 am

    Great post with great info. It doesn’t look all that easy … but I’ve bookmarked this page and look forward to giving it a try ASAP.

    Does anyone know of a free downloadable plugin that does the same thing?

    Thanks.

    Reply
  11. Kuzmanov says:
    Jan 5, 2011 at 5:11 am

    Really great article. Thanks for sharing.
    But… I’m trying to implement Live Tweet Box on my site and it doesn’t work. I have registered API, enter the JS code in my header and when I’m trying to add the live box in my post it doesn’t show up.

    Reply
    • Editorial Staff says:
      Jan 6, 2011 at 10:17 am

      That’s weird… have you specified the right Div ids?

      Reply
      • Kuzmanov says:
        Jan 7, 2011 at 6:13 pm

        Yes, I was and I’m pretty sure… but it showed after few hours :). Thanks for the great tips and keep up the good work.

        Reply
  12. Konstantin says:
    Dec 27, 2010 at 10:28 am

    Is Twitter Anywhere down currently? It doesn’t work on my site and it seems not to work on yours either. do you know anything about it?

    Reply
    • Editorial Staff says:
      Dec 28, 2010 at 9:28 am

      Yup they were experiencing downtime.

      Reply
  13. Azad @ Internet Geeks says:
    Oct 14, 2010 at 4:29 pm

    Hey its very useful. I am on my way to make to make unique social share for my blog. Thanks for sharing.

    Reply
  14. Aaqil Mahmood says:
    Sep 16, 2010 at 7:05 pm

    I am happy with this plugin, no need to edit codings with it

    http://wordpress.org/extend/plugins/add-twitter-anywhere/

    Reply
  15. surendar says:
    Jun 27, 2010 at 6:50 pm

    Hey this is really ver cool and interesting article.
    That live tweet box is really nice.

    Reply
  16. Praveen says:
    Jun 2, 2010 at 10:39 am

    Gr8 article on Twitter @Anywhere……. I have tested it, it works fine and definitely gone use this very soon.

    Thanks,
    @praveenkrg

    Reply
  17. Pablo DiCiacco says:
    May 7, 2010 at 10:57 pm

    This tutorial is a nearly exact replication of the post at Nettuts.
    http://tinyurl.com/27gplh8

    Reply
    • Editorial Staff says:
      May 9, 2010 at 5:24 pm

      Actually its the exact opposite in this case. Nettuts’ article is the exact copy of ours. We published and tweeted our article on April 19th and Nettuts published their article on April 22nd.

      Here is our tweet as a proof: http://twitter.com/wpbeginner/status/12456116742 (Next time check your facts before the accusation)

      Reply
  18. Phe says:
    May 6, 2010 at 11:18 am

    Curious if there’s any way to preload the Live Tweet Box with a link to the post that it’s on? So default text would be something like “Currently reading: *link to post*” and all they have to do is hit TWEET

    Reply
    • Editorial Staff says:
      May 9, 2010 at 5:32 pm

      Yes, search our plugins category for the plugin called Retweet Anywhere and you will find the answer :)

      Reply
  19. Zack Covell says:
    May 5, 2010 at 6:25 am

    Badass tutorial WP dudes.

    I followed this post step by step and now have REAL apps integrated…I’m excited.

    Thanks again for this post.

    rock on.

    Zack Covell
    (Astoria, Oregon)

    Reply
  20. Zirta says:
    May 3, 2010 at 10:57 am

    Thank you for this tutorial! It waws really useful :D
    I have succesfully placed a tweet box at my site but now I have a question; how can I make it show a short url automatically? You know, Twitter does the bit.ly thing AFTER sending the tweet, not before… I’ve tried some bit.ly plugins but no use, their short codes don’t work :(

    Reply
    • Editorial Staff says:
      May 3, 2010 at 12:33 pm

      You need to use the bit.ly API to make it work, or you can look at a plugin called Retweet Anywhere that we mentioned on our site.

      Reply
  21. Namit Gupta says:
    Apr 28, 2010 at 2:47 pm

    Great Stuff!!! Explained very well. Simple to implement. Thanks a lot.

    Reply
  22. Matthias Köhler says:
    Apr 25, 2010 at 2:42 pm

    Hey Guys, your tuts are awesome! Already retweeted this tut and applied it to my blog. THX SO MUCH!

    Reply
  23. Erkan says:
    Apr 23, 2010 at 6:37 pm

    I didn’t know that. Thanks a lot.

    Reply
  24. Aaron says:
    Apr 22, 2010 at 12:49 am

    Thank you for the tips! =)
    Am trying to get it to work on my website, so far I have no success yet. Not sure why. I put in the code and replace the API key put the hovercards code but nothing appeared on my website. =( Will continue to test

    Reply
    • Editorial Staff says:
      Apr 22, 2010 at 7:41 am

      Just went on your site: askaaronlee.com << Brought the mouseover to the link and it seemed to be working :)

      Reply
  25. Ingrid says:
    Apr 21, 2010 at 12:38 pm

    You are fantastic. Thanks so much for this!

    Reply
  26. Yan Susanto says:
    Apr 21, 2010 at 3:22 am

    Awesome tip, pal! BTW, what’s the retweet/FB/digg plugin you use?

    Yan

    Reply
    • Editorial Staff says:
      Apr 21, 2010 at 3:32 pm

      It is our Smart Sharing Plugin. Do a quick search on our site, and you will be able to find a download page. It’s free.

      Reply
  27. Tommy Day says:
    Apr 20, 2010 at 2:44 pm

    Anyone figure out a way to get the_permalink for single post pages into the tweet box to use it for RTs?

    Reply
  28. Nikhil says:
    Apr 20, 2010 at 12:27 pm

    Wow! This is really cool idea. Thanks for sharing.
    :)

    Reply
  29. hugophang says:
    Apr 20, 2010 at 5:07 am

    Great post. To get the hovercard by mouseover picture event instead of mouseover text, we can try this.

    http://www.askabouthugo.com/general/twitter-anywhere-for-wordpress-plugins-mouseover-picture-even/

    enjoy! @hugophang

    Reply
  30. Pavan Somu says:
    Apr 20, 2010 at 3:37 am

    I will add this script. Thanks for the tutorial.

    Reply
  31. Kate Mag says:
    Apr 19, 2010 at 9:39 pm

    Awesome tutorial on Twitter Anywhere. Thanks

    Reply
  32. Hian Battiston says:
    Apr 19, 2010 at 8:16 pm

    Great stuff here!
    Thanks a lot!

    Reply
  33. Tony says:
    Apr 19, 2010 at 5:57 pm

    Wow! Those are some pretty neat features Twitter has going. REally impressed with them.

    Reply
  34. Dustin Diaz says:
    Apr 19, 2010 at 5:56 pm

    On behalf of the @anywhere team — thanks! We’re revving on the API to give developers more customizability. Stay tuned.

    – Dustin ( @ded )

    Reply
    • Editorial Staff says:
      Apr 20, 2010 at 3:23 am

      Thank you Dustin @ded for coming out here and taking your time to reply :)

      Would really like to see more control over css and stying of the follow button and the live tweet box :)

      Reply
      • Dustin Diaz says:
        Apr 20, 2010 at 11:36 am

        We have an approach to this that I think you’ll like. Hang tight.

        Reply
  35. Otto says:
    Apr 19, 2010 at 2:06 pm

    A lot of this is made simpler with the use of plugins. :)

    http://wordpress.org/extend/plugins/simple-twitter-connect/

    Reply
  36. Aaron Darko says:
    Apr 19, 2010 at 1:32 pm

    Fantastic Stuff Syed, You and your team are awesome. You guys are killing it!

    ~Keep it up bro~

    Reply
  37. The Frosty says:
    Apr 19, 2010 at 12:40 pm

    Very cool. You should check out my plugin I created for this.
    It makes implementing @Anywhere into WordPress easy as pie!

    @Anywhere plugin for WordPress.

    I’ve created a simple and easy to use setting page to control the script.

    Reply
    • Editorial Staff says:
      Apr 20, 2010 at 3:28 am

      Thank you Austin for the plugin. We did review it when we were writing this article, but the reason why we did not include it was because it was not added in the repository yet.

      Reply
  38. Todd Santoro says:
    Apr 19, 2010 at 12:21 pm

    Sweet stuff Syed! This is a nice unobtrusive way to add some additional functionality.

    Reply
  39. Ed at Kliky says:
    Apr 19, 2010 at 12:02 pm

    Have you found that they’d improved their performance from say 9 months to a year ago? I’d tried the Twitter feed some time back and found that their delivery service was so bad at times that it would be a drag on my Web site, which led me to drop it altogether.

    Reply
    • Editorial Staff says:
      Apr 19, 2010 at 12:12 pm

      We added some aspects to our site. We think that performance will improve over time. There are times when the page loads and the hovercard does not render properly but that will happen with any API.

      Reply
  40. Scot says:
    Apr 19, 2010 at 11:31 am

    How might you add some simple css styling to the tweetbox?

    Reply
    • Editorial Staff says:
      Apr 19, 2010 at 12:14 pm

      The API is very young. don’t think there is an option for that yet.

      Reply
      • Cosmin says:
        Apr 19, 2010 at 2:07 pm

        Isn’t it possible to define some styles in your CSS and overwrite the default ones?

        Reply
    • Piet says:
      Apr 19, 2010 at 4:28 pm

      @Scot the javascript for the tweetbox gives quite a few classes, so I think you can edit your own css and use the !important tag to give it your own styles

      in general great tutorial, thanks guys!

      Reply
  41. Victor says:
    Apr 19, 2010 at 10:15 am

    Wow, this is easy :-)

    Reply
  42. Maged says:
    Apr 19, 2010 at 9:04 am

    Really you rock, really handy tips keep up the great work

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WPForms Logo
WPForms
Drag & Drop WordPress Form Builder Plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
LifterLMS Coupon
Get 15% OFF on LifterLMS WordPress learning and course management system plugin.
SEMRush
SEMrush Coupon
Get a 30-day FREE trial on SEMrush online visibility management tool.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.