Spilled Milk Designs » Tutorials

Showit and the iPad | Pt 1 of ?

Nick — Sat, 29 May 2010 14:56:21 +0000

So I picked up the iPad a few days ago because we’re working on some updates that will convert our MilkPress Themes to an iPad friendly version, as well as convert the flash into all html. On top of that we’re going to build in some other cool features so we needed the iPad to make sure it worked. Love those “work purchases.”

In playing around I’ve noticed some things that I wanted to share. First, I definitely think you should create a +Site JUST for the iPad. The reason being is that the images should have different resolutions so they don’t look like crud on the iPad. The resolution of the iPad is 1024 x 768. So on your header for your html site, it needs to be 1024px wide (but on the stage in Showit at it’s current size). Second reason is that you want to make those buttons bigger for fingers, and maybe introduce another swipe gallery from HTML (notice the pt 1 of ?…). This is all so new so we’re learning as we go.

Another big reason that you should create a +Site JUST for the iPad will be video. For the time being, if you want a quick way to get video playing on your iPad site you can copy and paste the embed codes from youtube into your “page html”. The iPad will automatically recognize that it’s a YouTube video and show the HTML5 version of the player. The neat thing about this is that it’s integrated with the look and feel of the iPads OS down to the button glow. The downside of course is the branding issue; it’s a YouTube video. We do imagine putting in an open sourced video player, but the ones that I’ve seen so far are….ehh. The one we’re interested in hasn’t been released yet. This is just the beginning though. If there’s a world of iPad users surfing the net with no where to go, you might as well embrace them and build a site just for them. All with Showit…..all included. How sick is that?!

For Android users I recommend you start building a flash website right now and tailor it to them (ours is in the works). Since flash has already landed on the Nexus One and is currently Droid bound let’s serve them a mobile flash website. The difference here is the scale, or size of the site. You want GINORMOUS buttons and text so that it appears, correctly to scale, on a device thats 320×480 in resolution. The videos you currently have in your Showit website will work just fine (and is ultimately the reason I think they don’t work right now within Showit mobile) because they are already flash.

Anyhow there’s still a ton of work and research to be done but I wanted to post this up so you guys can know what we know. Have a super safe and fun Memorial Day weekend!

Facebook and Showit | Revisited

Nick — Sun, 02 May 2010 15:57:40 +0000

Want to integrate Facebook even further into your Showit website? Here we’ll explain how to add the “like” button, or a “like box” (previously known as fan page badge). Now keep in mind that the chances of Showit building these in are pretty high so don’t be surprised if this method is rendered obsolete at any time (at which point this post will be updated). The great thing about this method is that it can be done regardless if your hosting with Showit or not, and can be added to any +Site that you have published. All we’re doing is adding a piece of Javascript to the Custom HTML section of your Showit website (advanced section).

Add “like button” to Showit website.

1. Open Showit. Go to Site—->Settings—–>Advanced. Tick the box next to “Custom Header HTML.” Paste the following code in it’s entirety into the space provided. This will put a “like” button in the upper left hand corner of your website. Towards the end of the code string you’ll see left:2px; top:2px; The px is the number of pixels from the edge of the screen. Chance left to right, and top to bottom to move it to the bottom-right of the screen.

2. There are a few things you’ll need to change in the code above before you publish. First, change the URL spilledmilkdesigns.com to your own. The title, site_name, and image location all need to be changed as well. Those correspond to what you’ll see come across facebook after someone “likes” your site. Read more here.

3. After changing the information publish your site. If your hosting your own site you’ll need to go back and re-upload the index.html page.

4. There is one more thing you can add to the like button. Supposedly you can add another meta property tag called fb: admins, followed by your user ID. This then pops up the word “admin” magically next to your like button. Clicking on that takes you to a special Facebook setup with your og: image used as the profile image. You can then blast off a status update to the walls of the people who have liked your site. Pretty neat right? It would be cool if it worked though. We spent a good while messing with it to no avail.

Add “like box” to Showit website.

