PhotoShelter and Facebook Integration – Welcome Pages (Updated 2/21/11)

***Update 2/21/11 Further Customization***

With the help of PhotoShelter and Peter, their resident Facebook expert and all around nice guy, last Friday I was able to further tweak the slideshow customization in Facebook.

So, with this blog post I’ll add the improvements to the FBML embed code using a bright red font – in these improvements you will be able to customize your background color and navigational icons and move all the fancy Flash customization along with you. It takes only a few extra steps of cutting and pasting.

Good luck!

Nathan

******

Recently, I launched a new Facebook Fan Page for my editorial and commercial photography company, Armes Photography, as a way to connect with past clients, future clients and display my expanding photo archive collection.

Embedding the slideshows was the easy part and PhotoShelter has featured tutorials in the past but I’ll touch on this briefly in this post. I’m not a professional tutorial writer and I’m assuming most everyone has a basic knowledge of PhotoShelter, PhotoShop, text editors and navigating in and around Facebook.

You can always ask me questions.

Embedding PhotoShelter Slideshows into a Facebook Fan Page:

First, you’re going to have to install a small app to run on your Facebook Fan Page called, Facebook Static FBML and it’s found by clicking ‘Edit Page’ and navigating to the left side of the page. (fig. 1)

Once on the ‘Edit Page’ page, select ‘Apps’ to bring up the install page. (fig. 2)

If you have updated the new Page design, recently rolled out by the Zuckerburg clan, then the ‘Edit Page’ navigation is in the top right hand corner – below ‘Account’.

fig. 1

fig. 2

Once you have installed the FBML (Facebook Markup Language) application you can now embed a slideshow by following a few steps.

First, select the gallery that you’d like to create the slideshow for and grab the code (fig. 4) that you are provided. Said code is highlighted below. (fig. 5 – you can click all the images to make them larger, btw)

fig. 3

fig. 4

After updating the preview, grab the code in the ‘Embed’ section of PhotoShelter’s gallery creation page (See fig. 4). I copy and paste into a small text-editing program – whatever you have around is fine.

fig. 5

Look for the code that is similar to this:

http://www.photoshelter.com/swf/CSlideShow.swf?feedSRC=http%3A//

www.galleries.armesphotography.com/

gallery/fb-portfolio/G0000xL6UrkhKf1I%3Ffeed%3Djson


Once you find this piece of code, copy and past into the following block of FBML code, as shown below.


****Begin Updates****

<p><fb:swf swfsrc="http://www.photoshelter.com/swf/CSlideShow.swf?feedSRC=http%3A// www.galleries.armesphotography.com/ gallery/fb-portfolio/G0000xL6UrkhKf1I%3Ffeed%3Djson" imgsrc="http://www.yoursite.com/picturename.jpg" width="520" height="390" waitforclick='true'
wmode="opaque"
swfbgcolor="#FFFFFF" flashvars="target=_self&f_l=t&f_fscr=t&f_tb=t&f_bb=t&f_bbl=f&f_fss=f&f_2up=t&f_crp=t&f_wm=t&f_s2f=t&f_emb=t&f_cap=f&f_ sln=t&imgT=casc&cred=iptc&trans=xfade&f_link=t&f_smooth=f&f_mtrx=t&tbs=5000&f_ap=t&f_up=f&btype=new&bcolor=%237e7e80"
/></p>

The line wmode=”opaque” allows users to set background colors to display, swfbgcolor=”#FFFFFF” allows users to set the background color of the actual slideshow and the string of letters and ampersands which follows the flashvars= stores display settings you may set in PhotoShelter’s gallery ‘Embed and Share Slideshow’ page.

Finding these particular pieces of code takes a bit more hunting and cutting and pasting.

To find your background color, to be added to swfbgcolor=”#FFFFFF”, look for the following highlighted code: (See fig. 5.3)

fig. 5.3

To find your display settings – set up in the PhotoShelter ‘Embed and Share Slideshow’ page – look for this tag: <param name=”flashvars” value=”(some long line of text with lots of ampersands)”> and copy everything between the quotes after “value=” into the flashvars line in FBML code block. (See fig. 5.5)

fig. 5.5

Once you further tweak your code it should look like the aboved mentioned – including the corrections and visually look like the figure below (should you make similar changes). Notice the custom navigational icons and white background color. (See fig. 5.8)

fig. 5.8

*****End Updates****

Since Facebook does not allow users to embed Flash into Pages you’ll have to plug this bit of code into the application – the one you just installed on your Facebook Fan Page. (See fig. 6)

fig. 6

Again, since Facebook does not allow users to embed Flash, you’re also going to have to place an image – on the Page – to act as a ‘placeholder’ for the code running in the background. If the placeholder image does not load you’ll be left with a white space where the image should be – if this happens go back and make sure that every is directing correctly.

