To lock content on a webpage until users like your Facebook page, you can use the Facebook JavaScript SDK to check if the user has already liked the page. Here’s an example of how you can implement this:

Add the Facebook SDK JavaScript code to your webpage. Place the following code just before the closing </body> tag of your HTML file:

<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // Replace with your Facebook App ID
cookie : true,
xfbml : true,
version : 'v12.0'
});

FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// User is logged in and has authenticated your app
checkLikeStatus();
}
});
};

function checkLikeStatus() {
FB.api('/{PAGE_ID}/likes?limit=1', function(response) {
if (response.data.length >= 1) {
// User already liked the page, show content
showContent();
} else {
// User hasn't liked the page, hide content
hideContent();
}
});
}

function showContent()
{
// some code to show the content - it can be a section of your page etc
}

function hideContent()
{
// some code to hide content -- you can use visibility etc
}
</script>

You also need to add facebook sdk for javascript

<script crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

The above code will check if your content is liked by the user.

The YOUR_APP_ID needs to be created from your Facebook account.

The PAGE_ID needs to be replaced with page_id of the page.