Todd from Showit gets most of the credit on this one. The problem with the facebook fan page badge was that there was no way to “hide” it, meaning it would always be visible. In 5 seconds (I’m pretty sure it was 4 seconds) he wrote out a piece of code that will automatically close the “like box.” Now this is very much a page hack so we take no responsibilities if you break your site. With that to say, I’ll mention again the likelihood of Showit releasing these features into the builder, rendering these methods obsolete. Proceed at your own risk (although if you follow the instructions it’s as easy as copy and paste).

1. Find your fan page id. To find this click on your fan page profile image, then look up in the URL for a set of numbers at the end of the address. Take note of that string of numbers, you’ll need it in the next step.

2. Open Showit. Go to Site—->Settings—–>Advanced. Tick the box next to “Custom Header HTML.” Paste the following code in it’s entirety into the space provided. This will put a like box in the lower right -hand corner of your website.

3. In the 4th line of that code, where it says /likebox.php?id=137013621744 …the number needs to be changed to your fan page id that you grabbed from the 1st step. Also, the last line of code…where it says img src=….that URL needs to be YOUR url to the fb_likebox.jpg image. Feel free to go the url http://sites.showitfast.com/10803/715/fb_likebox.jpg , save the image, upload into your Showit account, then replace the link in the very end of the code above.

4. Publish your site, and remember if your hosting on your own you’ll need to re-upload that index.html page. The like box is placed at the lower right but if you know HTML the box can be moved anywhere on the screen.

5. Visit our website for the likebox example. While you’re there it wouldn’t hurt to join our fan by clicking “like.”

Any questions sound off in the comments.

Tweak your Tweets!

Nick — Fri, 05 Feb 2010 16:06:43 +0000

Showit provides a Twitter widget to display tweets. The good thing is that it’s quick and fits most designs; the bad thing is that it’s not able to be used in some designs. There IS a bit of a workaround that will give you a little bit more control, and may allow you to achieve the look you we’re initially going for.

Open Showit, and add the Feed Reader Widget to the stage. Next, visit your Twitter profile while logged out. Look to the very bottom, of the right sidebar, and you’ll find the RSS icon to subscribe to the timeline feed. Copy this link, and paste it into the “Feed URL” section. That’s it! It will only display a minimum of three posts, but you can shrink the widget down in the advanced panel (canvas size), and get rid of the scroll bar to make it look like it only has one tweet. Finally, style and tweak your tweets!

Embed your Showit Site into Facebook

Nick — Tue, 08 Dec 2009 03:22:25 +0000

*Edit* – This method is obsolete. Showit pushed out an update that will do this for you automatically. Click here for more information.

http://www.facebook.com/pages/Houston-TX/Spilled-Milk-Designs/137013621744?v=app_4949752878

Facebook won’t allow you to embed your Showit site the normal way using the embed code. We have to use Facebooks own coding language dubbed Facebook Markup Language or FBML. Luckily we’ve figured it all out for you and will explain how to embed your Showit site into your Facebook page.

*The particular Facebook app FBML mentioned in this post only works with Facebook Fan pages. Use the Facebook application My HTML for personal profiles.*

We’re going to assume that you already have the embed code provided to you by Showit, and we’re going to assume that you want to embed your entire site. The sizing inside the code doesn’t matter so don’t worry about it. If you have music on your site, you may want to duplicate the style group and embed one without music as to not surprise your visitor. Facebook doesn’t have ANY audio coming from it so it would be a shocker. Your code will look very similar to this one below:

sid=10803/715&sp=home-1&fw=800&fh=541&it=0&ip=1&pc=00000d&sc=00000d&cmp=1">

There is only one line of code that you need; the site ID line which is in red above. This is different for everyone so please use yours unless you want to promote our site, in which case we are fine with that as well.

You’ll need to change the “800″ and “541″ to “760″ and “513″ in the code marked in red above. 760px is the maximum width of the canvas space on Facebook.

With your line of code handy, open up Facebook and find the place to browse for more applications. Search for FBML, and add it to your fan page. Next, go to the profile view of your Facebook page, and click the “edit page” link. Scroll all the way down until you see the Website-FBML application, and click on “edit.”

