That was the fun and kind of frightening end to a great day of shooting commercials with the Denver Bronco running back, and the video has been a nice elixir to three+ hours of some pretty disappointing Superbowl television ads (How many times during the game did you ask, “They paid $3.5 million for that?).

So why Willis? It all started with a phone call from his agent. She wanted him to be associated with what she’d heard was a popular tech company. We tried to play it cool, but by the time he was scheduled to arrive we had a body painter, a professional camera crew, cranes, jibs and an office at the ready for Willis skits. The hot, new .CO domain pitched in, and we were off…well, almost.

Denver got nailed by a over a foot of snow. Our body painter was trapped in a suburb, the media couldn’t make it, and Willis’ overnight trip from Indianapolis was cancelled. Things were looking bleak, but then Willis managed to get an early flight, the body painter was able to dig her way out of her home, and our Veep of operations got a bunch of pizza.  We were off and running…

The Intro: We Wonder if Willis Will do What We’d Done Previously for .CO

The Fail: We Try to Emulate What GoDaddy Did, but It Just Doesn’t Feel Right

The Recovery: Back to What We Do at Name.com, Good ‘ol Non-Trashy Fun

The Wrap: After a Blizzard, a Stranded Body Painter and Willis’ canceled flight, it was good to have some fun.

Now watch, rate, comment, subscribe. You won’t believe what we’re rolling out next.

Update: Our pro-bowl star certainly didn’t let us down. See the sneak peak from the studio…aka Name.com headquarters in snowy Denver, Colorado…

Check back at Name.com on Sunday to see the hilarious spoof!

P.S Register .CO now through tuesday 2/7 for just $9.99! No promo code required, enjoy!

Everyone has seen those things before, right? In this glorious How To blog post we are going to show you how to implement those two buttons on your website using the JS libraries that both companies provide for free. We will start with Facebook since it is arguably the easier of the two, and then move onto Twitter.

Facebook Social Plugin: The Login Button

Facebook offers a host of what they call social plugins. The one we are interested in is the Login Button. Here are the basic steps involved in getting the button onto your webpage:

1. You need a Facebook app for your site. Go to https://developers.facebook.com/apps/ and click on the “Create New App” button.
2. Your “App Display Name” can be something meaningful. I usually go with the domain name for the site. You can use this same app for other purposes in the future as well. The “App Namespace” needs to be something that does not contain any special characters. I usually use my app display name without spaces, periods, etc.
3. Now you need to enter your “App Domain” and Website “Site URL.” For the app domain enter the domain name on which your site is hosted. For the site URL enter the full URL of your website. For example, if your domain is name.com then your site URL should be something like http://www.name.com. Save your changes once you have the proper information entered.
4. Now you will have a page that shows yours “App ID” and “App Secret”. Just leave that page open because you will need your app ID when you add the login button code to your page.
5. Now we need to go get the login button code from Facebook. Go to http://developers.facebook.com/docs/reference/plugins/login/ and click the “Get Code” button.
6. Copy the HTML5 code from the first box and for now put it just below the body tab of your webpage. The code should look something like this:
   

   <div id=”fb-root”></div>
   <script>(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP_ID”;
   fjs.parentNode.insertBefore(js, fjs);
   }(document, ‘script’, ‘facebook-jssdk’));</script>

   In the code be sure to replace APP_ID with the app id you created for your Facebook app.

7. Now paste the code from the second box in whatever place you want the login button to reside. The code should look something like:
   

   <div class=”fb-login-button” data-show-faces=”false” data-width=”200″ data-max-rows=”1″></div>

   I changed the data-show-faces attribute to false because with it set to true the logout button will not render when the user is logged in.

8. Most people want to be able to logout and for some reason Facebook makes you add additional attributes if you want the login button to change to a logout button.  You can also add a scope attribute with a comma delimited list of permissions you want to ask the user for. Adding the logout attribute and a scope, should we want one, and we end up with something like:
   

   <div class=”fb-login-button” autologoutlink=”true” scope=”publish_stream” data-show-faces=”false” data-width=”200″ data-max-rows=”1″></div>

9. Refresh your page and you should have a super fancy Facebook login button.

