How To Add Tweet To Unlock Twitter Widget in Blogger Blog

Advertisements
How many people have tried our Social Content Locker? It’s a gadget that hides the content until a person either shares it on Facebook, Tweet it on Tweeter, or +1 it. The idea behind that widget was to provide more social exposure to the Bloggers and so far that Social Content locker has received a tremendous response from the audience. Keeping that in mind, we have designed another Content hiding widget namely “Tweet to Unlock". This name is not new for WordPress users but for Blogger users it surely a new thing for them. Though, we have already released a Facebook Like to Download Widget, about few months ago, but today in this article, we will learn how to create a Tweet to unlock widget in Blogger.

Tweet to Unlock is a proven and the most trusted gadget to magnetize real Twitter followers. On the other hand, Tons of WordPress webmasters are already using this technique to get more exposure on their Twitter account. A person can easily utilize this widget to lock downloads, videos, content, coupons and etc. It will not only increase your social audience but would also bring some significant traffic from twitter.

From its title, it is somewhat clear that it consists of Twitter Tweet buttons. Whenever, a person would Tweet your content with the help of our “Tweet to Unlock” widget button. It would start displaying the hidden content. However, those who don’t have twitter an account might get frustrated if they remain unable to unlock the content. For that reason, we have also added a CLOSE button through users can easily get access to the content. Feel Free to enjoy the Following Real time Demo.





How To Install Tweet To Unlock Widget in Blogger?

To keep the tutorial as straightforward as possible, we have started to Host CSS on our server so that, users can easily uninstall it without any problem whatsoever. Consider the following steps and follow them correctly.
  • 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/tweetlock.css' rel='stylesheet' type='text/css'/> 

  • After pasting the coding save the template and proceed to next step. 

How To Add Tweet to Unlock Widget in Blogger:

Now whenever a person wants to add a tweet to unlock 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.

<div class="to-lock-simple 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)-->
</div><div id="mblunlocker"></div>
</article>

<script src="https://mybloggerlab.googlecode.com/files/tweetlock.js"></script>

         
<script>
jQuery(document).ready(function($) {
$("#default-usage .to-lock-simple").toTweet({
url: "http://www.mybloggerlab.com",
style: "ui-locker-purity",
locker: {close: true},
twitter: {text: "The Best Blogger Resource Website",
hashtags: "mybloggerlab"
}
});
});;

