[How-to] Implement a 'Content Unlock' widget in Unbounce (by using a Wordpress plugin)

  • 2 August 2017
  • 9 replies
  • 69 views
dimitrisv

community tips scripts banner

Wouldn’t be awesome if we could use Wordpress plugins in Unbounce?

I mean, your landing pages are already optimized for conversions… but by adding custom plugins (such as a social locker) you can now achieve even more robust functionality, leading to some pretty amazing results. 🙂

We build a lot of landing pages using Unbounce at Enrollhand, and luckily for us, Unbounce allows us to add javascript, css and html to our pages which are pretty much all the ingredients we need to clone a wordpress plugin that doesn’t have back-end functionality.

social locker

In this example, I will deconstruct the One Press Social Locker plugin. I am offering an infographic to those visitors who like my fan page on Facebook. The action the visitor must take is to “Like” my page, in order to “unlock” the Download link that leads to the infographic.

You can see this in action (built in Unbounce) here:
http://jobs.movinhand.com/using-wordpress-plugins-in-unbounce/

How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Step 1.

Find a template you like. I was browsing around different marketing blog and then came across this article at Ryan’s Stewart article about Youtube SEO which had a nice built in Social Locker template.

29 AM

Looks good! Let’s use it.

Step 2.

Let’s say that our objective is to increase your blog’s social Facebook signals , so I am going to keep just the Facebook button.

I am not going into detail on how you can clone a front end element from any website. You can find the exact HTML/CSS/Javascript here.

Unfortunately you can’t see it live because Facebook does not allow this kind of calls from sandbox environments. But feel free to use any of the blocks

Step 3.

Go to your Unbounce Page and create an HTML block.

22 AM

Then Copy and Paste the HTML section of the code there.

26 AM

Step 4.

Add a new CSS stylesheet to your Unbounce page.

47 AM

Then copy and paste the section below there. Make sure to open it with <style> at the beginning and </style> at the end.

14 AM

Step 5.

Ok, let’s add some Javascript. The first part is the Facebook SDK which will connect Facebook with your widget. The second part is just a jquery that tracks when the blog post like is completed and then reveals the button with the infographic link.

You need to replace appid and version with your own data.

11 AM

Step 6.

Get your own appId and api version. Go to https://developers.facebook.com and create an account if you don’t have already. Then click Add a New App.

23 AM

Give it a name and then click Create App ID.

21 AM

Then click on App you just created.

41-PM

Finally, you can find in the Dashboard both the AppID and the Version.

05-PM

📝 Note: The functionality might work without AppId and API version but because of the asynchronous execution of the script, I noticed that is a bit faster when I use them. Feel free to test it as you want and let me know if you experience something similar. If you decide not to use them, just delete them from the script.

Step 7.

Now just replace your own Fan Page URL in the HTML code below:

unnamed-1

That’s it!

Mind you, this solution is far from perfect. Someone with basic knowledge can inspect your page and find the link himself. But it’s an example of some the capabilities a tool like Unbounce gives you when it allows you to execute javascript on the page and manipulate DOM.

If you have any questions, comments or problems - just post it in the comments below and I’ll do my best to answer. 🙂


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

9 replies

Jess
Rank
Userlevel 7
Badge +1

HOLY COW this is amazing @dimitrisv!!! I know specific customers who will directly benefit from this. This is unreal! :clap: Nicely done!

dimitrisv

I am glad you liked it @Jess 🙂

E

@dimitrisv, this is great! I’ll test it out and reply on how it goes.

Stefano
Userlevel 7
Badge +4

Wow! This is very cool. Thank you for sharing!

J

Let us know how it turns out, @ellen.nyarko! 😃

dimitrisv

Thanks @ellen.nyarko. Let me know how it’ll go.

LiveMNC

And here’s the code of the final files. header-lp-example.php:

> <?php wp_title( '|', true, 'right' ); ?> <?php wp_head(); ?> >

page-lp-example.php:

<?php /* Template Name: LP Example */ get_header('lp-example'); ?> 
        <div id="main-content" class="main-content">
               <div id="primary" class="content-area">
               <div id="content" class="site-content" role="main">
               <?php
               // Start the Loop.
               while ( have_posts() ) : the_post();
                     // Include the page content template.
                     get_template_part( 'content', 'page' );
               endwhile;
               ?>
               </div><!-- #content -->
               </div><!-- #primary -->
         </div><!-- #main-content -->
<?php get_footer('lp-example'); footer-lp-example.php:
<?php wp_footer(); ?>

Author : http://livemnc.com/web-hosting/

JJJ
Badge +1

I am getting this problem. Has anyone been able to produce a working version they can share?

The box unlocks and shows our FB likes but when liking or unliking we are not getting the content unlock button.

https://repair.hookupcellular.com/locker-box-experiment/#

JJJ
Badge +1

@dimitrisv
@ellen.nyarko
@LiveMNC

Reply


Terms & ConditionsCookie settings