There are a lot more things that you can do with the login button and a lot of things you can do once the user has logged in using the Facebook JavaScript SDK but that is a bit beyond the scope of this article. One thing in particular is grabbing the Facebook ID of the user and associating that in your database with stuff they do, an existing local account, configurations, etc. You also have access to the Facebook Graph API which opens a whole world of potential for you when dealing with a user connected to your site via Facebook.

Twitter @anywhere

For Twitter integration we will be using their @anywhere API. Like Facebook they offer a bunch of functionality but for now we will be focusing on the User Login functionality:

1. You are going to need a Twitter app. Go to https://dev.twitter.com/apps/new and fill out the form.
2. For “WebSite” make sure you use the full URL to your site. For example: http://www.name.com. For Callback URL enter the same. Save it and you will be taken to the details page for your app. For our Twitter login button we will be needing the “Consumer key” so go ahead and leave that  page open.
3. We need to include the Twitter @anywhere library so put the following code somewhere on your webpage. Just before the closing body tag is usually best:
   

   <script src=”http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1″ type=”text/javascript”></script>

   In the code replace YOUR_API_KEY with the consumer key for the app you created.

4. Now put the following code where you want the Twitter login button to reside:
   

   <span id=”login”></span>

   The id attribute can be set to something more meaningful for your particular implementation if you wish.