jQuery(document).ready(function($) {
$("#close-icon-usage .to-lock").toTweet({
url: "http://www.mybloggerlab.com" + Math.random(),
style:"ui-locker-solidity",
ext:"Tweet or click on the Close Button at the corner!",
locker: {close: true},
twitter: {text: "The Best Blogger Resource Website",
hashtags: "mybloggerlab",
count: 'none'
}
});
});;
</script>

  • Tweeted URL: Replace http://www.mybloggerlab.com with the URL that you want people to tweet.
  • Disable Close Button: If anyone don't want to display the Close button then he can replace true to false from the above JavaScript coding
  • Changing Twitter Message: Replace The Best Blogger Resource Website with the message that you want people to tweet. 
  • Changing Hash Tag: In order to add a hash tags (#) to the tweet, replace mybloggerlab with your personalized keyword.
All Done: That's All, we hope this widget would help everyone to magnetize more twitter followers and social exposure. Feel free to leave your reply.

From The Editor's Desk:

Since, all the magic is done with the help of JavaScript. Therefore, if any users would disable the JavaScript of his browser, then it would obviously stop working. The main reason behind using the jQuery is to keep your content Search engine friendly. Another way of accessing the content is the Source Code. What are your views about the Gadget? Take a lot care till then, Peace, Blessings and happy tweeting.

Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

35 comments

January 5, 2013 at 11:50 AM

best content locker you had published yet. why you host codes in your servar, why dont you embed them?

Editorial Team MOD
January 5, 2013 at 12:14 PM

We are hosting it on or server so that users can easily apply and delete them. Many user complain that they don't understand large chunk of code. For that reason we are hosting it. Secondly, it would not affect your site speed and whenever we will improve the Widget your widget would receive updated automatically.

Hope that Helps. Peace

January 5, 2013 at 12:27 PM

@Syed
as we embed codes in our blogger template it got less http request. and less http request means faster loading. my blog www.abushaleh.net have 97 google pagespeed score because i use every thing less. afterall loading speed matters :D

January 5, 2013 at 1:33 PM

watz up bro,
Way you deleted my comment? every thing have pros and cons you should accept them :(

Editorial Team MOD
January 5, 2013 at 2:17 PM

Well I Don't Think so. If you host a whole chunk of jQuery in a one file. Then it would reduce the number of HTTP requests.

Embedding Never helps in loading a site faster. There is a simple theory over it.

As Per your 97 Site speed. Thats because you are not using too many jQuery. I am unable to found a Standard jQuery file on your site. While @ Templateism we have tons of JavaScript files hosted on our server and still it has 94 Page speed according to Google.

Messing JavaScript or any kind of coding here and there always decreases your site speed. Keeping that intact in one file helps in faster and smarter web.

Why WordPress never embed JavaScript? Because they always host them on their server. That helps in increasing Speed.

Hope that clears your concept.

Editorial Team MOD
January 5, 2013 at 2:19 PM

Sorry Mate! Don't know how it went into the Spam box. I didn't do that. Its the Blogger system which automatically move it to Spam. Sorry, IF we hurt you.

We always Love when people express themselves. Take care mate. Peace

January 5, 2013 at 6:38 PM

Does not work to me. :(

January 5, 2013 at 9:34 PM

@Syed,
Even Google told us to reduce number of the http request so, we should do every thing as we can to reduce http ruquest. I can embed your custom Oswald font, it will load half sec faster then now. Yes it will make you template larger but ruduce load time. :D

January 6, 2013 at 1:19 AM

again my comment was deleted :( I am commanting using my mobile and UC browser :/

Editorial Team MOD
January 6, 2013 at 2:08 AM

It Should work? Provide your Website URL?

Editorial Team MOD
January 6, 2013 at 2:10 AM

So Do you Think Google Web Fonts are not Great?. Well, As i Told before, instead of using/embedding too many JavaScript here and there keep a 1 jQuery file. It would not only reduce the HTTP request but would also increase the site speed.

Editorial Team MOD
January 6, 2013 at 2:10 AM

No Idea :/ Whats Happening. lol

January 6, 2013 at 2:46 AM

Hey its awesome but just tell me one thing that if I have Social Content Locker and this Twitter locker-both CSS files on my blog, won't the get disturbed as the div id in both of them is <div id="mblunlocker"></div> .Hope you understand what I mean.

Editorial Team MOD
January 6, 2013 at 2:59 AM

Nope, It would not Disturb any thing. You can feel free to try. You won't find any bug. Peace

January 6, 2013 at 4:24 AM

Thanks for the reply and 1 more thing is can you please publish a post on How to add floating socialize it bar like you have. I know about your previous one but I like your current one very much. Please :-)

January 6, 2013 at 4:58 AM

Nice one. Really cool. But still, it can be accessed using source code. :(

Editorial Team MOD
January 6, 2013 at 5:06 AM

Well, If we won't make it Accessible Through Source Code then Search engine would be unable to Crawl and Index the Page. Its SEO Friendly, Hope that helps. Peace

January 6, 2013 at 6:46 AM

nice one bro, my question is off topic sorry for that,
when i am craeating a new static page blogger assigning it its own URL
eg: http://domain.com/p/blog-page_6127.html
http://domain.com/p/blog-page_3314.html

so tell me what should i do to avoid that.
i'll be waiting for your answer please.

January 6, 2013 at 6:47 PM

I think this widget is not good, Because if you like to help them no need to lock the content.. For example if the readers has no twitter account,,how to read your useful articles if you lock your content....Peace..

Regards:
Blogger Heroe

January 6, 2013 at 9:21 PM

Ya. You are right. :P Sorry.. I didn't thought that...

January 6, 2013 at 11:12 PM

Hey Good job syed.its a nice idea to increase your blogs popularity in twitter. also see this Your Widget Got the second prize in our listing

Editorial Team MOD
January 7, 2013 at 12:30 AM

I Guess You Didn't Read the Tutorial Carefully, Because we were aware of the fact that everyone don't have Twitter Account. Therefore, we added a Close Button to it. You can Enable the Close Button. locker: {close: true}, That helps in Closing the Content Locker and gives Directly access to the content.

locker: {close: true}, Replacing True to false would remove the Close button. Hope that Helps. Peace

Editorial Team MOD
January 7, 2013 at 12:40 AM

Thanks for awarding us the 2nd Spot. Peace

January 7, 2013 at 5:15 AM

Hey why are you not replying?

January 7, 2013 at 5:38 AM

Mate no need of thanks u did the best job but do comment at the post.

Editorial Team MOD
January 7, 2013 at 7:35 AM

Sorry for the late reply, Well we will share the Socialize it Bar when we would get more requests form our users. Stay tuned. Peace

Editorial Team MOD
January 7, 2013 at 7:38 AM

First Write the Title of your Static Page then Start to write your content. By doing that, the Permalinks would consist of the keywords which you typed in the Title. and The URL would look fine. Peace

January 9, 2013 at 1:58 AM

hello . Thanks for awesome widget . I am looking for a widget like that hidden content should only be shown if the user likes my facebook page or follows me on twitter . For those who already likes my page on facebook, the content should be visible .How to make that possible ?

Editorial Team MOD
January 9, 2013 at 6:00 AM

Thats quite impossible because the Widget only Catches the Cache when someone likes it.

If your Visitors have already liked your site then they can again Press the Like button and the widget would Reveal that content.

We hope that Make Sense. :)

January 9, 2013 at 6:35 AM

Okay Syed .. Thanks for the reply

Editorial Team MOD
March 12, 2013 at 3:09 PM

No problem Pal :)

October 16, 2013 at 5:57 PM

Hi, i think it's a cool stuff..

Do you have one for facebook?

Editorial Team MOD
October 20, 2013 at 10:19 PM

Here it is http://www.mybloggerlab.com/2012/07/facebook-like-to-download-widget-for.html

November 5, 2013 at 1:46 AM

Hi dear I like to use your script, I want to Remove the credit link, wanna to know How much Your price, Please inform me

January 15, 2015 at 7:02 PM

Friend, you can fix the widget for facebook. i enter in this post, but redircions me to anoher page.... need some php file.

Thanks.

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.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.