This place holding task is completed by the following piece of code, referencing the image source, found in the block of code above.

imgsrc="http://www.yoursite.com/picturename.jpg"

What this piece of code is doing is telling your browser to call – or reference – a photo from a remote server. This photo is stored on my server so replace ‘yousite.com’ with your personal URL and name the photo whatever you want – something easy to remember and corresponding to the gallery makes the most sense. The photo should be 520px wide.

Make sure to remember that Pages will only allow images to be a maximum of 520px wide. This fact will come in handy while designing your smoking new welcome (landing) page.

Creating a New Facebook Fan Page Welcome Page:

Whatever you want to call them, a landing page or welcome page, they can showcase your work from the first click and visit to your Page. It sets the stage for the visitor, showing them what they should expect from you and your work. Also, it can include links to social media platforms, branding and vital contact information.

A Facebook Fan Page is just a tool but when used properly it can make your brand and your work standout – and it also looks pretty cool.

The first step is to sketch an idea of what you want your welcome page to look like and what you want to include.

fig. 7

You only have 520px to showcase your info (height is not really an issue – I’m also not aware of a height limit) so I’d use it wisely.

I wanted to create a design that featured functioning icons so visitors could also visit my Twitter, LinkedIn or Tumblr account from my welcome Page. This is just an option and I go into the steps below. Adding links will require a few more steps but it’s not that hard – just takes a bit of patience.

Patience is always key when tossing around one’s and zero’s. A misplaced backslash or ‘dot’ something can literally drive a sane person batty.

Once you have designed your landing page you’re going to select the ‘Slice Tool’ in PhotoShop and start slicing your image into separate images that will later be converted into HTML. You will find the ‘Slice Tool’, depending on how your have PhotoShop setup, on the left hand side of your screen. It looks like a tiny exacto knife. (fig. 7.3)

fig. 7.3

fig. 8

Once you have sliced your design, by starting at the corner of each design element and essentially slicing around each element, you’ll want to include the links to the coordinating URL. This is accomplished by double-clicking on the blue highlighted section of the slice. A window will prompt you to enter the URL. (fig. 8.3)

The space for ‘Target’ is asking you if you want to open the link in a new window or the same. There are 924 schools of thought on this seemingly simple questions, ‘Do you want your website to open new windows when linking to outbound links?’

My school of thought is that if you are asking people to navigate out of your space – your website – you should link outbound with a new window. It makes it easier for visitors to return to the original site. Some people hate sites that force open new windows but why would you want to make it harder for people to return to your hard work after getting them there to visit it in the first place. It’s like sending someone next door, to another restaurant, to buy drinks and pickup silverware.

My attention span is not that great – squirrel – and I have a feeling most other folks have some of the same issues when it concerns clicking around online.

So anyway, if you want the links to open in a new window use, ‘_blank’ if you want the link to open in the same window use ‘_self’.

fig. 8.3

After making the life or death ‘Target’ decision, you’ll want to save your image by File>Save As Web. (fig. 9)

fig. 9

fig. 10

Fig. 10 represents what you’re going to see when the Save For Web window is open. You want to save your file as an optimized PNG-24, transparency, interlaced.

fig. 11

In fig. 11, the final but most important aspect of saving your sliced design is to make sure to save all the HTML and images, use the custom setting and save all the slices. Name the HTML file, that is created in this step, whatever you want.

Saving For Web will break your image into small bits of HTML and save it to your desktop – or in a folder of your choosing. It should produce an HTML file and a folder called, ‘Images’. In this folder you’ll find the slices of your original design. The HTML file and all the contents of this folder should be moved to your server. (fig. 12)

fig. 12

Open the HTML file in a browser to ‘View Source’ and copy and paste this code into your text-editor.

fig. 13

The source copied should look similar to this:

<!-- ImageReady Slices (FB-landing-page.psd) -->
<table id="Table_01" width="520" height="121" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="2">
			<a href="http://www.armesphotography.com/" target="_blank">
				<img src="images/Untitled-7_01.png" width="311" height="121" border="0" alt=""></a></td>
		<td colspan="7">
			<img src="images/FB-landing-page_02.png" width="209" height="51" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/FB-landing-page_03.png" width="87" height="70" alt=""></td>
		<td>
			<a href="http://twitter.com/nathan_armes" target="_blank">
				<img src="images/Untitled-7_03.png" width="32" height="70" border="0" alt=""></a></td>
		<td>
			<img src="images/FB-landing-page_05.png" width="8" height="70" alt=""></td>
		<td>
			<a href="http://www.linkedin.com/in/nathanwarmes" target="_blank">
				<img src="images/Untitled-7_05.png" width="32" height="70" border="0" alt=""></a></td>
		<td>
			<img src="images/FB-landing-page_07.png" width="9" height="70" alt=""></td>
		<td>
			<a href="http://armesphotography.tumblr.com/" target="_blank">
				<img src="images/Untitled-7_07.png" width="32" height="70" border="0" alt=""></a></td>
		<td>
			<img src="images/FB-landing-page_09.png" width="9" height="70" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->

