Adding Social Widgets

Old-school word of mouth marketing relied on people actually talking to one another and emailing or IM’ing links to one another. New-school marketing is about leveraging the multiplicative network effects of social media – where people market on your behalf. When it comes to creating social landing pages, familiarity facilitates interaction, so provide sharing mechanisms that people are used to using. You also want to make sure that you take advantage of the right networks. Twitter and Facebook are the most common, and each has different ways for people to share your landing page.

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

This feature is only available for landing pages and not Convertables.


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

image.png

Drag and drop the Social Widget onto your landing page from the Widget Panel on the left. Select (single click) the social icons to bring up its Properties Pane on the right:

  1. Access the Unbounce Editor
  2. Drag the Social Media Widget object onto your page
  3. Select a layout and customize the widget's appearance from the Layout pane on the right.
  4. You can use your page's title as the Tweet message or customize your own message.
  5. You can also set the sharing URL for Google + Facebook to either your landing page or a custom URL such as your main website.

That's it!


Social Widget Properties

Geometry

Manually change the size and position of the object.

Layout

Select from an assortment of layouts.

Social Platforms

Choose to enable or disable Twitter, Google+, & Facebook


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. Use the applicable plugin creator to generate the code for your landing page:
  2. Add it to your landing page:
      • Drag and drop a Custom HTML object onto your page in the Unbounce landing page builder and paste the code from Linkedin's plugin generator.

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 this icon in the bottom left of the editor:  javascripts.png 
  2. 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

  2. then paste in the following code from Twitter 

Twitter Documentation: Adding a Custom Tweet Button

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.


Adding a Custom Facebook Button

Adding a Facebook widget to your landing page is simple. Just follow these steps:

      1. First you need to get either the Like Widget script, or the Share button code from Facebook. 
      2. On your landing page click the "page section" or area on the page where you'd like to place the button (you'll see the page section highlighted by a dashed line)
      3. Click the Custom HTML button in the editor toolbarcustom_HTML.png
      4. Paste the script into the window and click "done"
      5. Stretch the Custom HTML to be the correct size for your button (you can see the height and width it should be if you look at the code you pasted in)
      6. Save your page

Click "Preview" to see it in action. It won't show up in the editor, just preview mode and the final published page.


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 Add a Facebook Widget Using Facebook's JavaScript SDK?

NOTE: these instructions are for adding Facebook widgets using the Facebook JavaScript SDK and HTML5 code. If your widget can use Facebook's iframe code, you can read this GetSatisfaction thread for an easier embed process.

To add a Facebook widget such as a log-in or send button, you will need to complete two main steps:

          • Step A - Create an App ID for your widget
          • Step B - Create the code for your widget and embed the JavaScript SDK/plugin code on your landing page

Step A - Create an App ID for your Widget

The first step is to visit https://developers.facebook.com/apps to register a new Facebook widget and get a unique App ID.

Follow these steps to create your Facebook widget's App ID:

      1. Visit https://developers.facebook.com/apps
      2. Click Apps > Create New App and follow the instructions in the dialog box
      3. Create_new_app.png 
      4. Once you complete those steps, you should be forwarded to the overview screen for the app you just created. Make note of your unique App ID as you will need it for the following steps

facebook_app_id.png 

You’re now ready to create the code for your widget!

Step B - Create the Code for your Widget and Embed it on Your Landing Page

Next, you'll customize and generate the code for your widget.

      1. Visit https://developers.facebook.com/docs/plugins/ and choose the widget you want to use. This will bring you to an overview page for that widget.
      2. Customize the widget using the provided interface and click 'Get Code' when you have finished making your tweaks. This will open a dialog box.
      3. The dialog box will show you two pieces of code:
        • The JavaScript SDK that runs the widget and
        • The code for your plugin that displays the widget on your page
      4. widget_code.png
      5. Copy the JavaScript that runs the widget and paste it onto your Unbounce landing page by clicking the Javascripts button in the bottom left of the editor. This will open the JavaScript dialog box.
      6. For Name type 'Facebook Widget', for Placement choose 'After Body Tag'. Then paste in the script and replace the field APP_ID with your App ID from Step A.
      7. widget_JS_scripts.png
      8. Next, copy the plugin code that displays your widget and paste it onto your Unbounce landing page as a custom HTML component. To do this, drag the Custom HTML widget onto your page and paste the code into the dialog box. Click Done. You can then position and resize the placeholder box on your page as need be.

