Technology Mug

Digital Marketing for Start Ups

Ali Aurangzeb — Tue, 31 Aug 2010 07:21:33 +0000

It’s happening, it’s now and it’s here to stay. That being said, digital marketing is an avenue which leads to the next marketing highway. So be it a startup business, medium sized, multi-national or a corporation, digital marketing is for anyone who wants value for money and optimum utilization for their budgets.

What is a Startup Business?

Is the first question that comes mind. Clearly startup most startups have one thing in common limited financial resources, and the sincere will to spend wisely in order to get the proverbial “bang for the buck. Considering that, it would be pertinent to direct marketing efforts towards a more focused audience rather than a fragmented one. In order to do that we need to learn the media usage and business habits of the audience we wish to target.

If the product or service relates to the segment which uses the internet then digital should be the driving force behind the marketing efforts. Now we arrive to the next question of what can be done given the limited finances to achieve maximum results. What are the various ways the digital medium can be used for achieving goals and meeting business objectives?

Digital marketing can be done through various means and can be tailored to meet big budgets as well as small.

To understand how to allocate budget wisely it’s important to understand the following:

Once the above is understood marketers can evaluate and allocate budget accordingly.

An example of a startup business doing effective digital marketing

As the Marketing Manager I had less than $100,000 to spend on media for a consumer product with distribution in 50,000 consumer outlets. Instead of spreading those dollars among the 25 websites in the category with little or no effectiveness, I bought year-round advertising in just two. To the readers of those two websites, we looked like a major national brand. As the company’s sales grew, the budget expanded, and we were able to add other websites and communications channels.

Note: Please note this article is a guest post, written by Mr. Ali Aurangzeb.

If you like this article, please share it on your favorite website. It may help someone somewhere!

AJAX Currency Converter with Google API

Fraz Ahmed — Fri, 27 Aug 2010 15:42:03 +0000

No doubt, Google is a magical search engine. Google also provides many APIs to be incorporated in your application. Today, we will use Google’s hidden currency conversion API. Why hidden? Because there is no official documentation for it.

We will build a currency converter from scratch, it pulls data from Google and display the results using jQuery AJAX function. For you better understanding, you may visit demo or download source code below:

Demo – Source Code

Basically our whole code consist of three components – HTML for displaying interface, Javascript for AJAX functionality and PHP for fetching and manipulating conversion results from Google.

HTML Structure

HTML structure for this application is simple enough. There are two drop downs, one input field, one button and a div for displaying results. Drop downs are used for selecting From Currency and To Currency while input field is used for entering the desired amount to be converted in your selected currency. Conversion result displays in results div once you click on convert button. When you click on the button, it fires a Javascript function which is described below.

Javascript

Following is the code for our AJAX enabled javascript. Below code is executed upon clicking on convert button.


$(document).ready(function() {

 $('#convert').click(function(){

 //Get all the values
 var amount = $('#amount').val();
 var from = $('#fromCurrency').val();
 var to = $('#toCurrency').val();

 //Make data string
 var dataString = "amount=" + amount + "&from=" + from + "&to=" + to;

 $.ajax({
 type: "POST",
 url: "ajax_converter.php",
 data: dataString,

 success: function(data){
 //Show results div
 $('#results').show();

 //Put received response into result div
 $('#results').html(data);
 }

 });
 });
});

Above code is very simple and should be self explanatory, if you are familiar with jQuery AJAX function. For those who does not know, what’s going on here I tr to explain them.

