Code: IBM Mobile Web Push (Reactor) code for my blog

GitHub-MarkAs promised, in this post I will share the code I have on my WordPress blog to have it enabled with the Reactor code. You can download the code snippets directly from GitHub or follow the instructions below to insert the code into your Twenty Eleven Theme.

Step 1:

You will need an account on the IBM Mobile Web Push, you can use the trial for now to get start because its a fully functional trial.

Step 2:

Add this line to your header.php file, I have highlighted the code with comments that you should insert:

[codesyntax lang=”php”]

<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>
			//Custom code
			
//End Custom code <?php

[/codesyntax]

 

Step 3:

Add these lines to your footer.php – all the way to the end before the body end tag. You will have to change the data-app-key to the one provided in the campaign manager for your account.

[codesyntax lang=”php”]

/js/reactor-bundle.min.js


var mIndex = 1;
var mCount = 0;
		function updateUI(){
			
			jQuery( ".hItem"  ).hide("slow");
			mIndex++;
			if (mIndex > mCount){
				mIndex = 1;
			}					
		
			jQuery( "#messages" + mIndex  ).show("slow");

			window.setTimeout(function() {
				updateUI();
			}, 5000);			
		}

function startReactor(){

	Reactor.ready(function(){				
		Reactor.onMessage( function (message){
			mCount++;
			var b = "
" + message.body + "
"; jQuery("#statusnotification").append(b); }); }); updateUI(); } startReactor();

[/codesyntax]

 

Step 4:

Add this snippet to your style.css file:

[codesyntax lang=”css”]

#statusnotification {
	width: 100%;
	height: 45px;
	display: block;
	overflow: hidden;
	margin: 0 7.6%;
	margin-top: 10px;
	margin-right: 7.6%;
	margin-bottom: 0;
	margin-left: 7.6%;
	max-height: 45px;
}

[/codesyntax]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s