Before you copy and paste this block of code into the Facebook application window (See fig. 6) make sure to change the <img src=”http:..> to point the browser to the location on the server where you uploaded the ‘Images’ folder. Currently, the links are pointing to your computer.

Example:

<img src="http://www.yourwebsite.com/images/Untitled-7_05.png"

Make these changes and then copy and paste the code into the application (See fig. 6) followed by the block of FBML code created to embed the PhotoShelter slideshow then repeat the above mentioned steps to include more information should your design warrant that extra step.

I made it easy on myself and simply embedded a single image for the bottom part of the design and did not include links.

Your finally block of code should look similar to the following:

<!-- ImageReady Slices (Untitled-7) -->
<table id="Table_01" width="520" height="121" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">
<a href="http://www.armesphotography.com/" target="_blank">
<img src="http://www.armesphotography.com/images/Untitled-7_01.png" width="311" height="121" border="0" alt=""></a></td>
<td colspan="7">
<img src="http://www.armesphotography.com/images/top_02.png" width="209" height="51" alt=""></td>
</tr>
<tr>
<td>
<img src="http://www.armesphotography.com/images/top_03.png" width="87" height="70" alt=""></td>
<td>
<a href="http://twitter.com/nathan_armes" target="_blank">
<img src="http://www.armesphotography.com/images/Untitled-7_03.png" width="32" height="70" border="0" alt=""></a></td>
<td>
<img src="http://www.armesphotography.com/images/top_05.png" width="8" height="70" alt=""></td>
<td>
<a href="http://www.linkedin.com/in/nathanwarmes" target="_blank">
<img src="http://www.armesphotography.com/images/Untitled-7_05.png" width="32" height="70" border="0" alt=""></a></td>
<td>
<img src="http://www.armesphotography.com/images/top_07.png" width="9" height="70" alt=""></td>
<td>
<a href="http://armesphotography.tumblr.com/" target="_blank">
<img src="http://www.armesphotography.com/images/Untitled-7_07.png" width="32" height="70" border="0" alt=""></a></td>
<td>
<img src="http://www.armesphotography.com/images/top_09.png" width="9" height="70" alt=""></td>
</tr>
</table>
click image to begin slideshow
<p>
<p><fb:swf swfsrc="http://www.photoshelter.com/swf/CSlideShow.swf?feedSRC=http%3A// www.galleries.armesphotography.com/ gallery/fb-portfolio/G0000xL6UrkhKf1I%3Ffeed%3Djson" imgsrc="http://www.yoursite.com/picturename.jpg" width="520" height="390" waitforclick='true'
wmode="opaque" swfbgcolor="#FFFFFF" flashvars="target=_self&f_l=t&f_fscr=t&f_tb=t&f_bb=t&f_bbl=f&f_fss=f&f_2up=t&f_crp=t&f_wm=t&f_s2f=t&f_emb=t&f_cap=f&f_ sln=t&imgT=casc&cred=iptc&trans=xfade&f_link=t&f_smooth=f&f_mtrx=t&tbs=5000&f_ap=t&f_up=f&btype=new&bcolor=%237e7e80" /></p>
</p>
<p><img src="http://www.armesphotography.com/images/bottom.jpg" width="520" height="171"> </p>

To make this new page your Welcome Page – go back to ‘Edit Page’ and change the ‘Default Landing Tab’ to ‘Whatever You Named This New FBML Tab.’

I named my welcome page, ‘Welcome!’, so by making this my default landing page new visitors will see this page first.

It seems each week, Facebook is launching a new feature, redesigning this or updating that. With this come changes that are good but also changes that might void everything I just wrote in this tutorial. I’m sure there is an easier way to create a landing or welcome page – but this was the easiest way for me.

Should you have any tips or updates please post a comment in the section below. If you have questions you can shoot me an email, reach out to me on Twitter, leave a comment here or obviously, on my new Facebook Fan Page.

Cheers,

Nathan W. Armes
Denver Photographer and Photojournalist

