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

Special WordPress Hosting offer for WPBeginner Readers

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:

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

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.