Adding Social Widgets

Follow

Adding a widget for social platforms to your landing page is a great way to get your customers to add some interaction and drum up some support for your campaign! Using a widget will allow your customers to share your landing page to their followers with a simple click of a button. This article will help you set up widgets on your landing page to some of the most popular social platforms in a few different ways.  

This article will help you out with:

  • Adding Twitter, Google+, Facebook, and Linkedin widgets to your landing page
  • Optimizing your landing pages for social sharing
  • Adding a ShareThis widget to your landing page 

Note

This feature is only available for landing pages and not popups and sticky bars.


Adding a Social Widget for Facebook, Twitter, and/or Google+ 

If you want a simple Facebook, Twitter, and/or Google+ widget on your page, Unbounce streamlines this process for you by making the widgets available on our editor from the widget panel on the left.

To add any or all of these three social widgets, follow the steps below:  

  1. Log on to Unbounce
  2. Navigate to the page where you would like to add social widgets and click the Edit button.
  3. Scroll down to the bottom left-hand side of the screen and select the Social Widget image15.png object. Drag and drop this object to the spot where you would like to put your social widgets on your landing page. All 3 of the social widgets will appear on your page. image9.png
  4. Once the widgets have been added to your page, you’ll see available    customization options on the right of the editor page under the Properties tab:
    • In the Geometry section you can specify the size and positioning of your social widgets.
    • In the Layout section you can choose from Unbounce’s pre-fabricated horizontal and vertical layouts to arrange the widgets on your page.
    • In the Social Platforms section, you can specify which social widgets you want to appear on your page by checking the Enable box beside each specific social platform. If you uncheck the box, that specific social platform widget will disappear from your landing page. You can also specify some information for each specific social widget:
      • You can add a custom message for your customer to tweet when they click on the twitter social widget by selecting the Use Custom Message radio button and writing a custom message.
      • You can use a custom url for your customer’s Google+ and Facebook widgets by selecting Use Custom URL from the Set URL drop-down menu.

After customizing and completing any changes you want to make to your social widgets, make sure to save and publish your page. That’s it! You’ve now added social widgets to your landing page.  


 

Adding a LinkedIn Widget

Adding a Linkedin widget to your company (or member) profile is a quick process using Linkedin's plugin creator tool.

  1. Log in to LinkedIn and follow one of the following two links to use the applicable LinkedIn plugin creator to generate the code for your landing page:
  2. Once you’ve copied the appropriate code from the links above, log on to your Unbounce account and navigate to the landing page where you’d like to add your LinkedIn widget.
  3. Drag and drop a Custom HTML image7.png object  from the left-hand side of the builder to the spot on your landing page where you’d like to put your LinkedIn widget. A new dialog box called Embed Custom HTML Code will appear.
  4. Paste the code from Linkedin's plugin generator into the blank field.
  5. Click the Save Code button at the bottom of the dialog box.
  6. Save and Publish your page. Your new LinkedIn widget should be embedded onto               your landing page!

Adding Custom Twitter Buttons

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 Javascript box to add the javascript to your Unbounce page by clicking the Javascripts image3.png icon in the bottom left of the editor. A new dialog box will appear.  
  2. In the new Manage Scripts Dialog box, fill out the following information:
  • In the Script Name field, type ‘Twitter Buttons’.
  • In the Placement drop-down menu, select the Head option.
  • Copy the script found on this Twitter site and paste it into the main body of the dialog box.
  1.    Click the Save Code button at the bottom right-hand corner of the dialog box.

image5.png

Step Two - Add the Custom HTML Components On Your Page

  1. Drag and drop the Custom HTML image7.png button from the left-hand side of the editor to the place on your page where you would like to add the Twitter buttons. A new dialog box will appear.
  2. Follow the twitter link below and copy the code found on the page. The link will also teach you how to make any specific changes to the code if you’d like to customize the look, link, or tweet.  
  3. Go back to the Unbounce editor. Paste in the twitter code to the Embed Custom HTML Code dialog box.
  4. Click the Save Code button at the bottom right-hand corner of the dialog box.
  5. Save and Publish your page.

That's it! You’re all set for all your Twitter Needs. The Finished Product:

twitter_widget.png

Note:

If you’d like to include both the Follow and Tweet buttons as above, you’ll need to embed a separate Custom HTML component for each button, though the javascript only needs to be included once.

 


Adding a ShareThis Widget

Adding a ShareThis widget will give your visitors a number of customizable ways to spread the landing page love and is pretty easy to set up. To set this up, you will need first configure the widgets on your ShareThis platform, then:  

  1. Add the ShareThis Javascript to your Unbounce page, and
  2. Embed the custom HTML components for either share buttons or follow buttons on your page.