That's it! You are now ready to save, preview, and ultimately publish your page.


Adding a ShareThis Widget

Adding a ShareThis widget will give your visitors a number of ways to spread the landing page love and is pretty easy to set up. to set this up, you will need to:

      • Step A - Produce the Code for your ShareThis Widget and
      • Step B - Add the Widget to your Landing Page

Step A - Produce the Code for your ShareThis Widget

Visit http://sharethis.com/publishers/get-sharing-button to produce the code for your widget. ShareThis will provide you with two pieces of code that need to be added slightly differently:

ShareThis.png 

Step B - Add the Widget to Your Landing Page

      1. The first bit of code (starts with <span> ) is the actual object you will embed on your page. To do this, copy the code from ShareThis, load your Unbounce landing page in the editor, drag a new custom Custom HTML object onto your page, paste in the code and click done. You can then position and size the placeholder as needed on your page (see this article for more instructions).
      2. The second bit of code is the javascript that actually runs the component. You'll need to copy this code from ShareThis and embed it onto your landing page using the Javascripts dialog box. To do this, copy the code from ShareThis, load your Unbounce landing page in the editor, click the Javascripts in the bottom left of the editor, choose 'head' for placement and paste in the script.

Once you have completed these steps, you can save, preview and ultimately publish your page. Your page will be ready to take the social media world by storm.


Optimizing Your Landing Pages for Social Sharing (ex. Facebook Images) With Open Graph Tags.

If you’re looking to share your Unbounce page on Facebook, Google+ or LinkedIn, you’ll likely want to optimize the content that is displayed in the sharing process - including a unique title, photo and description. By default, each social network will attempt to grab content from the page dynamically and make a guess as to which content is displayed. You can override this functionality and specify the content to be shared by implementing something called Open Graph Tags.

To see what this looks like in action, take a look at the two posts below. Both posts are sharing the same Unbounce URL; one is optimized for social sharing, while the other is not. 

FB OG Tags Before and After.jpg

To ensure your page has the correct content when shared across social media channels, follow the steps below.

      1. Copy the following HTML:
        • <meta property="og:title" content="Unbounce Open House" /> 
          <meta property="og:url" content="http://go.unbounce.com/openhouse/"/>
          <meta property="og:type" content="website" />
          <meta property="og:image" content="http://i.imgur.com/tXFsuYt.jpg" />
        • <meta property="og:image:width" content="400" />
          <meta property="og:image:height" content="300" />
          <meta property="og:description" content="Hey you! Drink Beer with Us! We're a pretty friendly crew at Unbounce and we like to meet new friends - whether it's work peers, potential team members, or cool peeps from the Vancouver tech community." />
      2. Paste this HTML into the Javascripts tab on your landing page and set 'Placement' to 'Head'.OG_JS_Panel.png
      3. Find the URL of the image you want to use. If you don't have it uploaded already, you can use a free external image hosting service such as imgur and grab the image URL from there. Your image should be at least 600 x 315 pixels – but if you can, try to use images that are 1200 x 630 pixels for the best display across most social networks on high resolution devices. Add your image width and height to the width and height tags.
      4. Edit the values in the HTML code, replacing the existing values with the appropriate image URL and details about your page.
      5. Save and republish your page.

NOTE: If you've already shared your page on Facebook before implementing Open Graph tags, you'll most likely need to have Facebook update their cache by using Facebook's Open Graph Debugging Tool. Just put the URL of your published page into the debugger and choose Fetch New Scrape Information.


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



Back to: Building Your Landing Pages >>

Was this article helpful?
1 out of 2 found this helpful
Powered by Zendesk