With so much traffic being driven these days via social media, it’s important to implement designated social media landing pages as part of your marketing strategy. Remember, folks who click your ads and links from social media sites are valuable visitors – they’ve actively engaged with your brand on a social network. In fact, J. Crew found that:
“customers who engage with us via our social media outlets (Facebook, Twitter, Pinterest, or Instagram) generally spend approximately 2x more than the average J.Crew customer”
Twice as much is a pretty big deal! So roll out the red carpet, and don’t you dare just send your social fans to the homepage.
Many of the same rules that are used with PPC landing pages apply to social media landing pages as well, the core essentials being:
Landing page content mirrors ad content (for text and images)
Clear value prop and call to action
Keep text simple and concise
Consider where the visitor is coming from
That last point is where the situation really changes for social media landing pages, and it’s a major deviation to consider. Your social media landing pages need to cater to the unique needs and mindset of someone coming from a social network.
The best way to learn is through examples, so let’s go!
Facebook Landing Pages
We’ll start with the most obvious social network – Facebook. A lot of businesses pour advertising dollars into Facebook, but based on the examples I’ve seen, many still don’t seem to be doing Facebook advertising the way it needs to be done.
Let’s start things off by looking at a Facebook ad and landing page by JibJab.
Clicking the ad takes us to…
This is a pretty good landing page. We’re taken right where we belong, and the sample video featuring the empty face explains the offer concept without the need of extra text.
What Works:
Minimal text as the page’s video explains the insert-your-face video concept (even just the thumbnail before playing the image shows the empty face, so users can understand the concept without even playing the video).
Bright green button with a “make your own” call to action.
Good related content – while it’s not always recommended to promote other offers on a landing page, the idea works well here and gets visitors excited about making additional JibJab videos.
What Needs Work:
While it’s great that the Facebook ad text is being recycled in the landing page text field, I’d like to see the Facebook ad headline, Add Your Face to “Happy” repeated as well. It’s another element to solidly the connection between the ad and landing page, and it also serves as more interesting copy than the “Dances” “Happy” or “video” headline and sub-headlines.
The “tags” section seems unnecessary, and is probably an element that should be hidden and just used for site structure and filtering. Instead, this space could be used for some social proof elements (such as: 4,327 people have made themselves “Happy!” Are you next?).
Grade: B
Next we have a Facebook ad by Health Line First, with the ad text “providing information that is usually hard to find.” Not very helpful, but they earn a few points for being mysterious.
Clicking the link, we’re taken to their Facebook page.
What Works:
Not much. At least they have a profile picture.
What Needs Work:
Their Facebook page doesn’t give us any details explaining what the company is all about – just that same ad text that now seems more silly than mysterious. We see their logo again, although it remains unclear what the number 7 has to do with Health Line First. They haven’t even bothered to add a cover photo. This is pretty much as bad as it gets – a terrible ad followed by a terrible landing page.
Grade: F
Next we have a social media landing page example that comes from The Honest Company, beginning with this Facebook ad.
Which takes us to this Facebook landing page…
What Works:
A short form field with a bright button and relevant button text (the “order your trial” is much more appropriate for the offer than a simple “submit”).
Great use of color – the color pallet is very nice, and the orange button on the blue form background naturally draws attention to the button and its connected offer.
Ideally it’d be great to see the same photo from the ad repeated here on the landing page, but here we’re getting the next best thing – a very similar photo that continues the feel of the first. The ad photo and the landing page photo seem to go hand in hand, using similar lighting and colors.
What Needs Work:
Where is the offer from the Facebook ad? As a visitor we’re pretty disoriented. Sure, we see the offer for a free trial, but the ad we clicked was offering two free sample kits – a very different offer than this vague “free trial” which we are told nothing about. This is a huge problem and I’d take a guess than this social media landing page is receiving very few conversions due to the conflict and confusion between the Facebook ad offer and the landing page we see here.
Grade: C
This page could have scored higher, but we docked points for the misaligned offers.
Next we have a Facebook ad from Lumo.
What Works:
The scarcity element is a smart way to push visitors into a purchasing decision (19 unites left).
The social proof elements, albeit small, are a smart inclusion (16,000 unites pre-ordered).
Using video is a great way to explain more about a product.
What Needs Work:
The overall design feels a bit off and there is a lot of wasted space. I would choose one powerful product photo and ditch the white on white photos, in which the product is barely visible against the white background.
We really need some basic bullet points. The video is great, but it shouldn’t be mandatory for understanding your product. The video should be a bonus way to learn more, not be relied on as a crutch for transmitting details. Remember, you only have 8 seconds before users decide to stay on or leave your page! There absolutely needs to be solid info above the fold.
While I appreciate the scarcity element on this page, the bar is confusing – is it a visual element to accompany the scarcity number? If so, a meter showing a low value should be orange or red, but certainly not green, which implies that unites are plentiful. I’d recommend just scrapping the bar as it seems unnecessary.
Make those social proof points larger! If you have awesome numbers, show them off with style.
If we scroll down below the fold, we’ll see some additional info.
I would love to see those trust signals moved above the fold, and maybe the mini-illustrations as well. Visually this section is a lot more powerful than what currently sits above the fold.
There is a big trend these days to have a minimalist homepage featuring one powerful image, and while there are certain advantages to that style, it has major pitfalls and won’t work for everyone.
As a new and inventive product, Lumo can’t successfully use a minimalist page style because they really need to dedicate space to explaining their original product and concept behind it. Many landing pages fall victim to this ultra-minimalist trend, and it’s important to understand why it won’t always work, despite being a popular style. In discussing landing page best practices, we often say that you want to avoid a landing page that is very text-heavy, but going the opposite direction, with almost zero explanation, is just as dangerous.
Grade: C
Next we have a Facebook ad and landing page for Downy Wrinkle Releaser.
Right away it’s clear that this ad has a lack of intent. It’s stating what the Wrinkle Release product does, but where is the offer? The call-to-action? Let’s see what the landing page looks like…
This social media landing page is actually its own Facebook tab as part of Downy’s larger Facebook page. Creating custom Facebook tabs is a popular technique for running contests or special promotions. However, this one is quite problematic.
What Works:
The scarcity element of the countdown clock is a nice way to remind visitors that they have a limited time to enter the contest.
What Needs Work:
This offer – a promotional video contest – feels totally random. There was no mention of any kind of contest in the Facebook ad. Why didn’t the ad include a “enter our video content to win a free vacation” call-to-action? This whole situation doesn’t make any sense.
I think we can assume that the main point of this page is to get visitors to enter the Downy contest. Then why are the entry instructions so tiny? It’s way too easy to ignore them. Text size is a main method of disclosing which sections of text are more important than others. In this case, the contest instructions are the smallest type on the page, leading the visitor to quickly gloss over them. Instead we see the voting instructions in a larger text, even though getting visitors to vote is not the main goal of the page. This text is also largely unnecessary – you don’t need to tell people to click on a video in order to watch it.
The contest entry problems are exacerbated by the entry button, whose color and text matches the non-clickable submissions header below. This makes the button at first glance appear to be another non-interactive header element. That’s definitely no bueno.
We’ve really torn this page apart already, but there’s one more thing that needs calling out, and that’s the lack of entries. This poor contest has no existing entries. Who knows why – maybe this is the first day of the contest. However, having that filtering system makes the lack of entries seem all the more pathetic, especially coupled with the huge expanse of white space. How to remedy this? Don’t include the voting section at all until there are at least a handful of entries, or at least move the submissions below the fold and use more space to promote entering the contest in the first place! At the very least, include a sample video or even a Downy promo video so that space doesn’t look so darn empty and sad.
Grade: D+
The Facebook ad and landing page offer don’t match at all, and even if they did match, the landing page would still be in need of way too much renovation to earn a passing grade.
Unfortunately our Facebook landing page examples aren’t scoring very well. I feel a bit like a jerk for picking apart so many problem pages, but honestly, there just aren’t many people doing a good job with social media landing pages. Let’s move on to Twitter landing pages, where hopefully things will improve.
Twitter Landing Pages
With Twitter landing pages, you’ll want to match that Twitter mindset – quick, clever, and to the point. Most links shared on Twitter are articles and blog posts, so the idea of having a designated Twitter landing page won’t always apply. However, as Oli Gardner of Unbounce notes, Twitter visitor intent can be pretty specific when it comes to your Twitter profile link.
If a Twitter user is clicking the link embedded in your personal Twitter profile, chances are they’re looking to learn more about you and your web identity. Create a tailored page specifically with these visitors in mind. Include a welcome message calling out the fact that the visitor came from Twitter, a mini-bio reminiscent of an About Me page, as well as links to your other social media profiles. You also might consider including links or references to your most popular blog posts/content – show off a little.
A great example comes from blogger Darren Rowse.
What Works:
Note how right off the bat, Darren’s headline includes his Twitter @username. The first line directly connects with the visitor’s point of entry with the line “Thanks for clicking the URL in my Twitter profile…” Below these sections he talks about his ProBlogger Twitter account and what followers can expect to see him tweeting about. Darren also mentions his book and how to connect with him via other social sites.
What Needs Work:
One could argue that the page is on the lengthy side, but it’s broken up with several headings, so not much to complain about here.
Grade: A
Next let’s look at another kind of Twitter landing page that looks more like the other social media landing pages we’ve looked at, via paid Twitter ads directing the user to a guide or resource. Take this example from HootSuite.
What Works:
HootSuite’s pretty big on content marketing, so it’s no surprise that their social media landing pages look good. The bulleted points make the text easy to scan, and the trust signals in the lower right corner boost visitors’ confidence.
What Needs Work:
Ideally the form would be shorter, and the “submit” button would have more appropriate text. In this case, even “download” might be more enticing than “submit.” After all, the visitor isn’t excited to submit their information to you, they’re excited to download their guide. Landing pages should always focus on the offer and the wants of the visitor.
Grade: B
Next we have SendGrid.
What Works:
SendGrid is following a lot of landing pages best practices, with the smart inclusion of bullet points, images (even a mini guide image like the one here is a huge improvement over nothing), and trust signals.
The form button’s bright orange color stands out nicely against the blue background (contrast is key), and the “Start Reading” button text, along with the mini-image inside the button, is a nice touch.
What Needs Work:
The “6 kickass emails that leverage marketing” from the Twitter post aren’t mentioned anywhere on the page. If we’re really customizing this page as a Twitter landing page, let’s re-use that eye-catching tweet text in the offer description.
The main headline really shouldn’t be on more than two lines.
Grade: B
That initial tweet was so grabbing – don’t throw it away when it could add further value on the landing page.
Pinterest Landing Pages
Official Pinterest ads are on the horizon and looking pretty darn pricey. However, plenty of businesses use Pinterest for marketing purposes without dishing out the big bucks, and these are the kinds of pins and landing pages we will be looking at today.
So what should be included in the perfect Pinterest landing page? Well, Pinterest is an image-heavy site, so you’ll certainly want some powerful visual elements included on your Pinterest landing page. Also keep your audience in mind – Pinterest users are predominantly female, making up 80% of the user-base.
Let’s take a look at some examples of Pinterest pages, starting with this lovely necklace from Stuff 4 Multiples.
The pin takes us to an order landing page.
What Works:
These are great looking images, and the on-neck image helps show the length of the chain.
The savings discount and sale marker add buying enticement.
What Needs Work:
So… how do I order this necklace? The biggest problem with this page is that the order option is below the fold (under Choose Options). This is a major foul – the order button is the very last page element you’d ever want to hide below the fold. It’s the point of the page after all!
I’d recommend moving the email, review, and question options further down on the page, especially if it means making more room for the order button.
Grade: C-
The below the fold order options is what drove this landing page into the ground.
Let’s go to another Pinterest ad example from Human.
This Pinterest post takes us to…
What Works:
Everything is pretty clear cut here – it’s your standard online apparel page with a nice bright “Add to Cart” button.
I like that they have the same shirt design shown on different clothing styles underneath the main photo. These “you also might like” recommendations work here because they are extensions of what we’re already seeing, not just random gateways to other pages that might drive us away from a purchase.
The inclusion of social proof via buttons is a nice touch, although I might consider ditching the lesser known “Fancy” and “Wanelo” buttons.
What Needs Work:
There are a few things we don’t need – the search tags aren’t necessary and sizing options could be hidden behind a link.
The elephant in the room is the bright green “What’s your favorite color?” banner. Is it an ad? A link to another page? It’s very distracting and strange. There’s already an option to see more styles & colors in the link above, so there’s no need for this huge green banner.
Grade: B-
LinkedIn Landing Pages
LinkedIn ads and landing pages aren’t as popular as they are with Facebook, but as the #1 professional social networking site that’s always growing, they can’t be overlooked. Since LinkedIn is a more professional setting, your LinkedIn landing pages should match with a sophisticated design and professional feel.
Let’s go ahead and check out some LinkedIn landing page examples.
This LinkedIn sponsored post by CallidusCloud offers a free guide on marketing automation.
What Works:
The design on this page mirrors the feel of LinkedIn – clean, crisp, professional.
The image featured on this page matches the image shown on the LinkedIn ad.
What Needs Work
The form button used here is unattractive, and the “get it now” text feels uninspired – I think some A/B testing could go a long way here!
The text on this page could benefit from some variety with color or bolded text.
I’d suggest working a bit with that form headline. Even changing the form headline to “Download the free marketing guide” might be preferable. It should always be obvious to the visitor what they are about to download.
Grade: B
And finally, one more landing page example from All Covered:
What Works:
This guide image looks great and matches the ad image. The bullet points are strategically used to break down the main topics the guide will cover.
Using the color red for the sub-heading establishes its importance – bold text or powerful text colors helps readers interpret your information hierarchy (aka which lines of text are more important than others).
What Needs Work:
The form is too long – remember to only ask for what you really need. Can more intimate details like the phone number be fished for on the “thank you” page? Asking for too much information can increase your drop-off rate to nearly 70%, so consider if getting those digits is really worth the loss. Do you really need the Company Name AND Website URL? One will inevitability give you the other, so don’t bug the visitor by asking for both when it’s not essential.
Many lines of text break onto second lines when they shouldn’t – it makes the page feel messy. I would shorten the red header so it rests on one line, and then make the image a bit smaller so that the bullet points each take up only one line, rather than two.
Grade: B-
We’ve Got a Ways to Go With Social Media Landing Pages
Lots of bad grades were dished out during this social media landing page evaluation – clearly marketers are still learning when it comes to creating custom social media landing pages for relevant ads. Let’s hope that you score better – use the lessons we’ve learned today to surpass your predecessors.