• Facebook
  • Twitter

Social Unlocker


Thank you for purchasing this Social Unlocker. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

 

Scope of free support

 

We can help you with:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

Social Unlocker allows you to create uniquely designed social networks buttons to your website. It comes with predefined skins, but you can setup your custom styles as well.
Please read this documentation to discover all available options.


Plugin installation


Social Unlocker requires the following scripts to be attached in HTML page:

Javascript:

Plugin settings can be included with the following script:
To induce the script you need to use secretContainer CSS class in HTML markup, for example:

Available parameters


Define custom options with the following script:

Below you will find all available parameters.

Variable Default Type Description
timer 0 integer Set time to auto unlock content. “0” don’t add this options.
closeButton false boolean Enable/Disable button to close mask.
buttons [] array, string An array of buttons to create. The order indicates the order of created buttons. Available value: “facebook_like”, “facebook_share”, “twitter_tweet”, “twitter_follow”, “google_plus1”, “google_share”
theme ” “ string Plugin style. Available value: ” ” – (empty string), “blueSky”, “material”, “hipster”, “lollipop”, “slick”, “image”
customClass “” string Add custom class name to main container.
fullPage false boolean Enable/Disable full page type popup.
beforeInit false function Function invoke before plugin init.
beforeCreateMask false function Function invoke before create mask.
afterCreateMask false function Function invoke after create mask.
afterRemoveMask false function Function invoke after remove mask.
afterAddContent false function Function invoke after add content.
afterFBLikeClick false function Function invoke after click facebook like button.
afterFBShareClick false function Function invoke after click facebook share button.
afterTwitterTweetClick false function Function invoke after click twitter tweet button.
afterTwitterFollowClick false function Function invoke after click twitter follow button.
afterGooglePlusOneClick false function Function invoke after click google +1 button.
afterGooglePlusShareClick false function Function invoke after click google share button.

texts:

Variable Default Type Description
maskHeader “Simple test heading” string Mask header text.
maskText “Simple paragraph text” string Mask paragraph text.
timerWaitText “or wait” string Text before timer if timer exist.
timerSecText “sec” string “Second” text after timer if timer exist.
closeCharacter “×” string “Close button” value.

Facebook:

Variable Default Type Description
appId “0” string Facebook application ID important for facebook share button, but optional for like button. You can create your own app
here
lang “en_US” string Language of the button labels. More info here

likeButton

Variable Default Type Description
url “” string Link to like.
colorscheme “light” string Button scheme color. Available value: “light”, “dark”.
width “auto” string Width button container.
action “like” string Verb to display. Available value: “like”, “recommend”.
ref “” string Label for tracking referrals.
layout “button_count” string Button layout. Available value: “standard”, “box_count”, “button_count”, “button”.

shareButton:

Variable Default Type Description
url “” string Link to share.
width “auto” string Width button container.
layout “button_count” string Button layout. Available value: “box_count”, “button_count”, “button”, “icon_link”, “icon”, “link”.
name “” string Name of the product or content you want to share.
picture “” string Path to an image you would like to share with this content.
caption “” string Caption.
description “” string Description of your product or content.

twitter:

Variable Default Type Description
lang “en” string Language of the button labels. More info here.

tweetButton:

Variable Default Type Description
url “” string Tweet url.
message “” string Default message in tweet.
hashtags “” string Hash tags separated by comma. Example: “hash1, hash2, hash3”.
related “” string Related accounts.
count “horizontal” string Count position. Available value: “none”, “horizontal”, “vertical”.
size “default” string Button size. Available value: “default”, “large”.

followButton:

Variable Default Type Description
username “” string Twitter username.
showScreenName “false” string Enable/disable username inside button.
size “default” string Button size. Available value: “default”, “large”.

googlePlus:

Variable Default Type Description
lang “en-US” string Language of the button labels. More info here

plusOneButton:

Variable Default Type Description
url “” string Link to like
size “medium” string Button size. Available value: “small”, “medium”, “standard”, “tall”.
annotation “bubble” string Annotation to display. Available value: “none”, “bubble”, “inline”.
width “auto” string Button container width. Not available with “bubble” annotation
align “left” string Button horizontal align. Available value: “left”, “right”.
expandTo “” string Hover and confirmation bubbles display position; separated by comma list of: top, right, bottom, left.

shareButton:

Variable Default Type Description
url “” string Link to share
annotation “bubble” string Annotation to display. Available value: “none”, “bubble”, “inline”, “vertical-bubble”.
width “auto” string Button container width.
height “20” string Button height.
align “left” string Button horizontal align. Available value: “left”, “right”.
expandTo “” string Hover and confirmation bubbles display position; separated by comma list of: top, right, bottom, left.

Available skins


BlueSky

BlueSky

 

Image

Image

 

Hipster

Hipster

 

Lollipop

Lollipop

 

Material

Material

 

Slick

Slick


How to get the Facebook APP ID


Please follow the steps below you get your Facebook App ID:

  1. Go to: https://developers.facebook.com/
  2. Click My Apps tab
    img01 
  3. Click Create a New App button
    img02
  4. Fill in the form and click Create App ID button
    img03
  5. Go to Settings tab, add your page domain and contact email
    img04 
  6. Click + Add Platform and select Website
    img05 
  7. Then add your Site URL and click Save Changes
    img06
  8. Go to Status & Review tab
    img07
  9. Change button on the right to YES
    img08 
  10. Back to Dashboard tab and copy your App ID
    img09

Examples of usage


LIKE BUTTONS

HTMLmarkup:

Javascript:

SHARE BUTTONS

HTML markup:

Javascript:

FULL PAGE

HTML markup:

Javascript:

Elite Author
We are elite
CreateIT
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!