Custom Landing Page Part 2 or DUST OFF THAT PHOTOSHOP!

Prerequisites:

1. Photoshop (IF YOU DO NOT Have PHOTOSHOP, SCROLL DOWN to the bottom of the page and I will put the code to copy past and some instructions to get you started!)
   
2. Some basic familiarity in working with images on Websites Specifically how to upload images to your webserver or photo sharing site (I highly recommend using your website for this).
3. Basic Html knowledge if you went thru part 1 you should be good to start.
   

Ok so for step 2 Open up your Photoshop... I am using CS4... so things may look slightly different if you are using older versions of photoshop. But the layout is BASICALLY the same.
Make sure you have gone thru and read Part 1 FIRST!!!
Ok so open up your photoshop.
Click New.
You need to set up your dimensions to be no bigger than about 750 across. Length wise you can add as many boxes as you would like but I'm going with this:


Click Ok.

Create your boxes. You want to keep them aligned vertically and horizontally. If you wanted to create boxes on one side and columns on the other that is fine play with this all you want.
But I just created some basic boxes for this excercise, like this:



You can find some great badges on the web just by searching around... or create your own using your images and text. (If I went into how to create custom images this would be A VERY long tutorial) you can find some great photoshop tutorials on creating images for websites just google it!!! you can drop pictures on these boxes which I created using the box tool. It's pretty simple once you start working with it. I tried doing this with a background but because of the way that facebook renders slices I ended up with lines where the slices were so for sanity's sake just keep your background white.

So once you have your boxes with images, text, badges whatever you like we are going to go to find the slice tool. I BELIEVE for most versions of photoshop it is grouped with the Crop tool... (Refer to google: where is the slice tool for CS3 if you are having trouble with finding it)
in my version I find it here:




A little backgound on the slice tool... this allows you to cut up a design for rendering with html and allowing you to create images that can be linked for use on websites... It's really simple and easy way to create the custom fanpage with out having to worry about positioning because you can basically lay this out exactly the way you want it.

Ok so you have your slice tool selected using this tool you will select your images. You will basically just draw a line around your boxes (works just like the box tool) You will notice something like this:



When you create slices... you will notice that it breaks your images into peices make sure you leave enough white around your images AND that you keep them aligned in a reasonable manner both vertically and horizontally.

MAKE SURE YOU MATCH UP YOUR SLICES AS IN THE PICTURE BELOW... THIS WILL TAKE SOME FANAGALING... IF YOU MESS UP JUST CLICK UNDO AND START OVER!!! IF YOU SERIOUSLY MESS UP GO TO VIEW ON THE MENU BAR AND CLICK CLEAR SLICES!

