Recently in CODE: HTML, XML, CSS, etc.

Tracking outbound clicks with Google Analytics

user-pic
| Comment

You would think this would be easy - Google Analytics is such a sophisticated product and really can do some amazing things (for some examples just do a search on something like "top ten Google Analytics tips").

But searching around for this, even searching the exact phrase "Tracking outbound clicks with Google Analytics", first brings you to an outdated (!) page on Google's own website (why Google is not smart enough to point to the more relevant new page is beyond my area of expertise).

When you finally find what you are looking for, you get a detailed yet lacking explanation of how to track outbound clicks. Two examples are given - for (the newer) Asynchronous Code (which seems to be the only code still available) and for the older Traditional (ga.js) Code (you will have to decide which one to use - but if you are not using the newer code now is probably a good time to update to it anyway).

You have to put this extra code into the HTML Head of all your pages - (extra meaning that you also need to have your regular Google Analytics code in place). The key part which took some trial an error on my part, is that this code must be ABOVE the regular part of your Analytics code. I know this would probably seem logical to most people, but why something this simple can't be better explained, and an example shown, is beyond me. Unfortunately while it sounds relatively simple here, this process, by the dozens if not hundreds of posts you can find and variations and permutations there are of it, has driven hundreds of people insane.

So remember - to track clicks using Events in Google Analytics, go here for the latest code, place it in your HTML head before your Google Analytics code, change the parameters accordingly in your links (detailed also on the page linked to), and then wait a day to see your results. They should appear as "Events" in your "Content" category menu, and you can drill down further from there for specific results. Good luck -

Getting ridder of the blogger nav bar

user-pic
| Comment

Just one of those tips I am constantly looking up for clients - here it is, just add it to the style sheet:

#navbar-iframe { height:0px; visibility:hidden; display:none; }

Thanks to Amit at Digital Inspiration.

Meta Tag Generator

user-pic
| Comment
Here is a quick and easy way to generate meta tags for your website, from coffeecup.com, the: Meta Tag Generator We recently did some SEO and social network marketing for TuscanTrails.com. The existing site had no meta tags at all, so we used this tool to make an initial set for the home page (description, keyword, copyright, author, etc.), and then tweaked by hand the remaining few pages. Simple but effective.

Adding Lightbox to a Blogger Blog

user-pic
| Comment

Lightbox utilizes jQuery to make simple, effective photo presentations and slide shows on your blog or website. This set of instructions can have it up and running on Blogger in minutes.

Google Closure?

user-pic
| Comment

This http://code.google.com/closure/ needs more investigation...

Common Sense Web & Data Design

user-pic
| Comment

We are more than 15 years into this web thing. It is about time that amateurs (because that is what you are) start to grasp the basics of common sense.

First of all, most websites are small business websites - people that want to be found to sell their crap to us. So don't forget you have a client, and that they are probably busy trying to run their business and not their website (that is where you came in). When you set up something new, stick to a few basic concepts - like calling things by their names, as in the real world. Don't use cryptic acronyms or abbreviations. If you are making a website and there is geography involved, say states, call them by their names - like newsite.com/new-york/ - not newsite.com/newyk123/ which means nothing to anyone.

Keep that in mind. Then when you name a file, think the same way - the HTML page is about NY? Then call it something like about-new-york.html - not pages1ny76.html

These concepts are not hard, and should extend as far into database creation as possible also. If the URL is eventually going to have to include a query string or data base table name for some reason, at least try to use plain, simple words - with dashes-in-between if necessary.

These little tips can go a long - LONG - way in making whatever you are doing a success, for you, and your client.

Have a nice day.

Add 'Tweet This' to your Typepad Blog

user-pic
| Comment
Here is a great tip for TypePad users: Add 'Tweet This' to your Typepad Blog Hmm - that did not work as advertised - but this functionality is now built into TypePad.

Facebook Connect demo Part 1

user-pic
| Comment

I recently set up a quick demo of Facebook Connect...Basically it gives you the ability to leverage Facebook data for use on your site.


Facebook Connect is the next evolution of Facebook Platform - enabling you to integrate the power of Facebook Platform into your own site. Enable your users to...

Seamlessly "connect" their Facebook account and information with your site
Connect and find their friends who also use your site
Share information and actions on your site with their friends on Facebook


Here is a demo that will log users into Facebook on ibizdaily.com...additionally it lets you invite people in your network to use ibizdaily.

ibizdaily Facebook Connect demo

Five Useful and Free CSS templates

user-pic
| Comment

Here are five useful and free css templates:

1. Little boxes -16 basic box layouts

2. Layout Gala - 40 layouts

3. Jimmy Lin - 8 Layouts