19 Comments

  1. Almond Butterscotch
    February 15, 2011

    Great right up, very interesting.

    One comment on your layout though: you could use with an extra couple pixels of breathing room to the right of your phone and website on the profile image. It looks crunched in. (Jut my opinion, anyways.)

  2. Nathan W. Armes
    February 15, 2011

    Thanks, I agree on the profile image needing some breathing room. Thanks for the input!

  3. Tweets that mention PhotoShelter and Facebook Integration – Welcome Pages | Photographer & Photojournalist | Denver, Colorado | Nathan W. Armes -- Topsy.com
    February 15, 2011

    [...] This post was mentioned on Twitter by Sylvia Brogdon and Paul Foley, admgolub. admgolub said: Photogs check this out!!! PhotoShelter & Facebook Integration by Nathan W. Armes http://t.co/r9HNSKK [...]

  4. Oscar
    February 16, 2011

    You rock. thank you sooo much for sharing this.
    I had given up on customizing after i got no solid
    references from crowd sourcing to twitter. Again thank you.

  5. links for 2011-02-16 | Steve G. Bisig, Photographer
    February 16, 2011

    [...] PhotoShelter and Facebook Integration – Welcome Pages (tags: photography facebook) [...]

  6. Michael Hickey
    February 17, 2011

    I’ve got the slideshow embedded on a facebook page but the “placeholder” image doesn’t show up. Just a blank box with the blue question mark.
    Can I not use a Photoshelter page link? Or does it have to be on a different server?

    Here’s the code I’m using:
    —————–

    —————–
    Is there something wrong with it, I can’t figure out the problem?

  7. Michael Hickey
    February 17, 2011

    Sorry, I guess you can’t see the code…..any help would be appreciated!!!

  8. ETTL Triggers, Competitions and Some Links | Travel Culture and Environmental Photography from Taiwan | Craig Ferguson Images
    February 17, 2011

    [...] awareness of you as a photographer. Editorial and commercial photographer Nathan Armes has posted a tutorial describing how he customized his and integrated his Photoshelter galleries into [...]

  9. Fotograf designar om sin Facebook-sida | iPortal
    February 21, 2011

    [...] armesphotography.com [...]

  10. Dave Einsel
    February 21, 2011

    Since FB is phasing out FBML, I have been trying to do this as an iFrame. I am able to get a jepg of my logo to show up centered on the slash page but when trying to embed a PS slideshow under it, I get no joy.

    I’m not a big code guy but I can write from examples.

    Any ideas?

    Thanks.

  11. Dave Einsel
    February 21, 2011

    I got it to work by pasting the entire embed code into the html. I had to add a couple of target=”_blank” commands so links would not open in the iFrame.

    It still definately needs some tweeking to make it look jazzier but at least it works.

    Thanks for the inspiration.

  12. Jeff Gatesman
    February 26, 2011

    Thanks for publishing this very helpful tutorial. I was able to create a pretty nifty fan page.

    http://www.facebook.com/pages/Gatesman-Photography/109912689025034

  13. Gyula
    March 5, 2011

    Hey Nathan,

    thanks for this great tutorial.
    Could you tell me what can be wrong with my landing page?
    I noticed that the saved sliced images are in GIF format, except one, even if I saved the layout as an optimized PNG-24, transparency, interlaced. Can it be the problem?
    http://www.facebook.com/gyula.rusinczky.photography

    Thanks!

  14. Lauren
    April 4, 2011

    Thanks so much for this tutorial and for sharing. Was able to make myself one and continue to avoid uploading my photos to FB by having this slideshow embedded:

    http://www.facebook.com/laurengrabelle

  15. Quinn
    April 7, 2011

    I finally got around to taking your help here. Here’s my new welcome and recent work pages if you’d like to check it out.
    http://www.facebook.com/quinnryanmattinglyphotography?sk=app_7146470109

    http://www.facebook.com/quinnryanmattinglyphotography?sk=app_4949752878

    Cheers
    QRM

  16. Lou Wheeler
    June 16, 2011

    So, is it just me, or does this method no longer work since Static FBML is not available anymore?

  17. Customizing Facebook: How One Smart Photographer Did It ‹ The PhotoShelter Blog
    October 12, 2011

    [...] It didn’t take long for photographer Nathan Armes to reveal the secrets behind his customized Facebook fan page. I mentioned his “Facebook Facelift” in a blog post on Saturday, and today he created a blog post of his own (complete with illustrative graphics and snippets of code) that explains exactly how he was able to pull it off. [...]

  18. Customize your Facebook Fan Page With PhotoShelter Slideshows ‹ The PhotoShelter Blog
    October 13, 2011

    [...] NOTE 2/15/2011: Due to frequent updates of FBML by Facebook, the initial steps in this tutorial are now slightly out of date.  For another quick guide on getting your slideshows embedded in Facebook, see PhotoShelter member Nathan Armes’ tutorial. [...]

  19. Nathan W. Armes
    November 14, 2011

    The steps that I outline are still functional. Recently updated my Facebook landing page – unless I’ve been ‘grandfathered’ with the older style of code.

Leave a Reply