It is important to note that since March 11th, Facebook has restricted users to add new FBML applications to their Facebook page, which means the old way of creating a landing page (using the Static FBML application) is no longer available. So we will create a Landing Page using astatic html iframe tab application.

Let’s get started! You can create a Facebook Landing Page by following the steps mentioned below:

Fig A – Static HTML Iframe Tabs Application

Fig B – Adding Static HTML Iframe Application to your Page

Fig C – Static HTML Iframe Application added to your Page

Only eight easy steps and you can create and use your Drupal template.

Firstly, get started by opening the PSD file in any image editing software such as Adobe Photoshop. Adobe Photoshop is the most popular and widely used image editing software which is used for PSD slicing.

Next step is the slicing of PSD file into multiple layers. Go to the main ‘toolbar’ of image editing software where you will find ‘Slice tool’ tab and just by a click you can start the slicing process.

Right after the process of slicing of PSD, create a folder name as image folder where you can save all the sliced images and place this images folder inside the same folder where theme files are saved.

In the fourth step, coding of sliced images into any markup language such as HTML/XHTML takes place. Once completed with the coding task, now save this page as ‘home.html’.

You need to open a new page and save it as ’style.css’ in order to add CSS style sheet to the page. Add div tag type in the body tags. Now code these Div tags with identified class names such as .maincontent, .rightcontent, .topnav, .topcontent and .footerlogin inside the ’style.css’.

You need to download and install the selected Drupal theme to initiate the process of converting HTML page into a fully functional Drupal theme. These theme files should be stored by creating a new folder.

Now open this theme folder along with opening of file called page.tpl.php, place it right before the tag and save changes as a new file called page.tpl.php and copy changes to style.css within new theme directory. The body content of page.tpl.php will remain same as the HTML file but you should replace the sections of page.tpl.php with quality content.

Finally you should create a new page and name it as template.php. Rename the function Yourtheme_regions to theme name. Now you are done with the last step of converting HTML page into Drupal theme.

Now you are done with the conversion! All you need to keep in mind is to follow the above mentioned PSD to Drupal steps in a proper manner and sequence. This will ensure that you get a well functioning Drupal theme based website ready.

We will start with producing a simple template (header, navigation on the left, content on the right, footer); it won’t be a captivating layout as what we are interested is in understanding the technique.

Only five easy steps and you can create and use your Joomla template.

Prepare your template using HTML and css. The basic structure of Joomla Template folder is as follows:

The template folder whose name is the name of template itself (in our case it is inspiration). It contains:

• A file named “index.php”.
• A file named “templateDetails.xml”.
• A folder as css which will contain our style sheet named “template.css”.
• A folder named “images” which will contain our template images.

Fig A – Joomla Template Structure

Rename your index.html to index.php and replace the HTML code before the body tag of your HTML file with this code:

Fig B – index.php file structure

Change “your_template_name” to the name of your template, “your_css_directory” to name of your css directory, and the last, change “your_css_file.css” to the name of your css file. If you have more than one css file, you should declare them one by one.

If you have some javascript files, you should declare them with the same way.

The default Joomla template has a few module positions such as breadcrumb, left, right, top, user1, user2, user3, user4, footer, debug, and syndicate. The Joomla module positions are shown below.

Fig C – Positioning Joomla modules

To create a module position, we need to place this code ‘<jdoc:include type=“modules” name=“your_module_position_name” />’ to appropriate position. The name attribute is the module position name. The snippet code to create a module position is:

Fig D – Snippet code to create a module position

After that, you need to place a component. The code is shown below.

Fig E – Snippet code to place a component

Create a manifest file. This file can contain many data relative to the template; we will insert only a few, the obligatory ones. Our file will be composed like this. If you don’t create it, it will cause error while installing your template. Here is the sample of a manifest file:

Fig F – Configuring TemplateDetails.xml file

As you can see, the first part contains general information relative to the template, some of which can be found on the choice screen. It is important that the value of “name” is equal to the folder name. Subsequently, we find another important element that is the positions. In this section we define the available positions where to insert the various modules.

Don’t forget to enlist all your files used in your newly made template inside files tag. If you missed, the files won’t be copied to Joomla template directory during installation process. Position tag is used to declare the position name used in your template.

Package it. You may create a thumbnail of your template before packing it. It should have 206px width and 150px height and finally compress your template to a zip file and your templates are ready to go. It is always a good idea to cross-browser test all your designs so don’t forget to test it before sharing it.