Step A - Add the ShareThis Javascript to Your Unbounce Page

  1. Log in to your ShareThis account.
  2. On the bottom left-hand corner of the screen, click the Property Settings option. A new page will appear.
  3. Scroll down the page until you see the section entitled Get the code: copy and install sharethis.js. Copy the javascript that you see in this section.
  4. image16.png
  5. Log in to your Unbounce account and find the page where you would like to add your ShareThis widget. Click Edit to get to the Unbounce editor.
  6.  Click the Javascripts image3.png icon in the bottom left of the editor to add the javascript to your Unbounce page. A new dialog box will appear.  
  7. In the new Manage Scripts Dialog box, fill out the following information:
    1. In the Script Name field, type ‘ShareThis Buttons’.
    2. In the Placement drop-down menu, select the Head option.
    3. Paste the script from your ShareThis account into the main body of the dialog box.
  8. Click the Save Code button at the bottom right-hand corner of the dialog box.

image1.png

Step B - Add the Share/Follow Buttons to Your Landing Page

 

ShareThis gives you a number of different styles of Share and Follow Buttons that you can add to your landing page.

  1. Start by selecting the option that you’d prefer and navigate to that option on the ShareThis platform.
  2. Toggle the switch to ‘on’ on the ShareThis website for the button style that you’ve selected.
  3. image2.png
  4. Follow the instructions on the ShareThis website to pick which social media platforms you’d like to add to your Share/Follow Buttons and arrange them in the order and alignment settings that you’d like. If you’re using Follow Buttons, make sure that you fill out your account information in the ShareThis platform at the bottom of the Inline Follow Buttons page for any accounts that you’re adding in the widget.
  5. Copy the code provided on the ShareThis page.
  6. image12.png
  7. Navigate to your Unbounce Landing page. Drag and drop the Custom HTML image7.png button from the left-hand side of the editor to the place on your page where you would like to add the Share Buttons. A new dialog box will appear.
  8. Paste in the ShareThis code to the Embed Custom HTML Code dialog box.
  9. Click the Save Code button at the bottom right-hand corner of the dialog box.
  10. Save and Publish your page.

 

You’re ready to take the social media world by storm! The Finished Product:

share-this-widget.png

Note:

If you’d like to include both the Share and Follow buttons as above, you’ll need to embed a separate Custom HTML component for each widget, though the javascript only needs to be included once.

 


 

Adding a Custom Facebook Button

You may prefer to add your own custom Facebook Like or Share button on your landing page rather than using our social widget. This document will show you how!

Head on over to Facebook and use their button configurator to get the code for a  Like and Share Widget Button, or a Share Widget Button.  Once you select the options for your custom button, hit the Get Code button and a new dialog box will appear with two different scripts.

    • Script one is your Javascript code.
    • Script two is your Custom HTML code.

image11.png

You’ll need both codes to get your custom Facebook button to appear on your page. Let’s break the process down and go through installing each of these scripts separately.  

Step A: Installing the Javascript Code for your custom Facebook button.

  1. Copy the Javascript code from your Facebook widget page.
  2. Log in to your Unbounce account and find the page where you would like to add your custom button. Click Edit to get to the Unbounce editor.
  3. Click the Javascripts image3.png icon in the bottom left of the editor to add the javascript to your Unbounce page. A new dialog box will appear.  
  4. In the new Manage Scripts Dialog box, fill out the following information:
    • In the Script Name field, type ‘Facebook Buttons’.
    • In the Placement drop-down menu, select the After Body Tag option.
    • Paste the Javascript code from your Facebook account into the main body of the dialog box.
  5. Click the Save Code button at the bottom right-hand corner of the dialog box.

image14.png

Step B - Add the Custom HTML Components On Your Page 

  1. Copy the Custom HTML portion of the code from the Facebook page for your custom Like or Share button.
  1. Go back to the Unbounce editor. Drag and drop the Custom HTML image14.pngimage7.png button from the left-hand side of the editor to the place on your page where you would like to add the Twitter buttons. A new dialog box will appear.
  2. Paste in the Facebook Custom HTML code to the Embed Custom HTML Code dialog box.
  3. Click the Save Code button at the bottom right-hand corner of the dialog box.
  4. Save and Publish your page.

All set! Your page is ready for all sorts of Facebook liking and sharing.

facebook_widgets.png



Can I Use Unbounce to Create a Facebook Page Tab?

Indeed you can! Check out this post in our Community to learn how.


How do I customize/optimize my landing page to share on social media? 

You can use our post on open graph tags to make your share post as fabulous as you want it to be!


  

Glossary

Social Widget: Twitter, Facebook, LinkedIn, or Google+ icon that enables access to the social media platform when clicked. Found in the Widget Panel on the left of the App.

Social Proof: the positive influence that's generated when people find out that "everybody's doing it." Building social proof into your offer in the form of testimonials, reviews or trust seals is a great way to generate interest, increase credibility and drive more conversations


Was this article helpful?
7 out of 21 found this helpful