Pay with a Plus

Fade or slide in existing content

Using this example, we can have content hidden in a div on the page, and reveal it once the user clicks the +1 button.

Example

+1 this page to reveal new content!

This is hidden content

As if by magic, some new content appears. Obviously you could include a download link in here.
Like this, for instance

The code

Inside the <head> tag on your page, place the following (ideally just before the closing </head> tag). Download the required files on GitHub.

					<script type="text/javascript" src="PATHTO/paywithaplus.min.js"></script>
					<script type="text/javascript">

						function paywithaplus(data) {
							var x = new $.payWithAPlusPlugin({
					
								displayDiv: '#hiddenContent',
								displayType: 'slideDown',
								displaySpeed: 1000,
								
								// Push this as an event GA?
								pushToAnalytics: true,
								customPushEvent: 'PayWithAPlus', 
								
								// Do not edit below this line...
								buttonPush: data.state,
								buttonHREF: data.href
						
							});
						}
						
					</script>
				

A quick explanation

This will probably make better sense if you've read the blog post, but here's a quick explanation. Firstly we're including the script. Note the PATHTO (ie, where you've put it). Also note you should have already included jQuery. There are 5 settings here that we can customise. As above, each one needs a comma after it. The only things you need to include are listed in bold.

Back to the index...
Back to the blog post...