$(‘#convert’).click(function… this is the starting point of our code, it means that execute the underneath code of this function when an element with id of ‘convert’ is clicked. In our case this id is used for ‘convert’ button.

After that we grab values from our HTML elements by using .val() function of jQuery and assign these values into Javascript variables. These variables are then used in dataString variable.

In our AJAX function we are using POST method and in ‘url’, we provide the url of our PHP file which will provide conversion results back to this AJAX function. We are sending ‘dataString’ as data to our PHP script.

After successful iterating to our PHP script, this AJAX function first shows our results div and out the received data into our results div as HTML.

PHP Code

The brain of our application is below PHP code.

Above code is well commented to make you understand better. In this code we are using some built-in PHP functions – file_get_contents, explode, round and ucwords.

In start we grab the values posted to this script by our AJAX function. We store these values into variables.
We make a string variable using above explained variables.
We concatenate this string variable to Google Currency Calculator API url and store the url in a new variable named $google_url.
We fetch the data of $google_url to $result variable using PHP’s file_get_contents function.
We receive data from Google something similar to
{lhs: “1 Euro”,rhs: “1.2692 U.S. dollars”,error: “”,icc: true}
Using PHP’s explode function, we separate lhs and rhs from the received response.
From rhs we get the converted value and multiply it by our dsired amount to get total conversion.
Using PHP’s round function, converted amount is round off to two digits.
After this we use PHP’s ucwords function to Capitalize our text’s first letter.
We almost do the same for lhs.
At last we make results by joining lhs and rhs and echo it to give the results back to our AJAX function.

Last words

In the source code I have applied some CSS to make the user interface better. So don’t be puzzled with the code in source file.

Finally, you have a working Live Currency Converter. You may use this script in your website to attract more visitors. Just play around the code and let me know if you can enhance it further. Please feel free to ask, your comments are always welcome.

If you like this article, please share it on your favorite website. It may help someone somewhere!

Facebook Application From Scratch – 1

Fraz Ahmed — Mon, 16 Aug 2010 18:43:28 +0000

Today, we are starting a series of tutorials for Facebook Application development from scratch. In this series of tutorials, we will develop a fully functional Facebook application. The idea behind our application is simple enough, in this application users will be able to share cakes with their friends, cakes could be posted on users’ or users’ friends wall. Users will also be able to invite their friends to this application. After completing this tutorial you will be able to:

Setup a Facebook Application
Use Facebook Authentication for aplications
Learn FBJS
Learn Facebook Graph API
Learn how to post data on users wall using Facebook Application
Learn how to post data on users’ friends wall using Facebook Application
Create a custom tab for your application

Let’s kick the app!

To develop Facebook applications you need to have a developer account on facebook.com. Click here and follow simple steps to create your developer account. Once you have created your developer account, go to:

http://www.facebook.com/developers/

At this stage you should have something similar to below screen. Click on the “Set Up New Application” button:

Tip: Click on any of below snapshots to view bigger image.

Create Application

Give your application a name and choose “Agree” for terms and click “Create Application”. Congratulations! your new facebook application has been created. Now we will look at some of configurations.

Basic Configuration

When you hit the “Create Application” button, you will be redirected to a page similar to below screen. Here you can configure your application according to your needs. For the sack of simplicity we will go for basic configuration. Later in this series of tutorials we will come back here to do more stuff.

For now you should see the same application name, you provided in last step (Share a Cake in our case). Give your application some description. You should notice ‘xxxxxxxxxx’ in below screen shot. in your case you must be having some alpha numeric characters instead of ‘xxxxxxxxxx’.

Three elements Application ID, API Key and Application Secret are very important in order to run our application in the Facebook. We will use this information later in this series. Click on the ‘Canvas’ tab at your left hand to proceed.

Canvas Settings

The area where people interact with your facebook application usually is called Canvas. The URL to access your applcation is called Canvas Page URL and the location where you host your files for facebook application is called Canvas Callback URL.

Canvas Page URL is unique for every facebook application and subject to the availability. While Canvas Callback URL is your server URL. Facebook does not host your files, you will need a server to store your application files.

In last, choose FBML for Render Method in Canvas Settings. Difference between IFrame and FBML application is a topic – we are leaving for some later time in future.

Finally click on Save Changes button at bottom.

We are done!

That’s all for setting up your Facebook Application. In upcoming days we are bringing more delicious CAKES for your Facebook Application development hunger. So stay tune with us.

If you like this article, please share it on your favorite website. It may help someone somewhere!

Twitter Revenue Model – One more way

Fraz Ahmed — Wed, 23 Jun 2010 18:44:04 +0000

Twitter is a fantastic and revolutionary web service of modern IT world. You must have seen ‘Recent Tweets’ section across the web. Twitter is enjoying a huge user base which includes not only general internet users but also businesses. They are busy in tweeting all the day. Businesses use twitter to engage with customers while some other users have found many ways to make money from their twitter accounts.

There is always a question attach with twitter: can it generate revenue? If so, how? Although we do not see any clear revenue model from twitter yet but there is buzz of ‘Promoted Tweets’ now a days.

One more way to monetize

When I was thinking that how twitter can make money, I came across an idea of displaying ads on twitter. I’ve noticed that there is a great percentage of tweets having a link in them. These links are shorten using bit.ly. Twitter can us these links effectively to display ads to users.

Idea is simple enough, display an Ad when user clicks on link attached in the tweet. There will be a skip link while displaying Ad. To avoid the user irritation, there is a possibility of displaying an Ad after a specific counter e.g; Ad will be displayed after every 10th click by same user.

What others saying?

Below are some other twitter revenue related articles. You might be interesting in reading them:

If you think there might be a better or another way for twitter to earn revenue, please share it by commenting below. Your comments are always welcome. And don’t forget to share the post on your favorite website. It may also help someone somewhere.

Detect Javascript and Flash Enabled

Fraz Ahmed — Wed, 06 Jan 2010 17:56:07 +0000

Javascript and Flash are super tools to enhance the usability of your website. You put a lot of efforts to create beautiful form validation and an attractive flash animation. But all the efforts are ruined when the visitor of your website has disabled Javascript or does not have flash plugin installed. Here I’ll provide you a little solution to escape from this problem.

First Tactic – Detect Javascript Enabled

Our first step is to detect whether visitor has Javascript enabled or not. If Javascript is not enable, we will redirect user to an error/instruction page (I create a seperate page where I give instructions to visitor that how to enable Javascript in his/her browser).

Put below code just after the tag in your web page:

Above code is executed if Javascript is disabled and redirect user to error-javascript.php. We are using tag for redirection. If Javascript is not disabled, above code will not be executed.

Second Tactic- Detect Flash Plugin Installed

There is a Javascript solution to detect Flash Plugin Installed and replace Flash animation with your custom message. In order to accomplish the said task you need to place below Javascript instead of your normal embedded code:

Above code detect for Version 9 or greater version of flash plugin. If flash plugin is detected it displays flash animation (animation.swf) else it displays an image (replaced-image.png) instead of flash animation. In the place of image you can write more text and instructions. Everything is upto on you.

Don’t forget to share the post on your favorite website. It may also help someone somewhere.

Send Emails / Newsletters using HTML templates and PHP

Fraz Ahmed — Tue, 22 Sep 2009 17:44:44 +0000

HTML emails look attractive, provide easy calls of action. And importantly creates your brand image in the eyes of your clients. But it becomes very difficult to manage your HTML emails if you want to change the look and feel of your email design. Or you may be interested in changing the content of your HTML email without playing with your code.

In this tutorial we will be sending HTML emails using PHP. This tutorial will teach you to keep your HTML presentation separate from your PHP code.

You may download all the code files, used in this tutorial, from here.

How it works?

Basically there are only three steps to send your branded HTML emails.

Read HTML template file from your specified location.
Replace variables with your data, if any.
Finally send email.

What we need?

Before we move to define the above steps, its worth to mention the requirements of this tutorial. The first thing we need to send emails is PHPMailer class. To learn more about PHPMailer class please visit the official website here. And the last other thing is your HTML template file.

Step by step learning

Here are the steps you need to take in order to develop your own email sending program.

First of all you need to include the PHPMailer class in your code. To do so you use below code:

Before moving further I would like to introduce two PHP functions we will use in our code. First one is for sending emails and second is for reading your HTML template file. First function (sendEmail) accepts five parameters and return false if email is not sent and returns true if email is sent. Parameters are self explanatory in below code:

FromName = $fromName;
$mail->From = $fromEmail;
$mail->AddAddress("$toEmail");

$mail->Subject = $subject;
$mail->Body = $emailBody;
$mail->isHTML(true);
$mail->WordWrap = 150;

if(!$mail->Send()) {
return false;
} else {
return true;
}
}
?>

