Unbounce Answers/Next Steps/Social Media & Other Widgets

How to add Twitter @Anywhere widgets

Oli Gardner
posted this on October 21, 2010 05:24 pm

NOTE: these instructions are only for integrating Twitter @Anywhere apps into your landing page. Go here if you are looking to embed a retweet button or here if you want to embed Unbounce's Social Media Widgets.

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:

  1. Create an @Anywhere Application
  2. Add the Base @Anywhere Javascript
  3. 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:

  1. Create a page on Unbounce
  2. Set the final URL you want to use for the page in your page overview in Unbounce
  3. Publish your page

  4. Visit https://dev.twitter.com/apps and sign in with your Twitter account

  5. Click 'Create a New Application'
    create_a_new_application.png 

  6. 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
    app_details.png 

  7. Review the terms and conditions, check 'Yes, I Agree', fill in the captcha field and click 'Create your Twitter application' to continue

  8. 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)

  9. Return to the top of the page and click the 'Settings' tab 

  10. Under Access, select 'Read and Write'
    read_write.jpg 

  11. 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.

  1. Click the “Add” button to create a new script element
  2. Name it Twitter Anywhere
  3. Choose “Head” for the Placement setting
  4. 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>
  5. 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

User photo
Joseph Doughty

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

February 20, 2011 02:45 pm
User photo
Joseph Doughty

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.

February 20, 2011 03:09 pm
User photo
Oli Gardner
Unbounce

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.

February 20, 2011 03:25 pm
User photo
Derek Shanahan

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.

April 08, 2011 05:49 pm
User photo
Oli Gardner
Unbounce
Hey Derek, Have you checked that the path matches your page URL exactly when you grabbed the code? Also clear your cache, the official twitter button is notorious fior caching.
April 08, 2011 06:30 pm
User photo
Derek Shanahan

Thanks Oli - left out the www.  Damn birds.

April 08, 2011 07:13 pm
User photo
Herve Humbert

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?

June 07, 2011 04:05 pm
User photo
Oli Gardner
Unbounce

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.

June 07, 2011 04:11 pm
User photo
Herve Humbert

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.

June 07, 2011 04:19 pm
User photo
Jonathan Rose

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.

August 19, 2011 01:34 pm
User photo
Jonathan Rose

Also, once you have filled out the form, the application page on twitter doesn't reference an "API key."  Is it the Consumer Key?

August 20, 2011 08:24 am
User photo
Oli Gardner
Unbounce

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.

August 22, 2011 01:19 pm
User photo
Jay Dias

Does not work for me :(

December 23, 2011 04:31 am
User photo
Ryan Engley
Unbounce

@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.

December 23, 2011 01:56 pm
User photo
Jay Dias

I confirm it is configured as read-write but still does not work!

December 24, 2011 05:09 pm
User photo
Jay Dias

Hello Ryan,

It works now after I lookedup info on URL at Twitter.

Thanks for your prompt response!

Jay,

December 24, 2011 07:41 pm
User photo
Javier Martín Balsa

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

May 07, 2012 01:14 am
Add a comment