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+
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:
- Access the Unbounce Editor
- Drag the Social Media Widget object onto your page
- Select a layout and customize the widget's appearance from the Layout pane on the right.
- You can use your page's title as the Tweet message or customize your own message.
- You can also set the sharing URL for Google + Facebook to either your landing page or a custom URL such as your main website.
Social Widget Properties
Manually change the size and position of the object.
Select from an assortment of layouts.
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.
- Use the applicable plugin creator to generate the code for your landing page:
- 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:
- Embed the custom HTML components on your page
- For name: enter Twitter Buttons, for placement choose 'head', then paste in the following script:
Your setup should look like this:
Step Two - Add the Custom HTML Components On Your Page
- Use the custom HTML block to add the components to your page.
- Paste in the following code from Twitter
Adding a Custom Facebook Button
Adding a Facebook widget to your landing page is simple. Just follow these steps:
- First you need to get either the Like Widget script, or the Share button code from Facebook.
- 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)
- Click the Custom HTML button in the editor toolbar
- Paste the script into the window and click "done"
- 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)
- 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.
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 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:
- Visit https://developers.facebook.com/apps
- Click Apps > Create New App and follow the instructions in the dialog box
- 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
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.
- 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.
- Customize the widget using the provided interface and click 'Get Code' when you have finished making your tweaks. This will open a dialog box.
- The dialog box will show you two pieces of code:
- The code for your plugin that displays the widget on your page
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:
Step B - Add the Widget to Your Landing Page
- 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).
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.
To ensure your page has the correct content when shared across social media channels, follow the steps below.
- 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://yourimagehost.com/yourimage.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." />
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.
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