Simply put, LottoGopher allows you to play the lottery online. You sign up for a membership and then order lottery tickets using your credit card. It has a social-networking layer that allows you to create and play your ticket in a group….hence, increasing your chances of winning. It still amazes me that the Lottery is a cash-only manual business. Anyway, in the first week of its launch, NBC news covered it on their 6pm segment. You can view the clip below:

Not only was this a very exciting project to sink our teeth into…it had the ingredients for a great experience. We inherited really bad and buggy code with a lot of missing functionality. Moreover, there were some interesting modules that still needed to be developed. Some of the interesting functionality we built included:

• Automatically printing lottery bet slips right from the admin interface. It was key to get this piece right since these printed slips are taken to the local store and run through their scanning system to generate the various lottery tickets.
• Creating a social layer around the core lottery business allowing users to create groups on the site and pooling their tickets into the group to increase their chances of winning.

Of course the next few paragraphs are going to sound like a blatant plug. That is because they’re directly from LottoGopher.com and explain a little about what the site does.

LottoGopher.com is the first social lottery website that allows you to easily order lottery tickets online! We make it simple to pick your numbers and order tickets for all of the official jackpot drawings in your state, including MEGA Millions and Powerball.

And now you have the option to play alone or create your own online groups to pool tickets with your friends and share the winnings… just like the office lottery pool! Now your existing office pool can be run online, or just play with your friends and family in groups.

LottoGopher also offers anyone the chance to join our public groups to meet and play together with others. If anyone in your group wins, everyone wins!

Never miss a drawing because you forgot to buy your ticket. We go to the store for you! LottoGopher is the safe and secure way to play the lottery. We offer subscriptions that ensure your tickets are purchased for every drawing so you never miss the chance to win.

We’re really excited about launching this and it gaining traction. We launched it in California for starters and the next phase opens it up to other states.

