Use Google+1 Button as content locker for WordPress article
You have probably seen many sites running promotions where you can unlock license or download software after liking them on Facebook or Google +1.
The +1 button has a convenient JavaScript callback that could be used for all sorts of fun things, Such as hiding content on a page.There is no need to buy plugins like WPFacePages, Google Plus to Download.
First you need to put the button markup to your page, as well as the content you wish to be hidden. The content will be hidden till the user click the +1button.
Follow the steps:
Steps1: Install the Hana code plugin check here.
Steps2: Open the Hana code settings Configuration for Hana Code Insert.
Step3: Create the new entry name plus1.
Step4: Add the following code to next box
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">// <![CDATA[
// ]]></script>
<script type="text/javascript">// <![CDATA[
function plusone_callback(response) {
if (response.state == 'on') {
$("#plusonecontent").fadeIn();
$("#plusonebutton").fadeOut();
}
}
// ]]></script></pre>
<div id="plusonebutton"><span style="color: #3366ff;"><strong>UnLock Google+1 for
More</strong>.</span>
</div>
<div id="plusonecontent" style="display: none;">
Step5: Create new entry name closeplus1.
</div>
Step6: Now to lock your post content insert {{ plus1}}
Step7: Then add the information which you want to lock.
Step8: After inserting the content then close {{closeplus1}}
The visitor will be able to see the information only when Google +1 button is clicked.
[wpdm_package id=’5205′]
Eg: [hana-code-insert name=’GOOGLE1′ /]
[hana-code-insert name=’closegoogle1′ /]
[hana-code-insert name=’Lineads’ /]
Its good way of locking & unlocking of buttons. These will show the new technique.
I almost got it but I seem to not be able to hook the button to the script to open the content, you speak of button markup but kind-of confused.. any help please?
may i know what & where u need help show me the page where u deployed it
here it is http://learningproducto.com/.
another thing (I know my google +1 isnt work yet) but it seems like I can check and uncheck my +1 on my other google account (testing the button) Now is this supposed to happen?
So like a person would “click” +1, download my product, then go back to unclick (defeating the purpose)
thanks venkat
have you installed the Hana code plugin
then create a new entry name insert the code in step4
then again create a new entry name insert the code in step5
[first entry name]type your message [second entry name]
Just by copying and following the steps it will work
well here is my post script right now:
{{plus1}}
download
{{closeplus1}}
(before it was with am embedded button)
{{plus1}}
Download
{{closeplus1}}
It’s still doesnt pop up the button – just a blue text
My Custom Short Code format: Start indicators is {{ , End indicators }} and i enabled PHP (just incase) but still no luck with it =/
Well i switched my theme back to twenty ten and disabled all my plugins. I’m using firebug to find the problem but i’m seriously thinking I’m just missing something stupid. I swear I followed your steps to the “T” it’s just the button doesn’t show, only the blue text.
you say “First you need to put the button markup to your page” this gets me confused because I don’t know what you mean and this seems like the only thing I could see me having the problem with.
i have attached the code please download the code and check
THERE’s THE BUTTON! =) but i think it’s on your callback so the content is not hidden if it’s clicked or not.. i’ll play around with it more tonight to get it to work.
It looks like it work on your site you can change the href url to your post permalink so that user have to +1 before reading
just fYI (updated code) you left the tag still in plusonecontent. Thank you so much for this awesome feature.
clicked the +1 button.previously visible. Livetut.com
function plusone_callback(response) {
if (response.state == ‘on’) {
$(“#plusonecontent”).fadeIn();
$(“#plusonebutton”).fadeOut();
}
}
Hello mate,
followed the instructions to a T, but doesn’t work for me.
This is my test page, and as you can see it brings in the actual button – but there’s no hidden content.
http://www.grabandgolessons.com/helloworld/
I copied and pasted as given in the instructions with the downloadable text file that you recently uploaded.
Cheers for this, but as yet it doesn’t work for me. 😉
i do not see any deployment of the button
thanks for tutorial and instructions!
everything works ok but when page is reloaded locked content goes again locked.
should it be like that?
yes it will lock again when reloaded..
Ok. thanks for reply.
That was quick. If your service in real life is so swift, than everything less than excellent would be insult for you.
I understand that content is locked again but if the same user wants to see that content again, he has to unlike +1G and than like again.
from the user standpoint it’s annoying, especially if we consider average user, who is dummy.
I had style issue with thesis theme.
issue was the last closeplus1 .
if you check your code, everything is opened and closed with div’s, as it should be.
closeplus1 inserts closing but there is no opening div:
google + locker
anyway, thanks for excellent tutorial.
Kind regards from Slovenia
:((
don’t work me!
use the download code it will work
Big thanks for unlock button information