How to Lock Page Contents until share on Facebook

At the beginning of the web page, add a JavaScript code to load the Facebook like and other buttons. Prompt the user to like your pages, if he does, close the dialog. 

   
Like our pages
 
   

      Show the Facebook like buttons and other here 
   
 
 

Then in the code again, close this dialog as,

$('#support-us').hide();

This is a jQuery code, you would need to show the DIV and then hide it once user has liked your page, for more on that you will need to study the Facebook documentation, how to get a response when user likes your page.  

Just do not do that, in my opinion that is the worst user-experience a web designer can ever make. Why do you want to stop the user from doing what he wants to do in the first place? 

 

If you really want to get support, like to get the users to like your Facebook page or to follow you on Twitter, do that afterwards. Show them what they wanted to see then at the end ask them politely to support them for more of such content. That user-experience of forcing a user would always cause you to lose users, I would never like a Facebook page or follow someone on Twitter if they were to stop me from doing what I intended to. 

 

Plus, on the second hand, I would attempt to hack into their user-experience and remove that stupid dialog popup and let me watch what I had to. :-) So, where does that lead you? Take my advice, forget it. What you have is (IMO) best UX!