Rename the Box Title to Website or whatever you’d like, then copy and paste the following code into the FBML box:

swfsrc='http://sites.showitfast.com/pl/site.swf?PLACE SITE ID HERE' imgsrc='IMAGE URL' width='760' height='513' />

Where it says, “PLACE SITE ID HERE“, you’re going to paste the site ID line from above that you took from your embed code from Showit. Make sure there is no space between the ? and the start of the site ID code.

You’ll need to give your visitors something to click to activate the canvas space. We’re not sure why this is, but hey it works. Take a screen snip of your site, and re-size it to 760×513. Upload it into Showit and grab the link to the asset. If you don’t know what that is then upload to Flickr or somewhere else. You just need somewhere to host the image. Replace the “IMAGE URL” with the URL to your loading image, then click on “save changes.”

Next, go to the profile view of your Facebook page, and click the “edit page” link. Scroll all the way down until you see the Website-FBML application, and click on “application settings.” It should be set to Box: Available | Tab: Added.

Good luck and if you run into any glitches just ask for help in the comments section. If it doesn’t work you did something wrong. If you like these little hacks then let us know!

*Updated*
Screencast tutorial here

Showit sites are fast

Nick — Thu, 03 Dec 2009 18:26:54 +0000

Google is most likely going to change their search algorithm to account for site loading times. In laments terms, if your site loads slowly then you will not rank well. Are you ready for that? Want to find out if your site is loading slowly as compared to other sites? Measure your site speed with Google Webmasters Site Performance Tool. This can be found in your Google Webmasters account (which you should be using for your Showit site anyway), under the “Labs” section and is listed as “Site Performance.” If you don’t already use Firebug then don’t worry about installing the plugin. That’s mainly for development and debugging purposes.

If you don’t have any data yet, don’t fret. Your site may have not been up for long enough to collect data. Also, don’t worry if it says your “average load time” is more than a few seconds. That is average, and is accumulative. What we’re looking at is the example load time from the / URL which is the first page of your site. It should be under 1 second. If it’s not then you may want to re-think what you have loading right off the bat.

Here is a screenshot from our site. It says our average loading time is 2.5 seconds, but that our site loads in 0.8 seconds. That is FAST for a flash site. It’s also interesting to check out our other sites, for example learnshowit.com has an average loading time of 0.8 seconds, which is faster than 93%of all sites. Pretty impressive for a Showit site. These figures also DO NOT account for the Rapid Hosting that Showit just released yesterday. With Rapid Hosting, there is no wait for your Showit site to load, as long as you don’t bog it down with 50mb videos, 5mb photos, and 8mb mp3s. Compress that junk down and save your visitors some time, and their sanity. We’re going to keep an eye on this as we just setup our site for Rapid Hosting. We’ll post back our findings after a few months of collecting more data.

*Update – Well that didn’t take long. After the above tests we’re run we flipped the switch to rapid edge hosting. Once that happened our load time was cut in half! Our Showit site now loads in 0.3 seconds, which is faster than 98% of all sites measured. See for yourself.

Tip – Canonical Meta Tags & Showit SEO

Nick — Sun, 06 Sep 2009 14:50:04 +0000

I have a photography website up and have been on page 5 of Google for my key-phrase for some time now. A few weeks back I learned about the Canonical meta tag. It essentially tells the search engines, “hey search engine…my website is www.site.com not site.com.” It also helps to avoid the penalty by Google for having duplicate content by telling the search engine to permanently index your site as “www” or with no “www,” depending on what you specify. Some search engines view “www.site.com” and “site.com” as two different sites, therefore seeing it as duplicated content. We know that they are not separate sites, but search engines think they are.

Armed with this information I made ONE edit to my .htcaccess file (only works if you have your own hosting account), and it moved us up 5 pages on Google to page 2. The .htcaccess file is located in your root folder of your hosting account. *Please note – We are not responsible if you mess this up. Backup the file before you do anything at all.*

Below is the code to add to your .htcaccess file. You ONLY need to replace what’s in red.

