How many people are using Social networking websites to boost their Website’s Traffic? There are tons of professional Bloggers who entirely depends on the Social Traffic. However, it is extremely difficult to get social exposure quickly. Though, there are some widgets which help to increase social followers, but it is not enough. If we want to dominate the social web, then we have to make use of each and every opportunity that we have. For that reason, we have come up with one of the much anticipated Social Widget of all time, Social Content Locker.
Do you use multiple social sharing widgets on each and every page of your site? However, still your social exposure is on the lower side. Actually, the problem is that, people love your content. Therefore, they don’t click the social buttons and instead Read and leave your website because they don’t care about your traffic or your website. Asking people to like, +1 or tweet to get access to your content is indeed an ideal way of forcing users to share it on the social web.
Social Locker consists of three social buttons and a locker displaying horizontally. The Social buttons consist of Facebook, Twitter and Google plus. Whenever, a person would either press Like, Tweet or Plus one button it would display the hidden content. This allows a person to get more real social followers. Feel Free to enjoy the Following Real time Demo.
How To Install Social Content Locker in Blogger?
The Steps are extremely straightforward that even a small kid can follow it. There is no need of learning any Html coding because all we have to do is to copy paste the coding. Just follow the following instructions.
- Go To Blogger.com >> Template >> Edit HTML >> Proceed.
- Search for </head> just and above it paste the following CSS Coding.
<link href='http://mybloggerlab.com/StyleSheet/lockercss.css' rel='stylesheet' type='text/css'/>
- After pasting the coding save the template and proceed to next step.
How To Add Social Content Locker in Blogger:
Now whenever a person wants to add a Social content locker in his specific article, then he can follow the following instructions. (Remember: The same steps can also be used on Gadget Area and even in a template).
- Go To Blogger.com >> New Post.
- Select the HTML Tab from the blogger post editor and paste the following coding.
<article id="default-usage"><div class="to-lock" style="display: none;"><!--Hidden Content Starts (You can Use HTML BELOW)-->
<div style="text-align: center; margin-bottom: 20px;"><img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" /></div><div style="text-align: justify">Add Your Hidden Text Here</div><!--Hidden Content Ends (You can Use HTML ABOVE)--></article></div><div id="mblunlocker"> </div><script type="text/javascript" src="http://mybloggerlab.com/Scripts/mbllock.js"></script>
<script>jQuery(document).ready(function ($) {$("#default-usage .to-lock").socialLock({text: {header: "Share it To Unlock This Content",message: "Yes, this is Social Locker. Just try it, click on one of buttons."},style: "ui-social-locker-secrets",buttons: {order: ["twitter", "facebook", "google"]},// twitter optionstwitter: {url: "http://www.mybloggerlab.com",text: "Upgrade your social buttons to get more social traffic!"},// facebook optionsfacebook: {url: "http://www.facebook.com/mybloggerlab",appId: "418044881593120"},google: {url: "http://www.mybloggerlab.com"}});});;;;</script>
Customization:
- For Facebook: Replace http://www.facebook.com/mybloggerlab with your Facebook Page.
- For Twitter: Replace http://www.mybloggerlab.com with your Website's URL or etc.
- For Google+: Replace http://www.mybloggerlab.com with the URL of your website or post.
- Replace Add_Hidden_Image_Here with the Image that you want to Hide.
- Replace "Add Your Hidden Text Here" With the text that you want to hide from users.
Remember: Don't forgot to Add Facebook App ID otherwise the Facebook Like button will not appear properly. i.e. Replace 418044881593120 from above coding.
All Done: That's All, we hope this widget would help everyone to magnetize more social followers on your website. Feel free to leave your comment.
From The Editor's Desk:
We are sure this widget would act as an icing on the top. However, using source code a user can easily get access to the hidden content but he should be smart enough to do that. Mostly visitors are not that smart so don't worry about it. What are your thoughts about this widget? Suggest would be welcomed Take a lot care of yourself till then, Peace, Blessing and Happy socializing.
Original Resource:
Original Resource:

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
127 comments
Your way of thinking is very smart and that nice widget is proving it . well done
@Raheem Ahmed Khan!
Sorry Sis Your Comment Was Removed Due to some technical Problem I Republished the Article. Yes, Well actually there are tons of Social Content Locker for WordPress and many other Platform so we decided to create one for Blogger. Yeah, The whole code is Written By MBL Developers. Take Care Peace
@Rounak Baral
Bro, Due to some Technical Problem With Blogger the Article on which you comment was removed. Therefore, We Republished it. The WordPress plugin you are talking about has different Dynamics because Blogger is entirely different From WordPress. We have not used any WP source. We have used a Jquery File that does the Job Quite perfectly.
Ohh Its Cool Dear Sir
Its out Pleasure Atif Bro, Thanks for leaving positive reviews. Peace
why m i feeling impressed by the MBL developers:-p
LOL :) We would Continue to Impress you Miss..
Yeah, You can also use it for that Purpose. But we already, have a Widget Called. Like To Enter Social POP For that Purpose. Any Ways. Peace
Cool locker..
Great work MBL Developers
great work
Wow bro it's great... Can you make it for wordpress ?
nice one . it is awesome sharing button. thanks for this :)
Claps Cool bro amazing :)
mashaallah. amazing, how can you do that? oh yeah, btw how can i lock youtube video?
This is a cool widget however, don't you think it will require a criteria to be able to put this on site. Especially for the new blogs.
mmmm,yummy, Tasty . Even This Widget Tests more Sweet than a Christmas cake!! Really You are the Real Santa For Bloggers, and this is the best gift for them!!:-)
what's About FB App Coding !What To do with FB App id?/
Keep the FB App ID Unchanged. Peace
Tooooooooooooooooo Cooooooooooooooooooooooooooool!!!!!!!!!!!!!!!!!!!!!! Wonderful Piece of work syed! Really impressed! :D
My blogger tricks ... we found a better blog helper :D
replace facebook app id with what ?
You have to create a App To Get the ID. However, if you don't have one then Use the Default ID that we have used in the widget!
Well, It Depends on a Person that Where and How He use it. Peace
The facebook button is not showing up ... :(
I tried making an app but with no fruits
See here : http://www.yourpcgenie.net/2012/12/christmas-giveaway-orange-treat-premium.html
Use the Default one i.e. 418044881593120
Not working bro .... even with the default app !
Hmm! its working fine at our End. No Idea why its not working for you. May be you have to create an APP Id of yours!
Brother I want to learn Jquery Tutorials pls put the series post ...
// Peace
@Everyone!
ATTENTION: Redirecting to MyBloggerLab Bug Fixed! Please Reapply the Steps as mentioned Above!
Regards:
Syed Faizan Ali
Very smart and beautiful widget Locked widget. Thank you for creating and sharing it.
Its keep redirecting to your site my friend :/ Happy new year!
Thats Because you are trying to Remove the Credits. :). If you keep the coding as it is then it would not redirect to our site. Peace
cool man !!!! nice script.
but i wants to lock my whole post. and want users to share that post on fb, twitter etc....
pls tell me about that
If You want to Lock Your Whole Content then Simply Paste the Following Codinging in the HTML TAB of POST
<article id="default-usage">
<div class="to-lock" style="display: none;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
Paste Your Hidden HTML HERE
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="mblunlocker"> </div>
Well, That thing might Annoy users that's why we think 1 Like or Tweet or Google +1 Should unlock the article.
Hope that Helps Peace
This is nice widget dude! Thanks a lot for sharing this content locker.
will you plz provide locker for facebook follow(as newly introduced).
Hi, it seems ur an expert on blogging stuff, i am in deep need of help, can u plzzzzz help me with this 1 query plzzzzz
I installed fb comment box from this tutorial: http://www.helperblogger.com/2012/03/facebook-comment-box-for-blogger_06.html
My fb comment box is working but i have a big question to ask, hope u solve my query...
this is the link to my blog: http://ultimatesqs.blogspot.in/
when u go to any individual post on my blog, like for example this one: http://ultimatesqs.blogspot.in/2013/02/blog-post_3873.html
as u can see, i get my fb comment box below the pic and below fb comment box i get my social sharing buttons, my problem is that the social media sharing button comes below fb comment box whereas i want first social media icons and below that i want fb comment box, as i don't know anything about coding can u plzzzzzzzzz reply in as simple steps as possible, plzzzzzz my e mail id is vishalrpanchal@yahoo.com desperately waiting for ur reply...
Email Us your Full Blogger Template in XML Format.
Go To Blogger.com >> Template >> Backup/Upload >> Download Full Template.
Email that XML File to Support@mybloggerlab.com
We would Do the rest!
Done, waiting for ur reply, just make sure that below my every post these things should come in this order
1) Rate this posting
2) MY social sharing buttons
3) Facebook comment box
Thanks a zillion in advance...
No reply from ur side? u got my e mail or not? Waiting...
http://ultimatesqs.blogspot.in/
Really cool widget !
But I want only the +1 content locker not the tweet & Facebook !
Can you help ?
plz reply soon :)
Currently we don't have an Google+ Locker but surely would develop it sooner
woooo ...
thanks syed. this is a important article for social media marketing :D
I read on internet that using social locker in blogger may land your blog in trouble, like the blog can be blocked permanently? is it true? i really love your social content locker but i am scared to use as i dont want my blog to get blocked. pl throw some light on this as i dont know much in this? waiting. Thanks
http://ultimatesqs.blogspot.in/
No, there is no problem with using Social lockers on your Site. Since, you're using jQuery to all the work so there is no reason for banning or limiting your account. Feel free to use it.
ok so finally i used this locker, it works like a charm , no doubt about it, but i have now 2 problems, 1 small problem and 1 big problem after using this,
Small problem is that when i lock a content which has no text (Apart from the blog post title) only 1 image which is locked, so after unlocking such posts there is a big gap between blog post title and the start of the image. like 4-5 blank lines?? dont know how to get rid of that
and second big problem is that my blogs home page gets redirected to your site (mybloggerlab), i can go to individual posts without any problem but as soon as i go to my homepage it gets redirected to ur site? did i do something wrong?
plzzzzzz reply, as i want to use this locker but without this problems.
http://ultimatesqs.blogspot.in/ (As of now i have removed the locker because of the redirect problem)
Desperately waiting for ur reply...
To Stop redirection Do as follows.
<b:if cond='data:blog.pageType == "item"'>
PASTE THE JAVASCRIPT CODE OF CONTENT LOCKER HERE
</b:if>
Provide your blog URL so we can see what is the problem with padding
Ok it works amazing now, no redirects and no padding, just 1 last thing, in social locker when i click on tweet option, a new tweet window opens, so far so good, but my website message in that window is 8 characters more than 140 (which twitter allows to tweet), i tried all settings in blogger blog but i am unable to find the place where i set this message edit? plz tell me how to edit this default twitter message which comes when u click on tweet in this social locker. Thanks a zillion.
http://ultimatesqs.blogspot.in/
Hey! Mybloggerlab Team. You guys are doing so Wonderful job. I really appreciate your work. You have made blogging at blogspot So easy! Your Widgets make blogger one strong opponent of Wordpress.. :D
Now my question regarding this widget is that..
Can I make those like google+ tweet buttons Sharing/liking my Post instead of just following my facebook/google+/twitter fanpages?.. I want users to like my Post .. Share it on Google+ .. tweet its link on twitter.
can it be done?
Thanks!
Its very simple keep the Facebook and Twitter Field empty so it would become a Google+ Locker.
why redirect to your blog bro
my blog www.hackingway.net
To Stop redirection Do as follows.
PASTE THE JAVASCRIPT CODE OF CONTENT LOCKER HERE
i use this code also but still redirect to yours
You must have Removed some credits. Otherwise it never redirects. Peace.
as you might like buttons for sharing?
I bought the original license Codecanyon, how could it work in blogger, if files are disferentes to your you provide here?. Try uploading the files to dropbox, I insert those files with your code you provide but still does not work, the original version can not work in blogger jquery?
I am afraid you should have purchased a Licence from us if you wanted to use it on your Blogger site. Since, you have purchased it from codecanyon.com then you should as their support. We cannot help in this case.
and you sell the license? what is the price?
21$ For one licence.
The licence of wordpress value 21$, Blogger more cheap no?
You get the same thing but tweaked for blogger.
but has the option of sharing instead of I like? and has no advertising mybloggerlab?. I want no advertising or visible (not even in the code)
Yes in paid version, you won't see any credit links.
but I'm interested in all the buttons are to share content (The only thing that is good is to twitter), because I want the one I like is to share and +1 also is to share. If this is possible, tell me how to do the transaction for payment.
Well, any optimization is not possible. You would get the same thing that is listed above.
You can Pay through Payza(AleryPay)
First of i want to say thanks for creating such a wonderful widget. It works perfectly on my blog, however it displaced my sidebar. Can you provide me with some assistance on how to eliminate this minor issue.
Thanks in advance...
Yes Sure.
Could you provide me the code of link locker for blogger, in which i want to add yocaptcaptcha's captcha. anyone will click on link in my post get a popup captcha after solving it he will redirected to the actual link
where can we add this code in our template
its good but how do i add embedden code to youtube insted of the text? plzz help
Please Change the JS and CSS File with the new one. We have updated our code.
yess..
I was looking for this
thank you for sharing
bro i want to remove powered by
how to remove
In this case you have to buy a licence to remove the credits.
hi dear I want to buy this script please send me your price please
30$ email: support@mybloggerlab.com
hold on a second... first, you write a post about a plugin thats is not even yours, then you brand it as yours, (even if the code isnt the exact same,the look is identical) , you not even mention about the backlink/credits and you ask DOUBLE the price that original plugins are? 30$ to remove a text link? Are your serious? I am sorry to tell you but something is wrong with you. i used to like this website, but this is really greedy...
Hi,
We have made contracts with the Original developer of this Plugin, So these price are made up with the same standards as it is available on the marketplace You can check at the bottom of the article there are credits mentioned to the original source
It is a Partnership
Yet we are giving it for FREE, just for the sake of your great readership :) with a small credit at the bottom nothing else
I really need help, WHY THE FACEBOOK LIKE BUTTON is not showing up?
-I've tried to use my APP ID and the default ID but still not showing.. Please help...
http://tronicflow.blogspot.com
This might be a FB problem
Hello,
It does not work. All i see is the credit to your website, nothing else shows up. What could the problem be?
My website is ApkMesh.com
There must be something wrong with my template, because i tried it on another blog (with different template), and it worked. Can you help me please? Thanks
This Depends on the template. Some custom template doesn't support multiple scripts.
Is this legal? Blogger will not delete my blog because of this?
Yes its legit, we are using it on this post and works fine.
I couldn't understand your query sir
And what if I use this content locker with a site with adsense?
They will not suspend my adsense account? Thanks for the answer.
Yes, Feel free to use it with any Ad network. AdSense too
Yes you can use Generate Permalinks before publishing posts. And Add that link to share the url of the same post.
Facebook like note active for blogger netvietplus.net
http://4.bp.blogspot.com/-ct5pPbSSXcw/UuoN_rkidWI/AAAAAAAAGVs/W8M-cvUymk0/s1600/loi+facebook.PNG
It's stopped working on my site yasterday, after it's worked great till then...
Please fix asap!
My site:
http://www.sportipim.com
Hi, The scripts are down. We are updating it ASAP
Hi MBL team, just want to ask how to customize the header of this widget because in my blogger themes, the header seems white and can't read. Please check it for you to find out, I put the locker at my blog at www.cyberhideout.us. Hope to get a response from you, thanks in advance.
I am not sure what you meant?
The widget looks like this on my browser...
??
Thanks for this awesome tutorial. I only have one problem, TWITTER option does not work. When I click TWEET nothing happens. Could you check?
Hi, Make sure you have Twitter JS in your template to show up the twitter button
That's a great code! but it seems not to work on Chrome. The twitter box is not working well and the g+1 box is empty...
Hi, You can see the demo it works well with Chrome. And tweet has no options to display 2 tweet button in one page. So make sure you have 1 tweet button on a single page.
How can i remove the credits?
It cost 30$ to get Credits removed.
Thanks for this script, works fine and I make some good traffic using this share content and have good profit. Actually I make 40 dollars a day when my traffic increase.
Hey, I love this :)
But whenever I open my homepage it keeps redirecting me to your homepage, I didn't touch the credits like, I don't care if its there(you deserve the credit for this awesome widget), but I don't like that it's redirecting.
Help ?
My web : http://studioillegal.info/
HI!!! Great locker, but from today is not working...at all
HI!!! Im using this locker for 1 year, but from yesterday it doesnt work...it seems that needs to be updated.
You need to buy the script. Currently you are using Public links (that goes down when a lot of user use it). So buy script form us and host it on your own :)
Thanks for reply!!! How can I buy this script? from where? Can u help me with this?
Please contact support@mybloggerlab.com
Hi admin this was a nice article but please can you tell where to find our applID of Facebook?
You can get your APP ID from here
http://developers.facebook.com
You can share the css files and js to my email please. or send the original links droopbox.
email: andres.live.ec@gmail.com
Hello, I could explain how to place the code on the tickets?
In "Add_Hidden_Image_Here" I put the URL of the image?
.. The truth Explain that part because I do not understand much, sorry for English, is to use google translator.
I appreciate your response
Hi, things are same for custom domain and blogspot domain. You must be not following steps correctly.
Bro its css host is not working
It works properly on without custom domain in blogger but do not work on custom domain as i remove custom domain it works good but when i use custom domain it don't work properly. Please help us?
In this social lock facebook links are not working. It saying an error that Unable to load SDK.Please make sure that nothing blocks loading of social scripts on your browser.
Its work perfectly for me, i need one suggestion shall i change the google plus into the google plus follower option , i need more friends follow me thats y i ask , can u give me the solution
NOT WORKING U HAVE A TUTORIAL?
Css File not Found !? Can you upload again
Its Fixed! working fine.
Working fine now!
apparently the CSS document is not available.
facebook button not working anymore
Facebook like button not showing ?? why ?
how get facebook app id?
Follow this tutorial:
http://www.mybloggerlab.com/2013/06/how-to-add-facebook-recommendation-bar-in-blogger.html
Facebook button is not working. It give the error: "Param width must be a number"
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.