Unbounce Answers/Next Steps/Social Media & Other Widgets
How to add Twitter @Anywhere widgets [DEPRECATED]
Oli Gardner
posted this on October 21, 2010 05:24 pm
NOTE: Twitter has disabled support for @anywhere widgets. This functionality is no longer available.
What is Twitter@Anywhere?
Twitter @Anywhere lets you bring Twitter functionality to your website or landing pages. You can add Hover Cards, Follow Me buttons, Tweet This Boxes, automatically link Twitter usernames to profiles and do it all without making your users leave your page. This is great news for landing page conversion geeks as it means your visitors can stay where they are while benefiting from enhanced social media interaction.
To add a Twitter @Anywhere widget, you will need to complete three main steps:
- Create an @Anywhere Application
- Add the Base @Anywhere Javascript
- Add Twitter Widgets to your Unbounce landing page
Step 1 – Create an @Anywhere Application
The first step is to visit https://dev.twitter.com/apps/new to register a new @Anywhere app and get a unique Consumer key. If you click on the image opposite, you’ll see examples of the information you’ll need to insert to get it working on Unbounce.
Follow these steps to create your @Anywhere app and get your Consumer key:
- Create a page on Unbounce
- Set the final URL you want to use for the page in your page overview in Unbounce
- Publish your page
-
Visit https://dev.twitter.com/apps and sign in with your Twitter account
-
Click 'Create a New Application'
-
Fill out the 'Name' and 'Description' details in the provided form
Copy and paste your landing page URL into the “WebSite” and “Callback URL” fields
-
Review the terms and conditions, check 'Yes, I Agree', fill in the captcha field and click 'Create your Twitter application' to continue
-
This page provides you with an overview of your new app settings
*Make note of your 'Consumer Key' here as you will need it for Step 2 (note: the Twitter docs sometimes refer to an API key - this is the same as your consumer key) -
Return to the top of the page and click the 'Settings' tab
-
Under Access, select 'Read and Write'
-
Click 'Update this Twitter application's settings'
You’re now ready to start adding Twitter @Anywhere to your landing page - you will need your 'Consumer key' for the next step.
Step 2 – Add the Base @Anywhere Javascript
Insert the main @Anywhere Javascript code in the head of your landing page as shown above.
To get your @Anywhere app running on your Unbounce landing page you need to add a global @Anywhere Javascript reference. To do this, click the Scripts button in the editor toolbar. You will now see the window shown in the image opposite.
- Click the “Add” button to create a new script element
- Name it Twitter Anywhere
- Choose “Head” for the Placement setting
- Paste the following script into the empty script area
<script src="http://platform.twitter.com/anywhere.js?id=YOUR_CONSUMER_KEY&v=1" type="text/javascript"></script> - Replace the value “YOUR_CONSUMER_KEY” with the 'Consumer key' you grabbed in Step 1
Note: You should reference the original Twitter page to verify this code remains the same: http://dev.twitter.com/anywhere/begin
Step 3 – Add Widgets to Your Unbounce Landing Page
This image shows how 2 of the common @Anywhere widgets can be used.
Two of the most common @Anywhere widgets are the Follow Button and Tweet This Box. You can add these to your page by using a “Custom HTML” component from the landing page editor menu. Click the image opposite for a example of how these 2 widgets will look on your page.
Adding a Follow Button
To add a Follow Button, add a “Custom HTML” component to your page, and enter the following Javascript code:
<span id="follow-twitterapi"></span>
<script type="text/javascript">
twttr.anywhere(function (T) {
T('#follow-twitterapi').followButton("yourtwitteraccountname");
});
</script>
Adding a Tweet This Box
To add a Tweet This Box, add a “Custom HTML” component to your page, and enter the following Javascript code:
<div id="tbox"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tbox").tweetBox({
height: 100,
width: 400,
defaultContent: "Enter your own message in here"
});
});
</script>
You can adjust the height and width, and some other parameters (see the link below for options). Make sure your “Custom HTML” component is bigger than the height/width you specify here to allow enough space for the Tweet button to appear. You can play around with this by saving your page and hitting Preview.
Comments
Oli, This is just all sorts of awesome. I have been banging my head trying to figure out how to do this on my landing page site, while trying to remember where I saw this "how to". Thanks
Oli,
Can I redirect someone to another page after they have tweeted this message? I would like to offer a free Podcast download after people Tweet out my specific viral message.
To clarify:
1. They retweet my custom message.
2. Once it has been Tweeted, they are redirected to another page that has a Podcast download.
3. Once the download is done, it would be awesome to have them redirected back to the original Unbounce landing page, so they can do the same on Facebook.
Hey Joseph,
I'm not familiar with a way to do that with Twitter @Anywhere.
However, what you might like to try is to add a PayWithATweet.com button to your page instead. You can see an example of how it works if you click on the button on my latest page here: http://try.unbounce.com/noob-guide-pdf/
This works for Twitter and Facebook - letting people choose.
Why can't I get the Tweet button to work on any UB pages? http://twitter.com/about/resources/tweetbutton
You give two Anywhere examples but they're not the simple, widespread tweet button. The tweeting works, the tweet button count doesn't. See greatguyseverywhere.com for reference.
Thanks Oli - left out the www. Damn birds.
Hi Oli,
Seems things have changed. Ideally would like to embed a follow plus a widget of recent tweets. What is confusing is that the page referenced below mix HTML and scripts and I am not entirely sure what I should add on my landing pages?
Hi Herve,
Can you let me know some more specific requirements? For example, what is the widget you are trying to add? (Can you share a link to the widget page on Twitter?) Also, you might want to email support@unbounce.com with the details and include a link to the page you are working on in Unbounce so we can see what you're trying to do.
Hi Oli,
Sorry, question was a bit vague. I made some progress, unlocked the main issue I had (despite your super quick response!), still struggling a bit (damn curve!). Will keep digging and email support if I am stuck.
Things have changed on the twitter end. The link http://dev.twitter.com/anywhere/apps/new goes to https://dev.twitter.com/apps/new
The form fields on the twitter side no longer match these instructions. Time for a re-write.
Also, once you have filled out the form, the application page on twitter doesn't reference an "API key." Is it the Consumer Key?
Thanks for noticing the updates Jonathan. I've made a few changes. And yes, from what I've read - the API key is now called (and the same as) the CONSUMER key.
Does not work for me :(
@Jay - We received your support request Jay but I also wanted to follow-up here for the benefit of other users.
Often when the Twitter widget does not work, it's because Step 1 - #10 has been overlooked. Can you confirm that you enabled Read and Write access for your widget? This usually helps address the issue but let me know if not.
I confirm it is configured as read-write but still does not work!
Hello Ryan,
It works now after I lookedup info on URL at Twitter.
Thanks for your prompt response!
Jay,
Hi everybody, I need to insert 9 tweet anywhere boxes, but I can`t find a way, it always displays 1. What can I do?
thanks