This is the code you’ll use if you want WWW in front of your domain name.

RewriteEngine On

RewriteCond %{HTTP_HOST} !^www\.example\.com
RewriteRule (.*) http://www.example.com/$1 [R=301,L]

This is the code you’ll use if you DO NOT want WWW in front of your domain name.

RewriteEngine On

RewriteCond %{HTTP_HOST} ^www\.example\.com$
RewriteRule ^(.*)$ http://example.com/$1 [L,R=301]

*EDIT*

We had a few folks as about the other way around so we edited the original post and posted both codes. If you happen to have a WordPress blog at the root of your hosting account you’ll need to add whichever line of code AFTER the WordPress code.

Showit Tips and Tricks – Round #1

Nick — Tue, 18 Aug 2009 15:45:26 +0000

This started as a reply to a question on Club Showit, but we figured the information was viable enough to be shared with others.

If your in a business where you are selling YOU, such as photography, then your website has to reflect YOU. What this is going to do is bring YOU the type of clients that YOU are looking for, and that you resonate the best with. What works for some, will not work for others. For example if another photographer doesn’t like your site, that’s good. The site is not tailored to fit their needs and personalty.

With that being said, there are two different direction you can go in with a build. The first direction is super unique and creative. This could be something like a realistic site with 3D elements. On the other hand, you could go into a more clean and simplistic direction to where the images do all of the talking. You have to figure out what works best for you, and what you like. Build your site tailored to fit your personality, and you’ll attract the kind of clients that you are hoping for.

Fluidness - Keep things fluid. There’s nothing worse than the navigation disappearing when going to another page.

Main Nav - Make sure that the navigation is easy to access, and that the information is displayed in a way that it’s not competing with the design of the site.

Sub Nav- Keep sub navigation fluid. For example say you have a page with 2 photos on it; wedding photo and engagement photo. These photos enter their respective galleries. So, you click on the weddings and you go to the weddings gallery. BUT, what if you want to view the engagements gallery? Well, you have to take a step back just to get a step forward. This mere act of backtracking causes your visitor to sub-consciously loose focus on what they we’re after, and breaks up the fluidity of the site. You can remedy this by always including in some way shape or form, easy access to other parts of your site. In summary…back-tracking is evil.

Fonts - Keep your fonts sizes down, and make sure your fonts match. I could give a whole lesson on typography, but just know that NOT all fonts go together. There are two basic types of fonts. Serif fonts have that thing on the end of the letters, non serif fonts do not. Serifed fonts should be used for things like nav and sub navigation. Non-serifed fonts are to be used for paragraph text. With sizes….keep your navigation to between 19-24 pt. This depends largely on your chosen font. Paragraph text should be kept between 14-19 point, again dependent on the font. It get’s tougher with large screens. We run 23″ monitors so 16 point to us looks insanely large, but in reality it’s the perfect size. The average screen resolution used to view sites right now is 1280 – 1440, which breaks down to 15″ – 19″ monitors. In summary…your navigation shouldn’t be the first thing you notice when someone visits your site.

Music – This is more a personal opinion than anything else, but we think music on a site is a no-no. However if you insist on having music on your site, at least have it start at a volume of 10-20. This way your visitor isn’t rocked out of their seats because their volume was turned to max from watching the movie the night before and forgot to tun it back down.

Transitions - Please keep the transition out values to half the value of your transition in value or your content WILL overlap when transitioning between pages. Example: Transition In – Fade 0.6 – Transition Out – Fade 0.3

______________________________________________________

Tidbits:

We are currently working on 10 custom builds which are slated for launch between now and the end of this year.
Our rates increased just a tad; custom builds now begin at $2000 US.
We are still looking for someone who has skills with AS and Flash. Please contact us if you are interested in being part of the team here at SMD.
SMD launches Dare Dreamer Media. Follow @rondawson on Twitter.
SMD will be in Austin at the end of this month on the 27th and 28th. We’ll be kicking it with Dane Sanders at the Fast Track Roadshow Workshop, and will talk about how to use Showit to build a website that reflects YOU.
SMD es aprender a hablar español para que podamos ayudar a la gente de habla hispana que utilizan Showit.