5. To generate the login button you will need to include the following Javascript:
   

   <script type=”text/javascript”>

   twttr.anywhere(function (T) {
   T(“#login”).connectButton();
   });

   </script>

   If you changed the id attribute in the step above be sure to reference it properly here by changing “login” to whatever value you used.

6. Refresh the page and you should now see your Twitter button!

Just like Facebook, once the user is connected via Twitter there are a lot of things you can do and a lot of information you can acquire. You can pull the user’s Twitter ID and associate it with a local account, pull information related to the user’s Twitter account, and more. Read up on @anywhere to find out more.

Basic One Page Example
You will need to replace both API keys with your own.

<!doctype html>
<html>
<head>
<title>Facebook and Twitter Login Example</title>
</head>
<body>
<!– div element required by Facebook –>
<div id=”fb-root”></div>

<header>
</header>

<div>

<!– div element where the Facebook login button will render –>
<div class=”fb-login-button” autologoutlink=”true” scope=”publish_stream” data-show-faces=”false” data-width=”200″ data-max-rows=”1″></div>

<!– div element where the Twitter login button will render –>
<span id=”login”></span>

</div>

<footer>
</footer>

<!– load the Twitter @anywhere JS library –>
<script src=”//platform.twitter.com/anywhere.js?id=aB96ybCPDjdDb2X8gYYg&v=1″ type=”text/javascript”></script>

<script type=”text/javascript”>

// initialize Facebook
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=200794916679736″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

// initialize Twitter
twttr.anywhere(function (T) {
T(“#login”).connectButton();
});

</script>

</body>
</html>

Quirky Stuff

There are some odd ball things that happen with both of these platforms. There are ways around them which I show in the more detailed example that you can download at the end of this article. Here are the most glaring:

• When you click the Facebook logout button it does not automatically turn back into a login button.
• When you connect via Twitter the button does not allow you to click on it to log out. It just tells you that  you are connected.

A More Detailed Example

This zip file contains a quick example that deals with the various quirks and also displays the basic information returned for the user when they login. It’s in the CodeIgniter framework, includes the super cool HTML5 Boilerplate, and jQuery so there is a bit of extraneous stuff, but it’s what I got already put together. You should be able to pull it apart and make it work for your own purposes.

example.zip

Introduction: Puberty!

We think we’re a pretty open and transparent company. After all, we do invite you inside to tour our offices, give us feedback on upcoming redesigns, and if god forbid something happens and a server goes down, we’re on the front lines of Facebook and Twitter letting you know the play by play.  Today however we kick open the doors and begin the discussion that every grown up has to have: we’re going to talk about our company vision. More specifically, our journey to discovering our vision, what a vision is, and why having a solid, defined, clear vision is important for the success of any business. As we go through this process, we’re going to turn ourselves inside out. We invite you to follow along.

First, get to know us a little. Name.com is an 8-year old startup. We’ve been successful by offering an easy and accessible user experience with little upsell and a ton of customer service. It’s been good to us, but sometimes we joke that we are in the awkward teenager phase trying to figure out who we are, what our strengths are and what we need to work on. We need to define who we really want to become. The short answer is that we’re here to make money (just being honest!), and in order to do that we must deliver excellent products and services, at competitive prices, and provide stellar support. That is great but we want to be better than great – we want to be the best. So how do we get there? First we have to figure out where ‘there’ is…

Next up…Finding Our Vision! Is that you and your company? Let us do the hard work and follow our road to one Big, Hairy, Audacious Goal!

Kathy Ciaccarelli! (fireworks)

She owns the gourmet gift shop Sweets N’ Smiles and creates high quality gift baskets, party favors and the best chocolate covered pretzels anywhere.

We know this because she’s really good at selling her wares. When I emailed her the good news about the contest, she replied in perfect promotional form:

Sweet! Now she’s offering a promo code in return for our promo code. We could collapse into promo code spiral ending in a melee of free stuff. Until then, thank you Kathy for the virtual fist bump, and for encouraging great customer service. Please give her some love by visiting her site. It is, after all, almost Valentine’s Day.

How do you calculate a conversion rate? First you have to define what a conversion is for your website. Here at Name.com a conversion occurs when a user purchases a domain or a product from our website.  Once a conversion has been defined calculating the rate is a breeze. Divide the number of conversions by the number of unique visitors your website had over the same time period. Viola! Now you know your conversion rate.

You may be wondering how to go about obtaining a count of your unique site visitors and conversions. Well, you’re in luck. There are a number of useful tools out there to help you do just that and through the wonders of the web you can access a few of them for free.

Google Analytics is a free service that calculates and summarizes website statistics. Once configured, you can see how people arrive on your website, how long they stay, where they go, calculated conversion rates, revenue generation, and so much more.  If you don’t already have this service enabled we strongly recommend it. Learn more about Google Analytics here.

PadiTrack is a sales funnel calculator that plugs into Google Analytics and allows users to set up specific conversion funnels. It is particularly useful if you are selling multiple products with separate pages and flows.

So, you have gone through all the trouble outlined above. You defined a “conversion”, set up Google Analytics on your website (which is an amazing accomplishment in and of itself), and calculated the conversion rate. Whew, that was a lot of work! Now, what do you do with the information?

This is the age-old problem that a lot of companies face. We know our conversion rate, but what do we do with it? The answer is both simple and complex. You know the conversion rate, now INCREASE it! That was the simple answer. Things get complex when you ask, “How do I increase conversion?” There is an entire field devoted to accomplishing this task, known as conversion optimization. Conversion optimization attempts to analyze user behavior, provide marketing insights, and establish recommendations to help your site get an increased conversion rate.

Thus begins a series of blog posts about conversion optimization. Today is the introduction to the concept with more specific concepts and topics to follow… all designed to make sure you know how to build a website, setup hosting, get more traffic, and convert that traffic into revenue. Be sure to tune in!

P.S. Yes, we got bitten by the infographic bug this weekend.

Thought this was a great follow up to the “importance of Focus” blog post.  Here a university professor shows the actual negative effect on the brain that multi-tasking has when compared to a singular focus.  So remember, whether it’s buying a new domain name, setting up your web-hosting, building your website, or getting traffic via search engine optimization… focus!

(Thanks to Rasmussen University for the infographic!)

So we stood up, and we Tweeted and we blogged, and many of you probably spoke your piece thinking, “This is pretty easy compared to Syria.” And it is.

We’ve got it pretty good in America, and our efforts will make it even better. SOPA has been shelved and PIPA has lost a lot of friends, and we can only hope that those who make these deals know that we’re watching…and we will do something about it.

Rock on.

Like a little song? Love some American Pie? YouTubers LaughPong have done an amazing redux of the Don McLean classic to teach us more about the legislation (and why the web is so dang awesome.)

What the heck is a LOLcat? (Imagine a post-SOPA/PIPA world where Wikipedia is blacked out all the time.)

Who doesn’t love cartoons? This incredible mix of live action and animation is clearly made by dedicated & passionate people, and it is an all-in-one tutorial. Get educated!

PROTECT IP / SOPA Breaks The Internet from Fight for the Future on Vimeo.

I’m sure there are many more great protest media. Let us know about them!