I want to start off by saying that I’m excited for my first post for 2011. One of the advantages of being a Project Manager is that you get to touch a lot of different projects and technologies. In this post, I am going to talk about ContextOptional (http://www.contextoptional.com) and how you can create an interactive Facebook application using their tools.

There are a ton of brands that use Context Optional’s social marketing solutions to efficiently build, manage, monitor and measure brand presence across the social web.

And if you’ve always wondered about how to create an application using their Social Marketing Suite, then wonder no more. I’m going to tell you how in 5 easy steps.

Fig A – ContextOptional’s Social Marketing Suite

Step 1 – What are we going to Build

We are going to buld a Facebook Contest Application using contextoptional’s tools. It provides a contest platform that includes everything you need to run a successful, user-generated video, photo, or essay contest on Facebook. You get your own branded application complete with a separate database for collecting user registration data, a comprehensive list of features and maximum customization.

Why a contest app?

• Actively engage with Facebook users
• Virally spread your brand and message
• Safely participate in user-generated marketing
• Build your customer database
• Extensive branding

Contest Features:

• Contest user-registration
• Photo or video upload, storage and playback
• Support for YouTube video embed
• Support for image embed from any site on the web
• Customization of look & feel
• Video or photo browsing
• Video or photo ratings
• Commenting on videos and photos

Step 2 – Signup for a ContextOptional Account

Before we begin, you will need to signup for a ContextOptional account here. The site uses FB connect but you will need to contact them to get setup.

The Social Marketing Suite is ideally suited for brands ready to scale their social marketing activities, while supporting multiple stakeholders, across multiple brands and geographies. As you will soon see, the biggest advantage is that you can get setup with a FB application in minutes!

Step 3 – Choose an Application type

The Applications module of the Social Marketing Suite provides a broad set of standard interactive Stream, Tab and Open applications (if you’re wondering what these applications are, you can get a primer on FB apps here) that are easy to customize and deploy.

The following standard Facebook applications can be created using contextoptional.com:

Fig B – Standard Applications

In this post, I am going to elaborate it by showing you how to create a Tab Application, i.e., an application that will show up under its own ‘tab’ on your FB page.

Once you’re logged into ContextOptional, click the ‘Apps’ link on your left menu bar to expand it to show the ‘Tab Apps’ and ‘Stream Apps’ sub-menus (see screenshot).

Fig C – Applications Tab

Click the ‘Tab Apps’ link and then in the resulting screen, click the “Create A New Application” button. This would take us to a page shown below:

Fig D – Tab and Stream Applications

If you’re having a hard time deciding between the two, here’s a little more detail on them.

Tabs

Tab apps are integrated onto a brand’s Facebook Page and provide additional opportunities for engagement between the brand and users who have liked the Page.

Stream

Stream apps are posted to a brand’s Wall and then distributed to the News Feed of each user that has liked the brand. As these users comment/Like or interact with the Stream app, it is distributed to the users’ friends as well, spreading across their social graph.

Step 4 – Creating A Contest Tab Application

From here, under the Tab Applications, I am going to create a Contest Tab Application. Using this, we can create an application to run our own contest, allowing the users to submit their entries, voting on the submitted entries. We can restrict the total number of allowed contest entries submitted by a user, number of votes allowed per user and winner settings with just a few settings here.

Clicking on the Contest Application icon, we get redirected to the page as follows. Here we need to enter the Promotion Name which we want to give to our application and click on the Create Promotion button. Also, it is mandatory to check the Facebook Terms and Conditions checkbox.

Fig E – Creating A New Contest Application

Step 5 – Configuring the Application

With our contest application created, we just need to customize its settings. The following tabs are available for us for our application’s configurations:

1. Settings
2. Submitting
3. View/Vote
4. Layout
5. Sharing
6. Custom CSS
7. Launch App

Step 5.1 – Settings Tab

Let’s work our way down and start with the Settings tab. This is the basic app info tab where

• you can specify the Application Name.
• Since this is a ‘contest’ application, you can specify Sponsorship and Disclosures under the Contest Setup section which will appear on the Submit Entry Page for the users.
• Click Save to save everything and let’s continue on.

Fig F – Application’s Settings Tab

Step 5.2 – Submitting Tab

Under the Submitting tab, you can specify

• the number of contest submissions per user.
• the number of times a user can submit an entry each day.
• the text to be shown after a user has submitted his/her entry.
• and finally customize the layout and style for the Submit Entry Form and the Upload button.

Fig G – Application’s Submitting Tab (Alerts)

Fig H – Application’s Submitting Tab (Submitting Entries)

As shown above, under the Submitting Entries section,

• You can set the text to be shown after the user has submitted his entry (like a “thanks for your submission”).
• You can also set the text for the Entry button.
• If you want to leave this blank, enter &nbsp; here.

Fig I – Application’s Submitting Tab (Submitting a Photo)

Under the Submitting a Photo section,

• You have the option of providing an image to be used for the Upload button.
• You can also enter a warning prompt for the user if they don’t select a photo to submit in the contest.

Fig J – Application’s Submitting Tab (Customizing User Info Form)

The Submit Entry Form can be customized by dragging and dropping the required fields from the Right-Hand Side (R.H.S) to the Left-Hand Side of the screen. For each added field, a unique id gets generated in the backend (this would allow you to override its styling via css).

• You can make the fields “Required” by checking Required checkbox against the field.
• You can remove the fields by clicking the Delete link below the Action column.
• Apart from the standard fields available, you can also add custom fields by clicking the Add Custom Field link if required. All of the fields added here will appear on the Submit Entry Form page of our application.
• When you’re all done with the form, click Save to save your settings.

Step 5.3 – View/Vote Tab

Under the View/Vote tab,

• You can customize your View Entry page of the application w.r.t specifying the no. of rows and columns to be displayed on the page.
• You can set the Gallery Layout, winner settings, Voting and Commenting settings.
• You can also customize the Voting Restrictions and Alerts.

Fig K – Application’s View/Vote Tab (Gallery Section)

Almost home free, stay with me now. As shown above, under the Gallery section, after setting the number of rows and columns to be shown, you can specify whether to show only those entries that have been approved, or show only winners on the Page. Other customizations are pretty self-explanatory. Again, once you’ve filled all of this in, click Save to continue.

Fig L – Application’s View/Vote Tab (Voting & Commenting Section)

Fig M – Application’s View/Vote Tab (Voting & Commenting Section)

Under the Voting & Commenting Section,

• You can specify the settings related to the voting and commenting as shown above.
• You can specify the text for the Vote link for gallery entries.
• You can also specify for example the number of times each user can vote for an individual entry per day.

Step 5.4 – Layout Tab

Under the Layout tab,

• You can set the layout for the main Entry page.
• You can customize the headers to be shown on the top of the pages.
• You can set the Terms and Conditions for the contest.
• You can also customize the settings that would allow users to “Like” the Page.

Fig N – Application’s Layout Tab (Customizing Headers)

Fig O – Application’s Layout Tab (Terms & Conditions)

Step 5.5 – Custom CSS Tab

Now let’s pretty things up a bit. Coming to the Custom CSS tab,

• Here, you can write our customized CSS for the contest application pages.
• There will already be some predefined CSS for the application pages but all of this can be customized.
• Images can also be uploaded here using the Upload tool available as shown below.

Fig P – Application’s Custom CSS Tab

Step 5.6 – Launch App Tab

Coming to the last step, the Launch App tab, allows us to deploy our Application so that it gets published on Facebook.

Fig Q – Application’s Launch APP Tab