SocialLocker Maker Tool

By M.Muzammil Wednesday, 8 May 2019

Share Tweet Share Share Email

SocialLocker Maker Tool is here for you to make sociallocker for your website.

Make socialLocker for your blogger site of any other cms sites.

This is a demo of how your content will be locked while using this sociallocker.

LockerButtonsCodeHelpMore

CSS Selector

×Info
Specify a CSS selector which matches the content you wish to lock.

Locker Header

×Info
Type a header which attracts attention or calls to action. You can leave this field empty.

Locker Message

×Info
Type a message which will appear under the header. HTML tags allowed.

Please support us, use one of the buttons below to unlock the content.

Theme

×Info
Select the most suitable theme.

StarterSecretFlatDandishGlassOverlap Mode

×Info
Choose the way how your locker should lock the content. The blurring mode works in all browsers except IE 10-11 (In IE 10-11, the transparency mode will be applied).

FullTransparancyBlurringOverlap Position

×Info
A position where the locker has to appear.

TopMiddleScrollingBlurring Intensity

×Info
You can change the overlap intensity for the blurring mode.

12345678910Timer Interval

×Info
Sets a countdown interval for the locker.

Close Icon

×Info
Shows the Close Icon at the corner.

Google Analytics

×Info
If set On, the plugin will generate events for the Google Analytics when the content is unlocked.
Note: before enabling this feature, please make sure that your website contains the Google Analytics tracker code.

Show Always

×Info
If on, the locker will appear always even if it was already unlocked.

Social Buttons

• Facebook Like
  URL to like

  ×Info
  Set an URL (a facebook page or website page) which the user has to like in order to unlock your content. Leave this field empty to use an URL of the page where the locker will be located.

  Button Title

  ×Info
  Optional. A title of the button that is situated on the covers in the themes "Secrets" and "Flat".

  I see the "confirm" link after a like.

  ×Info
  Optional. Facebook has an automatic Like-spam protection that happens if the Like button gets clicked a lot (for example, while testing the plugin). Don't worry, it will go away automatically within some hours/days. Just during the time, when Facebook asks to confirm likes on your website, turn on this option and the locker will wait the confirmation to unlock the content.
• Facebook Share
  ×Warning:
  If you get any errors when enabling or using the Facebook Share button, make sure that you registered a Facebook App for your website correctly.

  URL to share

  ×Info
  Set an URL which the user has to share in order to unlock your content. Leave this field empty to use an URL of the page where the locker will be located.

  Facebook App ID

  ×Info
  By default, the developer app id is set. If you want to use the Facebook Share button you need to register another app id for your website.

  Button Title

  ×Info
  Optional. A title of the button that is situated on the covers in the themes "Secrets" and "Flat".
• Google +1
  URL to +1

  ×Info
  Set an URL which the user has to +1 in order to unlock your content. Leave this field empty to use an URL of the page where the locker will be located.

  Button Title

  ×Info
  Optional. A title of the button that is situated on the covers in the themes "Secrets" and "Flat".
• Google Share
  URL to share

  ×Info
  Set an URL which the user has to share in order to unlock your content. Leave this field empty to use an URL of the page where the locker will be located.

  Button Title

  ×Info
  Optional. A title of the button that is situated on the covers in the themes "Secrets" and "Flat".
• Twitter Tweet
  ×Warning:
  Due to Twitter API limits, the locked content may be accessible for visitors who close the Tweet dialog without sharing.

  URL to tweet

  ×Info
  Set an URL which the user has to tweet in order to unlock your content. Leave this field empty to use an URL of the page where the locker will be located.

  Tweet

  ×Info
  Type a message to tweet. Leave this field empty to use default tweet (page title + URL).

  Via

  ×Info
  Optional. Screen name of the user to attribute the Tweet to (without @).

  Button Title

  ×Info
  Optional. A title of the button that is situated on the covers in the themes "Secrets" and "Flat".