Showit Tutorial – UPDATED 2.0 Gallery Widgets

Nick — Wed, 05 Aug 2009 23:42:47 +0000

An update was issued last night that gave way to greater flexibility with the already improved 2.0 Gallery Widgets. Visit blog.showitfast.com for more. Along with that the page background options have also been changed and refined a bit. Find out how to work with these new features on the tutorial below.

[kml_flashembed publishmethod="static" fversion="9.0.0" movie="http://spilledmilkdesigns.com/tutorials/new_gallery_update/new_gallery_update_controller.swf" width="540" height="418" targetclass="flashmovie" base="http://www.spilledmilkdesigns.com/tutorials/new_gallery_update/" fvars="autostart=false;thumb=FirstFrame.png;thumbscale=45;color=0x1A1A1A,0x1A1A1A"]

[/kml_flashembed]

Showit tutorial: How to embed Showit header into WordPress blog

Nick — Tue, 04 Aug 2009 16:04:49 +0000

[kml_flashembed publishmethod="static" fversion="9.0.0" movie="http://spilledmilkdesigns.com/tutorials/wordpress_embed_tutorial/wordpress_embed_tutorial_controller.swf" width="540" height="418" fid="http://spilledmilkdesigns.com/tutorials/wordpress_embed_tutorial/" targetclass="flashmovie" fvars="autostart=false;thumb=FirstFrame.png;thumbscale=45;color=0x1A1A1A,0x1A1A1A"]

[/kml_flashembed]

Smugmug to Showit – The URL Change

Nick — Sun, 19 Jul 2009 16:08:43 +0000

Hey Folks!
After getting a few emails and seeing the question pop up on other forums, we thought it would be best to post this information here as a resource to folks who are using Smumug, but want your URL (domain name) to point to your new Showit site.

If you DO NOT have a hosting account, follow these steps:
1. Go into your Smugmug control panel, and remove the custom URL.

2. Open Showit and go to Site—–>Domain Setup. You should be in the Setup Wizard. When you get to step 4 it will give you a few options. Choose “Showit will host my site,” select your registrar (the people you got your domain name from) input your username and password, and click finish. The dudes at Showit will go in and set everything up for you, including email.

____________________________________

If you DO have a hosting account, follow these steps:
1. Go into your Smugmug control panel, and remove the custom URL.

2. Open Showit and go to Site—–>Domain Setup. You should be in the Setup Wizard now. When you get to step 4, it will give you a few options. Choose “I will host the HTML of my site,” provide your contact info, and click finish.

3. Open your registrars control panel. If you got your domain name from GoDaddy, you would need to log in there. After logging in, you’ll need to remove the CNAME for Smugmug completely. You should already know how to access this area, as you would have had to when first setting it up to point to Smugmug in the beginning.

4. At this point your site is down, but do not fear. Open up your hosting accounts control panel, and add on your domain name. If you use Bluehost, theres a special section for “Domain Add-ons.” It should be similar with other hosts. Add the domain name to your hosting account.

5. Open Showit, and publish your Site. Export the site html, and upload these HTML pages into the “root” directory of your hosting account. The root directory is most often a folder named “public-HTML” or some instances “WWW.”

_____________________________________

Make your smugmug URL pretty.
1.*Optional* – For example, you might want the url proofing.yourphotos.com to point to your smugmug site. To do this access your Total DNS settings and add a CNAME record with your subdomain URL of choice and point it to. Make sure you DO NOT enter your MAIN domain name. If you do….it will be painful…and worse than if Monty Python came looking for you….and that’s pretty bad.

2.Open your Smugmug control panel, and add your subdomain to the custom domain section. *It will take 1-8 hours for record to propagate so be patient!

*Note*
The above steps only work if your hosting account is with GoDaddy. If you do not host with GoDaddy, the Total DNS will not be available. In this case you will need to contact your hosting company directly, and request that they add your subdomain of choice and point it to domains.smugmug.com.