The other function (readTemplateFile) reads your HTML template file and returns all the stuff found in that file. This function accepts only one parameter which is the location of your HTML file. Below is function:

Finally you need to call and pass parameters to above function to complete the task of sending HTML email. Yeah! really we almost done it. Ok we are using a template which send username and password of a user. Please see HTML template file in downloaded file. We break our last and final step in three pieces:

First of all we put data into some variables. These variables will be used later in our code. Ideally this data will be fetched from database in real world.

Now we put our HTML template data into other variable:

So we have all our file data in a variable ($emailBody). And we may change anything in this variable. We will use PHP’s str_replace function to replace the data:

To understand the above code we take first line of code. It simply replace #name# with the value of $NameOfuser variable in $emailBody variable. And now our new replaced content is stored in $emailBody variable, so now we can use this content to be passed in our email sending function below:

If email is not sent successfully, we will display error message else we will show success message:

That’s all! Now you have fully functional code to send your branded emails. If in future you want to change the design of your email, you just have to replace HTML template file. There is no need of changing your PHP code. Ideally you can use this code to send:

Newsletters
Registration Details
Forgot Password email
And for anything you want

Besides the benefits of using above code there is one shortcoming too of this code. If your user’s email client does not support HTML email, he/she will not be able to see your fancy deigned email. But there are ways to prevent this shortcoming.