• Twitter Follow
  User to follow

  ×Info
  Set an URL of your Twitter profile (for example, https://twitter.com/softwebtuts).

  Button Title

  ×Info
  Optional. A title of the button that is situated on the covers in the themes "Secrets" and "Flat".
• Linkedin Share
  ×Warning:
  Due to the technical bug on the LinkedIn side, the locked content may be accessible for visitors who close the share dialog without actual sharing.

  URL to share

  ×Info
  Set an URL which the user has to share in order to unlock your content. Leave this field empty to use an URL of the page where the locker will be located.

  Button Title

  ×Info
  Optional. A title of the button that is situated on the covers in the themes "Secrets" and "Flat".
• Youtube Subscribe
  ×Warning: if you get any errors when enabling or using the YouTube button, make sure that you registered a Google App for your website correctly.

  Channel ID

  ×Info
  Set a channel ID to subscribe (for example, UCTCypANZQHkiFmcs5MbC-Pg).

  Google Client ID

  ×Info
  If you want to use the Youtube Subscribe Button you need to get a Google Client ID for your website.

  Button Title

  ×Info
  Optional. A title of the button that is situated on the covers in the themes "Secrets" and "Flat".

Language of Buttons

×Info
Select the language that will be used for the social buttons in Social Lockers (refresh the page to view changes for the Like and Google buttons).

EnglishCatalanCzechWelshDanishGermanBasqueSpanishFinnishFrenchGalicianHungarianItalianJapaneseKoreanNorwegianDutchPolishPortuguese (Brazil)Portuguese (Portugal)RomanianRussianSlovakSlovenianSwedishThaiTurkishKurdishSimplified Chinese (China)Traditional Chinese (Hong Kong)Traditional Chinese (Taiwan)AfrikaansAlbanianArmenianAzeriBelarusianBengaliBosnianBulgarianCroatianDutch (Belgie)EsperantoEstonianFaroeseGeorgianGreekGujaratiHindiIcelandicIndonesianIrishJavaneseKannadaKazakhLatinLatvianLimburgishLithuanianMacedonian MalagasyMalayMalteseMarathiMongolianNepaliPunjabiRomanshSanskritSerbianSomaliSwahiliFilipinoTamilTatarTeluguMalayalamUkrainianUzbekVietnameseXhosaZuluKhmerTajikArabicHebrewUrduPersianSyriacYiddishGuaraniQuechuaAymaraNorthern SamiPashto Lazy Loading (beta)

×Info
If on, social buttons are loaded only at the moment when the locker gets visible on the screen (for better performance).

Show Counters

×Info
Display counters for social buttons (Tweet Button doesn't have counters).

This is the generated code which you have customized now you can copy it and use it. To use this code follow the steps provided below and do as it is said.

1. Include jQuery and the plugin files in to your page

Copy the code below and paste if just before </head> .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/softwebtuts/softwebtuts.com@10ea051e82047ef873bbf98b14ab90da6770e803/jquery.ui.highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/softwebtuts/softwebtuts.com@10ea051e82047ef873bbf98b14ab90da6770e803/pandalocker.2.1.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/softwebtuts/softwebtuts.com@7fbb7d9fca798da4baef2aeca3d35f30c2c5145e/pandalocker.2.1.0.min.css"/>
<script>//<![CDATA[
$(document).ready(function () {var credit = "<br/><a id='mycontentcredits' href='http://www.softwebtuts.com/' title='Softweb Tuts' ref='dofollow' terget='_blank'>Created From www.softwebtuts.com</a>";$(".onp-sl-message, .to-lock").append(credit);});
//]]></script>

2. Generate And Paste Locker Code

Then paste the locker code (after the code above and before the tag </head>). Don't forget to apply the CSS selector you set (by default, the CSS class 'to-lock') to content you wish to lock.

3. How to lock content ?

Copy the following code and replace Place Your Content Here with your content which you want to lock and replace YourClassSelector with your class.

<article id="default-usage">
<div class="YourClassSelector" style="display:none;">
Place Your Content Here
</div></article>

If You have any difficulty while making sociallocker watch this video below or contact me i am here to help you.

These are some required articles that might help you to do different things that i have done and shown in the above video.

More Options
Creating Facebook App
Getting Google Client ID
Using Events
Using Ajax
Troubleshooting

M.Muzammil

I am a web designer and developer sharing knowledge is my passion and web designing is my interest but it is not bigger then my interest in islam.