Friday, October 30, 2009

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!!!

MORE MARKETING MADDNESS

Hi Guys... In case you missed it... SSC made it to the front page of Etsy. It was a grand moment for me, like my official craft badge... It was amazingly validating especially since the item that was chosen was something that I personally LOVED. Those items are the most fun to make for me.
So on to our post topic... The little front page thing kinda made me kick it in gear in terms of marketing MADNESS. As in how can I kick this up a notch...
So I'm doing Twitter.... and Facebook.... (I pretty much live on facebook personally so this is not so difficult for me.) I use Tweetdeck to manage my personal/business stuff cause its easy...
Then one day I got bored got on facebook and started looking up companies...
I started with Victorias Secret... Cause I had heard on several blogs that their fan page was BadASS.
So I checked it out...
http://www.facebook.com/search/?q=victorias+secret&init=quick#/vspink?ref=search&sid=1304828206.1150368635..1

I was like thats cool and unboring... I hate the boringness of the Facebook fanpage...
and I was like I'm all graphic designerish... This can't be that hard to figure out...
Well it kinda was... but i think the result is WELL worth the trouble.
Check this out. The new improved ShesSoCrafty Fanpage for Sunflower Express: http://www.facebook.com/shessocraftyartanddesign

And how praytell did I accomplish this???
Well it all goes back to this wonderful application called Static FBML...
Search for it in applications and when it comes up click the text that says add to page...
This wonderful little app lets you use HTML on your fanpage for anything...
That's how I got the etsy shop badge on the side of my fanpage and how I was able to link out the images...
So I was wondering... If I could build a whole page, in like photoshop or illustrator and then using images and slice it up save it as html upload the images to my web server and then drop the html in the page and TADA. Custom linked out facebook fanpage. It makes it a little more interesting and WAY COOLER TO LOOK at... I will be hoping to add a full fledged tutorial for this shortly...
If anybody sees this and has any questions FEEL FREE to contact me and I will be glad to help you out... See Branding is your vision and I think its way cooler and funner to have that vision be interesting and make someone want to stay and hang out...
I'm currently running a facebook add (re you should add the visa business app to your page to get the hundred dollar add credit I'm hoping by the time all is said and done I will have like a hundred fans.) I plan to seriously use facebook to market my business and now I think this new format reflects and consolidizes my info in a more cohesive manner. Which is TRES AWESOME. Ok I'm gonna go eat some tacos now.

Monday, October 12, 2009

OOOOO new stuff...


I find that sometimes when I have the craft blues I need to challenge myself... Push myself a little bit further and a little bit out of the comfort zone... after all that is where you stagnate and become dull and nobody wants to be a boring crafter (think Great Aunt Tina and her crazy socks).
So ShesSoCrafty is taking a test drive in the floral facinator market... granted this is a hot market on etsy but I'm trying to add my own little spin on it and make it just a little bit Lisa. So just thought I'd share some pics of what I am working on!

Remember nothing beats Craft Ennui better than a challenge... self initiated or otherwise.

Friday, October 9, 2009

31 Things I've learned in 31 years



That's right folks ShesSoCrafty is turning 31! Does this freak me out? Not so much. I think I've finally gotten to the place where I am comfortable in my own skin. I have finally embraced being a generally more healthful person.
So I'm totally owning 31. After reflecting for some time I have realized that I have gained alot of knowledge about living in my humble years.
So here it is Lisa's 31 things I've learned in 31 years:

1) Say No. If the idea of doing something or being something that you don't want to be, just put your lips together and say NO.

2) Remember that not everyone's family is created equally. Sometimes the family you make is better, more nourishing and welcoming than the one you were born into. Being born is kinda like a crap shoot.

3) Come to terms with the fact that I will never know EVERYTHING.

4) There is no cure for the blues than a good tube of lip gloss and a hot dress and some cute shoes.

5) You will turn into your mother in some ways... If this idea petrifies you modify the things you can and deal with the crap you can't.

6) If you are a parent the only thing you can do is cross your fingers and jump off the bridge and pray you won't screw up your kid in the same ways your parents screwed you up...

7) & Accept the fact that you will screw them up somehow but hopefully it will be a good screw vs. a bad screw

8) Find Something you love passionately and find a way to make that your career or at least incorporate it into your life on a major level.

9) Stand up for yourself. If you don't no one else will.

10) Doormats are household accessories, and not something I will ever be.

11) Realized that Perfect is the most boring adjective EVER.

12) To love the quirky parts of myself, like the mole on my baby toe, the scar on my hand from climbing a fence when I was 12, my addiction to hotpink nail polish, my aversion to creamy salad dressings and mayonnaise all help to make me me.

13) To realize that my attractiveness in no way corresponds to my dress size...

14) Creativity is and always will be an integral part of my life. Without it I am bound to wither on the vine.

15) Men come and go but your girlfriends will be there to hold your hand when you cry, and hold your hair back when you puke.

16) That the ability to speak your mind with force AND tact is a very valuable skill.

17) Kenny Rogers said it best "You gotta know when to hold em, Know when to fold em, Know when to walk away, Know when to run."

18) That everyone needs to take time to take care of themselves, myself included.

19) Bubble Baths are the answer to world peace.

20) That I will never be normal... or want what everyone else wants, this is the beauty of being me.

21) That Love is only as strong as the risks you take to make it and the easier you make it to recieve it.

22) When it comes to work my self worth is worth MORE to me than any dollar amount anyone can ever give me.

23) A path untaken is a regret waiting to happen. So make sure to consider all of the options carefully.

24) All men are not created equal. If he makes the hair on the back of your neck stand up sometimes it might not be for a good reason.

26) LOVE MY BODY! From which a 9lbs 14 oz son was pulled, has climbed mountains, walked hundreds of thousands of miles, lifted the heaviest of objects and can open the tightest of jars all by myself.

27) Fear is stupid.

28) Change is exhiliarating.

29) Trust my insticts. If something gives me pause there is usually a reason for it.

30) The man that loves you for your mind is usually the one who will love you even more for your body.

31) That speaking your mind is the equivalent to a loaded weapon, when you aim, aim carefully and aim precisely...

So what have you learned?
Related Posts with Thumbnails