Unbounce Answers/FAQ/Third Party - Social Media

How can I add Twitter 'Follow' and 'Retweet' buttons?

Oli Gardner
posted this on October 21, 2010 05:30 PM

These 'Tweet' and 'Follow' buttons are small widgets that will allow your visitors to easily interact with you on Twitter without ever having to leave your landing page.

Setting these widgets up is a simple two step process.  All you need to do is:

  1. Add the Twitter Javascript to your Unbounce page and
  2. Embed the custom HTML components on your page
You can fully customize the appearance and functionality of these buttons by following the instructions at Twitter's Developer websites for the Tweet button and the Follow button.

Step One - Add the Twitter Javascript to your Unbounce page

  1. Use the Javascripts box to add the javascript to your Unbounce page by clicking this icon in the bottom left of the editor:

    javascripts.png 

    for name, enter Twitter Buttons, for placement choose 'head', then paste in the following script:

    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

    Your setup should look like this:

    twitter_javascript.png 

Step Two - Add the Custom HTML Components on your Page

  1. Use the custom HTML block to add the components to your page by clicking this icon on the toolbar:

    custom_HTML.png

     then paste in the following code to add the Tweet button:

    <a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

    or this code to add the Follow button:

    <a href="https://twitter.com/twitterapi" class="twitter-follow-button">Follow @your_twitter_name</a>

    (be sure to replace 'your_twitter_name' with your twitter user name)

    then click 'Done'
 
That's it!
 
If you would like to include both the Follow and Tweet buttons as above, you will need to embed a separate HTML component for each though the javascript only needs to be included once.

To Customize the 'Tweet' Button 

You can add certain modifiers to the tweet button to change the default text included in the tweet.  For a full list of possible modifications you can make to the tweet see Twitter's Tweet Button page.  Here are a few key ones:

data-url will change the default URL included in the tweet

data-via will change the user name included in the tweet

data-text will allow you to edit the text included in the tweet

For example:

<a href="http://twitter.com/share" class="twitter-share-button"
data-url="your_landing_page_URL"
data-via="your_user_name"
data-text="default_tweet_text">Tweet</a>


will let you edit all three of the fields listed above.

 

 

Comments

User photo
Todd Nagle

Hi Unbounce Team,

Is there a way to use a custom image/button for "tweet this" or follow? I have the preferred png file. I'm assuming it requires saving the file on a third party site.

Thanks in advance for pointing me in the right direction.

Cheers!

March 24, 2012 12:14 PM