For the purposes of this excercise we will be dividing the image into four quadrants (notice that once you create your first slice that the box directly beneath it is created so now we have 3 peices but we have four boxes that we want to link out.
To create the fourth quadrant line up your slice tool with the top right node of the first slice and create a box around your top right image.
You will end up with something like this:



Now we have four equal quadrants that we are going to link out in the next step.

Go to File
select Save for Web and Devices.
This will let you create not only your images BUT also an HTML file.
This is the screen you should see:



Now we're going to create some links... Double click your first image... Mine is the Twitter badge... a box will pop up that looks like this:

Step one Name the image.
Step 2: in the URL box add the url you want the image to link to
step 3: Target select blank
Step 4: Message put something here like Go to my blog or Follow Me
Step 5: Select ok
Should look something like this:



Repeat this step by double clicking each of your quadrants and filling in your link information for each image slice or box if you will...

When you have completed these Steps we need to save this so we can get the HTML and Images to use.
So click save.



Next we need to make sure that we will be saving both and the images and the HTML.



For the SAVE AS FILE TYPE use the drop down to select HTML and Images.
Make sure you name your file something you'll be able to find easily The images will be saved to a file called images and the html file will be called whatever you typed into the box when you saved.
Save it to your desktop to make it easy to find.
This will save an HTML and an Image file folder with your four images.

Now we need to upload JUST the four images to your web server or photo service.

In part one I told you that we would need to Upload your images to your website. I can't tell you how to go about this since everyone's website is different. You could use Flickr or a photo sharing site but they really don't like this. I use Microsoft office live for my website. I am going to gloss over this part a bit if you have questions specific to a web service contact me and I can help you figure it out.
I have an image folder on my website already (MOST DO have a spot for you to upload images to, that is usually an image folder the URL folder for my website is this: http://shessocraftyartanddesign.com/Images/
This is very important to know the location for your images for this next step... if you are doing this using photobucket or any other site you will still need the url for the individual images to edit the html.

Now we will Edit the code.


For the next step open up the notepad or other word processor tool if you want.
Next open the HTML file we created in photoshop by double clicking it, It should open in your web browser. In your browser menu bar click View then Page Source. Copy the HTML on the page there. (I am using firefox)
Paste it into the notepad.

We will need to remove everything ABOVE the Table Id tag at the beginning and everything below the table id tag at the end.




What you will be left with is this:



Here is a brief breakdown of what THIS is.



There should be 4 image sources and 4 links. If you are not familiar with HTML this picture should break it down for you... (My 3rd image above IS NOT linked but yours should be!)



Next we will need to Replace the image tags with the url location of the images you uploaded where ever you see an img src tag:



Whew!
Still with me We're almost there.

Once you have done this we need to COPY this CODE and go BACK to Facebook and follow the steps in part one to add a Static FBML Box to your page.
Once you have the box open DROP IN THIS CODE. Name your Tab and click SAVE.
Next go back to the Page Manager for your fan page.
Click the pencil icon next to your Newly created FBML box (remember you renamed it).



Select Application Settings.


Where it says Tab, it should say Available... Click on Add to add a NEW tab to your page... you can also at this time REMOVE the Box option.

Okay so we've got the tab. Now how do we make this the default tab for our NEW visitors???

Here we Go.

On the Page Manager screen Navigate to Wall Settings.



Click the Pencil

.
Default View change this to the Name of your new tab and click save.
Give it a few minutes to update Logout of facebook and google your fan page... Your new landing page should come up. Test your links to make sure they work.
This is just a basic framework for what a fanpage can be. Play with it have fun and post links to those fanpages I wanna SEE! Um just don't clone my page and we'll be all good. With a little imagination anything is possible!!!

PS. There are much easier ways to do this I know but this is the simplest and least complicated for me to figure out how to do this without having to figure out how to position the images WITHOUT writing code from scratch... Facebook has some limitations and is a bit wonky, I tried this several different ways without any luck but this worked!!!

If you have any problems feel free to comment and I will get back to you!!!!!
FYI... I name my images curse words when I have been working on something for days and it is driving me crazy... This slightly did that hence the up at 3 am thing and the cursey words in the file names... I have to amuse myself somehow. :)

NO PHOTOSHOP??? Here is the code for the basic image layout... I have used which is for four boxes... if you know html you should be able to build off of this nicely.

Scroll above to the part where we modified the code you will still need to modify what I am providing here, but you will also have to modify the link portion as well.

This is the code I have used...



<table id="Table_01" width="750" height="600" border="0" cellpadding="0" cellspacing="0">

<tr>

<td>

<a href="link location" target="_blank"

onmouseover="window.status='Shop The Fall Line'; return true;"

onmouseout="window.status=''; return true;">

<img src="image location url" width="426" height="311" border="0" alt=""></a></td>



<td>

<a href="link location" target="_blank"

onmouseover="window.status='Follow Me'; return true;"

onmouseout="window.status=''; return true;">

<img src="image location url" width="324" height="311" border="0" alt=""></a></td>

</tr>

<tr>

<td><a href="link location" target="_blank"

onmouseover="window.status='Follow Me'; return true;"

onmouseout="window.status=''; return true;">

<img src="image location url" "width="426" height="289" alt=""></td>

<td>

<a href="link location" target="_self"

onmouseover="window.status='Shop SSC'; return true;"

onmouseout="window.status=''; return true;">

<img src="image location url" width="324" height="289" border="0" alt=""></a></td>

</tr>

</table>




Ok you will need to replace link url with your link destination... you will need to replace image location with with the url for your images! This will create the quadrant formation... If you want columns or anything more you will need to modify this code MANUALLY!

If this is beyond your grasp... I am thinking about adding this as a service (RE NOT EXPENSIVE) as I know not everybody can decipher this. Contact me if you need that kind of help and I can see what I can do. I Really just wanted to share this info to get it out there!

Custom Facebook Fan Page Part 1

Ok so I'm gonna go thru the preliminary steps... I'm gonna break this up into 3 parts this first installment will teach you how to add a clickable image to your profile side bar on the Left this is the first step in working with the Static FBML Application on facebook.

1. Prerequisites for this Excercise is of course a Facebook fanpage
2. Some basic knowledge of HTML... (Copy Paste is what I call basic for this excercise)
3. Some familiarity with Photoshop and creating images for when we get to the custom landing page part. (I will be adding instructions that will be as basic as possible but I do this for a living so I may take for granted or gloss over some things.
   
4. I will try to provide screen shots of what I'm doing for a visual reference

First things first go to your fan page. Depending on where you land:
If you are on the ads manager page click on pages this will bring you to the page manager...
for the majority of what we will be doing this will be where you will add widgets and applications.
I will refer to this from now on as page manager.
If you are on your actual fanpage click edit page to bring you to the page manager.
Scroll all the way down to the bottom and you will see the More Applications Box. Click the pencil in the right corner select Browse More.
(click images to make larger and not blurry!)





Next on the application screen you will see a list of applications
We want to find the Static FBML APP
Type that into the search field.

When you reach the Static FBML Page
Directly beneath the icon on the left you will see the option to add to page


Click to add to page and this box will pop up:



Your page should be listed here (as I've already added the app to my page mine isn't there) but click add to page directly across from your page. Then hit close.

Now we will return to the main page manager window. Follow the steps above to get back to the page manager.

Now here is a simple simple example of just adding a linkable image to your sidebar. From which you can build upon to add custumization to your page.

Open up a new tab: Go to etsy.com and then go to the community tab and then resources
Find the big orange circle that says find me on etsy. Click on it. A code window should open up.
Copy the code.
Now return to your facebook fan page Page Manager.
Scroll down until you see this:


click the pencil Directly across from the FBML 1 application.




Select Edit.

That will bring you to a screen that says Edit FBML...
Take the code that you copied from etsy and paste it in the LARGE BOX.
The small box at the top will be what this box will be labeled I kept it simple and put Find me on Etsy there as the tittle of my box. You can always come back and change this later.
Now the Etsy code will link out directly to ETSY. We want this to shoot out to YOUR shop.
So we will need to replace the www.etsy.com with your shop url.







Click Save at the bottom.
Then click on your page name in the upper left hand corner of your page.
Click the Boxes Tab on the tab bar on your fan page.
Your Etsy button should be there.
To move this to your profile sidebar you need to click on the pencil to the right of the button and select move to wall tab.
And TADA you have created a button that links out to your page and successfully moved it to your sidebar where it will be EASY Peasy to find.
You can do this with ANY image.
A blog badge a twitter badge anything. (check out my item of the week Badge Using this same code and just changing the img src, and the link info as we did earlier.)
You can pull in images from your blog... from your shop and link them out using the steps we just used. OR... you can create an image and upload it to your website (If you don't have one you need to get one for STEP 2 (photo sharing sites DON'T like you using their sites to upload for websites so it's best to use your own web service. Get the url for your images and replace the img src"http://team.etsy.com/images/downloads/buttons/findme.jpg" with your images url and then replace the link part with whatever you choose to link it to. This Adds so much customization to your page in just a simple step.
This same principal can be used for creating the custom Landing page for the fanpage. For that we will be using photoshop to create some simple boxes and slicing them up in photoshop and inserting all of the links there and then inserting the html code generated when you save for web and devices and dropping that in the FBML box.
If you have no idea what I just said Stay tuned Tonight or Tomorrow I will be putting up the Steps for the next half of the Lesson!
But now you know how to add custom badges and buttons to your page!!! And how to work with the FBML application.
In case you want to go crazy with this and add more go to the Page Manager and click edit on your FBML box (remember you renamed it so it won't be FBML 1 any more) scroll down to the bottom and you will see add another FBML Box click edit to add to that box. Take the steps we did earlier to add more stuff.
Cheers and have fun and I would love to see what you come up with!!!

Hello Again!

Ok so it's been a hot minute... so I apologize for that... But I had lots of stuff going on! So lets update from where we left off... Sunflower Express the Show seems to be headed towards hiatus-ville for the indefinite future and I have decided that instead of letting all that hardwork go to waste, I would keep the shop open and EVENTUALLY (as in when it seems appropriate) merge Sunflower Express with ShesSoCrafty on Etsy. For now the shops are seperate and doing well.

I have just completed the first straight etsy wholesale order and it went very well!

I will say this much... Think about your pricing hard core before you dive into wholesaling make sure the money is worth the time and effort, and remember unless you are a seller who has gobs of stuff hanging out all the time to just choose from, you will be making stuff and that takes away from time you could be making other stuff like for your shop or for shows. Pricing is key and it keeps you motivated if you know that you are getting paid decently for your products.

I posted in the forums on Etsy as to how to handle an on Etsy Wholesale order as they were foreign to me. I got lots of helpful information but I think the decision on how you handle things is completely up to you. For this first order I chose to go thru E. If this ends up being a return order I will definitely then consider going off Etsy and conducting this my self thru invoicing. Some people are very leary of being scammed, I on the other hand like to be a little bit flexible in determining my terms depending on the order and the customer. All in all this was a delightfully pleasant experience. I hope it leads to loads more!

Back to the blog front.... I will be trying to get myself back into a normal grove with this.... I will also be trying to migrate my SE handmade content over here as well so I don't loose those posts either! So regardless if you are a reader thanks for stopping by and I look forward to lots of crafty bits in the future!

Cheers

L

Lots of art on the horizon

Ok so Sunflower Express (the kids TV show I have been working on for almost a year now) has debuted episode 2. We are currently on Tour so to speak, hitting the local craft fair circuit. It is ridiculously exhausting yet fun at the same time... to take a look at the new Sunflower Express product line please visit www.sunflowerexpress.etsy.com... to view episode 2 visit www.sunflowerexpress.com . I'm currently getting ready for the Montpelier Herb and Tea fest on Saturday and its a slow crawl until June where we end in Ocean City. Sunflower Express also has a facebook fan page (search for sunflower express). Coming soon is the Sunflower Express Handmade blog where I will be blogging about crafting, building a brand and our craft fair experiences and tips!

Ok so I'm double posting

I have been hella busy in the last few months, so much so that i didn't get a chance to revel in my near brush with celebrity. So I had heard tell that a certain celebrity widow whom I have always adored for being wicked cool and not really caring what anybody (and I mean anybody) thought was loose on etsy and purchasing lots of pretty pretty handmade things.
Well after months of neglect I recieve an email that I actually sold something on my etsy site. Well low and behold who should it be but my favorite Rocker Girl Courtney Love. I was awestruck and freaked out. Here is here-to-fore known CL card. It's not much but it totally made my 2008!