HOW TO: Use Twitter @Anywhere Widgets on an Unbounce Landing Page

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.

Step 1 – Create an @Anywhere Application

register your Twitter @anywhere app

Complete the simple @Anywhere registration form to get your API key

The first step is to visit http://dev.twitter.com/anywhere/apps/new to register a new @Anywhere app and get a unique API 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 API 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. Complete the @Anywhere app registration form at the URL above
  5. Copy and paste the your landing page URL into the “Application Website” and “Callback URL” fields
  6. Submit the @Anywhere app registration form
  7. Grab your API key from the application settings on your newly created @Anywhere app

You’re now ready to start adding Twitter @Anywhere to your landing page.

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_API_KEY&v=1" type="text/javascript"></script>
  5. Replace the value “YOUR_API_KEY” with the API 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:

<div id="tbox"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#tbox").tweetBox();
  });
</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 so allow for the Tweet button to appear. You can play around with this by saving your page and hitting Preview.

Check out examples of more widgets you can add.

Segment Pixel