Hope so you enjoyed this tutorial. Please feel free to ask or comment for this tutorial. And Don’t forget to share the post on your favorite website. It may also help someone somewhere.

jMouse Follower

Fraz Ahmed — Wed, 29 Jul 2009 19:33:14 +0000

What is Mouse Follower?

Mouse Follower or Cursor Trail is typically an image or set of images which follows the cursor in your browser screen.

Demo and Download

To understand more clearly visit demo. Alternatively you may also download the files from here.

Problem:

Today I was asked to enhance the existing mouse trail feature of a website. They were using 3 or 4 PNG images to make the mouse trail. But the problem was that images were inline. While our client wanted some more advanced animation with mouse trail/follower. And that animation was not possible without using flash animation in it.

From the above its clear that we were need to have a DIV in the script where all of the Flash embedded code may be inserted. I searched for many scripts but the problem was that they were doing well with IE but for Firefox answer was NO.

Things to do:

Eventually I had to play with code. And surely my first choice for Javascript is always jQuery. Basically the concept was so simple, to achieve Mouse Follower effect we need to do following:

Create a DIV for Flash Object (You may also use image in this DIV).
Find X and Y co-ordinates of cursor’s current position.
Change DIV position according to X and Y position of Cursor.

How it works?

Explanation:

In the above code first we define use document.ready() it simply call the underneath function on the load of page.
$(“*”).mousemove(function(e){… – this line reads that call the function whenever mouse move on any element of the page. mousemove is a jQuey event. Click here to learn more jQuery events.
$(“#follower”).css({… – this line looks for an element which ID is “follower”. This is our Flash Object DIV. In this line we change the CSS style of our DIV. jQuery has made it much easy for us to change the CSS style of any element on the move.
We get X and Y co-ordinates by calling page.X and page.Y builtin functions of jQuery.
We used margin-left and margin-top to style our DIV. Values of both margins are set equivalent of page.X and page.Y
So, every time when mouse moves on the page, our DIV changes its position itself. And this all is happening because we have defined the position of our DIV to absolute. So, DIV is free to move anywhere on the page.
We used +10 with page.X and page.Y its just because we wanted to move our object a little far from the cursor.
Our DIV has a Flash Object. And we have made this flash animation a transparent one. So, it will not hide any element on the page. Code for our DIV is below:

Don’t forget to share the post on your favorite website. It may also help someone somewhere.

Cell Phone Number Archiving

Fraz Ahmed — Fri, 01 May 2009 08:04:27 +0000

Problem:

It is common that when we change Sim card of our Mobile Phone we lose all the dialed and received numbers. Although modern mobiles has the ability to keep record of your all calls, but usually they keep record of 20 calls. And we lose the numbers we received/dialed some days/weeks ago. however, most of the calls we receive/dial to numbers which are saved in either our phone or Sim card memory. But three are times when you received a call from an unknown number two weeks ago and today you need to know the number, but chances are you have lost that number as new numbers have taken place in your recived call history.

Idea / Solution:

For Mobile Manufacturer:
Mobile Manufacturer may introduce an application in handset itself to keep all the calls history in a calender like style. And give users an option to search by date and number. And a way to clean records automatically after a certain date because data will take space to store the data. Optionally user may send the data to his/her email address directly from cell phone.

For Service Providers:
Mobile service providers may also enter to take this opportunity and provide a value added service to customers. They may develop an application which keeps all the call history with date and time. And may give user access to the data from company website. It will not be a big matter for mobile service providers to provide this service to their users as the already keep all the calls record.

Ending Words:

Although many mobile service providers provide such service. Some of them charge against this service while some not. But mobile manufacturers are not using this idea. I hope we will see such a mobile having Mobile Number Archiving service.

Don’t forget to share the post on your favorite website. It may also help someone somewhere.