4. Six Shooter Media - 15 templates

5. Opensource Templates -15 templates

Hosting a secure image for PayPal checkout

user-pic
| Comment

PayPal is constantly fighting off fraudulent attempts by hackers to gain access to their system and/or their users information. At some point there was a genius who managed to do something nefarious through the PayPal users logo image, so now this image must be served from a secure server (a website/server starting with https, meaning the data transfered is encrypted in transit).

Of course, many people are using PayPal because they don't have a secure server, so unless you want the generic PayPal logo over your checkout pages you have to find one to be able to use a custom logo.

SSLpic is here to solve that issue - this single function website allows you to upload your image, which is then hosted on their secure server. You get the code back to enter in PayPal, and voila, you're done.

My First Facebook app

user-pic
| Comment

Intrigued by the idea of developing a Facebook app to generate large amounts of income from the millions of Facebook users hitting my app, I decided to give it a try. It was surprisingly easy to get the basics up and running. The documentation provided by Facebook could use some work, but it is still better than most.

I started out by building the "Hello World" equivalent of a Facebook application. Basically, it is a page on facebook that shows five facebook friends who are currently logged in to the site. My application is a take on example code given to you by Facebook when you register your application with them.

You can try it out here

This is a screenshot:

facebook.JPG

Here are a few links that helped me out:

Facebook Cookbook -These guys have a few very detailed, yet simple examples to follow.

Nettuts - This guy show the basics of getting your first app up and running.

Facebook Developers Wiki - Great resource for developing apps and learning the API.

The next step is to come up with an idea that would have a plausible business impact... for me that is.

Here is the code.

Troubleshooting session states in Movable Type 4

user-pic
| Comment
So I am running one install of Movable Type Pro (at the moment version 4.23-en with the Community Pack 1.61 and Professional Pack 1.21) but I am using this install for several projects (or trying to!). 

On a new site I am developing, I had the issue of being forgotten from page to page when logged in - or seemingly forgotten. When I would navigate within the site the sign in area at the top left would tell me "Sign In" (even though I already had) - if I clicked on "Sign In", I did become "Signed In" without actually having to go back to a log in screen.

I posted about this issue here on the MT forums, and with a hint from Rob I was able to see that in fact the cookie was not being set correctly. Then something funny happened - I clicked on a "tag" of the new site, which performs a search, and I was magically logged in again. Aha - I checked out the search template and saw that in the head of the template there is some javascript:

<script type="text/javascript"> /* <![CDATA[ */ var user = <$mt:UserSessionState$>; /* ]]> */ </script>

I added this code to the Header template module right after the open HEAD tag, and now everything seems to be working. I still have some extraneous code issues, but if you were having the same sessions issue as me, this code does seem to work.

Adding Twitter Feeds To Your Blog

user-pic
| Comment
I came across a nice tutorial on how to add your tweets to your blogs, by Remy Sharp

Below is a working example of loading twitters after the page has completed, thus preventing the whole page from locking up.

Twitter Plugin

This was hacked together, so the next steps will be to clean it up and make it a stand alone module that can function as a badge and not just a blog post... stay tuned.

Guestbook in Movable Type 4

user-pic
| Comment

We have a new client who wanted to add a good old fashioned guestbook to their new site - so naturally we obliged. I came up with a quick and simple guestbook utilizing the MT Entry template, the Comment Form template, and a single entry. Since the site we are working on is running MT 4 but we were only using "Pages" for their content, we had the Entry and Comment Form templates available to carve up at will and didn't need to create a whole new blog (like some older examples do).

This is basically what I did:

  1. Stripped the Entry template and put my simplified code in there (the code that gives the Entries the same look and feel as the rest of the site)
  2. Added back into the body the mt:EntryBody tag (the title of the page is an image and that is hard coded in the entry)
  3. Below that, added the mt:Include module="Comment Form" tag
  4. Don't forget to make sure that the javascript link remains in the head of the document if you strip it clean like I did (hat tip to Tim Appnel)
  5. Save and publish this.

So since the only "Entry" is the guestbook itself, that is pretty much it for the Entry template. The other main modification is to the Comment Form template. Here is what I did there:

  1. Changed the instances of "Comment" to "Guesbook" where necessary
  2. Displayed the comments below the form (basically just cut and pasted the whole chunk of code)
  3. Commented out/deleted the URL field and other extraneous links and information (replies, preview, etc.)
  4. Did some styling of the template to make the comments stand out
  5. Save this and publish again.

Friday Funny

user-pic
| Comment

We dont do code reviews enough....but when we do, this is typically how it goes.

Enter your email address:

Delivered by FeedBurner