Customize your Facebook Fan Page With PhotoShelter Slideshows

Customize your Facebook Fan Page With PhotoShelter Slideshows

PhotoShelter member David Calvert stops by to teach us how to pimp our Facebook ride with large-format slide shows and customized landing pages.We gave it a test-drive on the PhotoShelter Fan Page. Don’t be afraid of the code – it’s not that hard!

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.

By David Calvert

I was an early adopter to Facebook. Just out of high school, when most of my friends were following bands on MySpace, I was embracing the simple user interface, white space and uniformity of Facebook. Like most teenagers, I viewed the site narrowly. It was strictly social.

I’m now 24, and like many of you, running my own photography business. In the past few years, Facebook has exploded, becoming much more than a place to share embarrassing photos of friends. Today, it’s the most powerful social network on the web. The Facebook network represents huge amounts of social capital, capital anyone can tap into to grow their photography business and brand online.

Aside from having personal profiles, many of us small business owners now have a Facebook Fan Page as well. They come with familiar standard features like a wall, an info tab, photos, video, links, etc. Most are uniform, but some Fan Pages: Best Buy, Victoria’s Secret, Nokia for example, offer a unique customized experience that starts on their landing page. When you arrive, instead of a wall, you see a mini-Web site within the Facebook interface.

Anyone with a Fan Page can create a customized landing page. Here’s how…

Adding The Static FBML App

The tabs atop your Fan Page
are apps. Some are built into Facebook, like the wall, others are
developed by third parties to promote their service like YouTube.

To create a custom app, install the “Static FBML” app

 
fig.1_resized.jpg
Click “Add to my Page.”

From
there, a pop-up window will open asking you which Fan Page (if you have
more than one) you’d like to add the FBML app to. After you choose, the
pop-up window will close and you’ll need to access your Fan Page.


Set Up Your Tab

Now that you’ve added the app, and navigate to your Fan Page, click ” Edit Page” below your company’s profile image.

DCAlvert_2.jpg

This will bring up all your settings and apps.  Look for the FBML app and click the “Application Settings” link.

DCalvert3.jpg

The app can function in two ways: As a set of boxes, or as one dedicated profile tab. To build a splash page, you’ll want to disable “Box” and add “Tab.” Do this by adjusting the “Application Settings.”

DCalvert4.jpg

Now that you’re in tab mode, go back to your settings and click the “Edit” link under the Static FBML app. This opens a text field where you can add your content.

“Box Title” will be the name of your tab, so you’ll want to change it to something like “Portfolio,” “Featured Work,” “Special Offers,” or even “Welcome,” depending on how you plan to use your Page.

The main text field is where your content goes. You can add standard HTML to the page as you would any website, including images*, text, links and other formatting.  No need for body or head tags.

For example, to familiarize myself with FBML, I wrote this code:

DCalvert5.jpg

And created this page:

DCalvert6_resize.jpg

Pretty basic. Visually, very 1998.

*Note that your images must be hosted elsewhere (like on PhotoShelter or another server) and only referenced in your HTML code.

Make It the Default Landing Page (OPTIONAL)

If you want this new tab to be the “face” of your Fan Page, head back over to your page settings and edit “Wall Settings.”  There is an option for “Default Landing Tab for Everyone Else.”  From that menu, select your new tab. From now on, it will be the first thing visitors see when they arrive.

Personally I’m all for customization, but I like visitors to “land” on my wall. I’m the team photographer for the Reno Aces, our AAA baseball franchise. Part of my online marketing campaign is a countdown to Opening Day. Each day I add a link to a new image from last year’s inaugural season. Decide what works for you and set your landing page accordingly.

Engage Further With *FBML

So what is FBML? FBML stands for Facebook Markup Language. It’s the code used by Facebook applications to reference items on the social network. If you want to create uber customized landing pages like Victoria’s Secret or Best Buy, you’ll need to spend some time learning the language, there’s no shortcut I can provide. But If you want to integrate images from your PhotoShelter archive in a beautiful large-format slide show, like the one I created for my Calvert Photography Fan Page you’re in luck, keep reading.

Integrating PhotoShelter with FBML

So you’ve created a tab. Yes? Great. You know HTML. No? Don’t worry about it. I barely do either.

Go back to the “Edit”  link under the Static FBML app. When the text field opens up, paste the following code:

<fb:swf
   
swfsrc=”XXXXXXXX”

imgsrc=”XXXXXXXX”

width=”XXX” height=”XXX”

waitforclick=’true’

/>

Replace the X’s following “swfsrc=” with part of the PhotoShelter embeddable gallery code. To access that, log-in to your PhotoShelter account, go to “Galleries” and select the gallery you’d like to share. In the left hand menu, select “Embed This Gallery.”

DCalvert7.jpg

From here, copy and paste the “Embed” code into a text document. It’s easier to find the source file that way.

DCalvert8.jpg

Scan the code and look for:

DCalvert9_resize.jpg

Do you see the “http://www.photoshelter.com/swf/CSlideShow.swf…” address after it?

DCalvert10_resize.jpg

Copy everything between the two quote marks and paste that into the FBML text field replacing the X’s.

Next, find a hosted image (either on Photoshelter or a personal server). Replace the X’s following “imgsrc=” with that url. This is your “Click To Start” Image that will be displayed at the front of your gallery. If you’re using a Photoshelter hosted image, you can access the url by opening the image in the “Photographer Area” of your archive.

DCalvert11_resize.jpg

Copy the image link: http://c.photoshelter.com/img… and replace the X’s.

Congratulations you just created a customized PhotoShelter slide show on your Facebook Fan Page!

Things to keep in mind:

Sizing your images: Make sure height and width are consistent between the image source and the embedded gallery. I did this by creating a custom PhotoShelter gallery and then creating separate images with title slides and a play button in Photoshop. Mine are 600 px wide by 520 px tall.*

*UDPATE: On August 23, 2010 Facebook changed the maximum width of custom pages from 600 pixels to 520 pixels. Be sure to update your slideshows accordingly!

Make it easy to play:
I’d recommend putting a “play” button or “click to launch” text on top of the source images. That way users can easily launch your galleries. I used my limited HTML knowledge to create the “Click On A Gallery” headline just in case the play button wasn’t intuitive. Remember, don’t make the user think.

Here is the code for that. Copy and paste it above the embedded gallery (i.e.. above this: <fb:swf).

<span style=”color:#000080″>
    <strong>
        <font size=+2>Click on a gallery to launch.</font>
    </strong>   
</span>

Use your HTML skills:
Because FBML recognizes HTML you can use P tags <p> and justification tags like <center> to adjust the layout and spacing. If you want to embed multiple galleries, separate with a P tag and repeat the process.

Don’t forget your profile pic:  As long as we’re talking customization, let’s discuss that profile pictures. We all know Facebook limits the size of an image (200 px wide by 600 px tall). Why not use all of that space? Crop a photo vertically. Flip your logo on its side. Make a collage. Be creative!

About the author

David Calvert is a visual storyteller in Reno, Nev., specializing in corporate and editorial photojournalism. He plays slow-pitch softball, likes clean backgrounds and smokes old stogies. His passion for photography is matched only by his love for self-deprecating humor and fantasy baseball. When David isn’t in Reno, he is in Half Moon Bay, Calif. soaking up the fog and eating organic tomatoes. And he is learning to throw a knuckleball.

Check out David’s corporate and editorial photos at Calvert Photography, follow him on Twitter or fan him on Facebook.

Next Post:
Previous Post:
This article was written by
There are 35 comments for this article
  1. Chris Smith at 8:37 am

    This article is amazing, thanks for doing this. I had noticed that this was possible from the fan pages of others but hadn’t had the time to find out how FB code worked (if only all social networks used the same code or even plain html!!). Thanks again, saved me loads of time. Thanks Chris

  2. Serra at 12:16 am

    Thanks for this info, very neat! I just added it to my facebook page (See above) and although it doesn’t look great yet, its just because I didn’t format anything. I had no idea you could make custom tabs like that! Thanks again.

  3. Andrew Fingerman at 10:08 am

    The “Add to Page” button can be a little tricky to find. It is on the left hand side of the page under the user graphic thumbnail. Not totally intuitive, I know. Hope that helps.

  4. Darrell Young at 1:14 pm

    Actually, Andrew, there is no Add Page on many facebook accounts. Maybe on a purely business one. I have a fansite also, and it is an offshoot of my regular site which is powered by Photoshelter, of course: http://www.facebook.com/pages/Young-Imaging/101486523224090. However, underneath the user graphics are the following: Edit Page Promote with an Ad Add to My Page’s Favorites Suggest to friends If you click Edit Page, you’ll find a link at the very bottom, under More Applications to add the Static FBML. Once you click that, follow the directions listed above. Thanks, Darrell Young, a.k.a. Digital Darrell

  5. Darrell Young at 7:04 pm

    Be sure NOT to put any extra code between the lines of code he mentioned above (), other than the code necessary to pull your graphics. Also, be sure to limit yourself to 520 pixels wide, since facebook is about to kill the old 760 pixel wide standard, and your page will stop working correctly, then. My code for this page includes using a basic HTML table: http://www.facebook.com/pages/Young-Imaging/101486523224090 The first row has the button graphics, the second row contains the embed code for the cover image and gallery, and the third row has the graphic that talks about clicking the picture above to see the slideshow. Use standard basic HTML and it works just fine, including tables!

  6. Glen Allison at 12:08 am

    OK, I still can’t find out how to add the Static FBML. I’m logged in to my FB Page: http://www.facebook.com/pages/Glen-Allison-Visual-Artist-Travel-Photographer/177685923602?ref=nf On the top left under the picture I click “Edit Page.” I scroll to the bottom to “More Applications” but the Static FBML is not listed as a choice. So I click “Browse More” and do a search for “Static FBML” and click the icon. On the top left I click “Add to my Page” and then I get a window titled “Add Static FBML to your Page” but in the window it says “No Results.” Hey, what am I doing wrong?

  7. Sarah Sloboda at 1:57 pm

    I thought I copied everything correctly, but for some reason the slideshow doesn’t load in facebook upon clicking! Is this possibly a facebook issue? Anyone else have this problem? Thanks, Sarah

  8. Ronnie at 3:27 pm

    This is great, but what if I wanted to include FBML on my clients custom PhotoShelter website using Facebook Connect? There is a small line of code that the tag needs to be able to access the FBML library. As far as I can tell, the customization only allows me to edit whats in the tags. Can PhotoShelter integrate this code into their global template?

  9. Scott Hortop at 6:34 am

    I managed to make the code featured here work but there’s a new embedded slideshow out now and I can’t see how the new code works. Looks rather different. Can we have some help please?

  10. Mike K. at 2:17 pm

    As Scott mentioned above, P-shelter has updated the embed code so it is different than what is featured in this tutorial. Through a little hacking, I figured out how to make the new code work. Use the code listed above but ADD an additional line called: target=”XXXXXXXX” Previously the target= code was integrated into the param name=”movie”. Now the target= is listed separately. Look for param name=”flashvars” value=”target= in the P-shelter embed code. Here’s the new code format for Facebook (***NOTE I had to remove the begin/end html code brackets in the samples below or else it would not post the comment so refer back to the tutorial to see them. Your code won’t work without them.***): fb:swf swfsrc=”XXXXXXXX” target=”XXXXXXXX” imgsrc=”XXXXXXXX” width=”XXX” height=”XXX” waitforclick=’true’ Here’s an actual sample: fb:swf swfsrc=”http://www.photoshelter.com/swf/CSlideShow.swf?feedSRC=http%3A//www.photoshelter.com/c/green-stock-media/gallery/Featured-Recent-Images-April-May-2010/G0000U05lGYq.vow%3Ffeed%3Djson” target=”_self&f_l=f&f_fscr=f&f_tb=t&f_bb=t&f_bbl=f&f_fss=f&f_2up=f&f_crp=t&f_wm=t&f_s2f=t&f_emb=t&f_cap=t&f_sln=t&imgT=f&cred=iptc&trans=xfade&f_link=t&f_smooth=f&f_mtrx=t&tbs=5000&f_ap=t&f_up=f” imgsrc=”http://c.photoshelter.com/img-get/I0000dvctbduWEIc/s” width=”500″ height=”375″ waitforclick=’true’ — The one variable that didn’t seem to stick for me is Hide Titles in the Header of the slideshow but that’s minor relative to not having it work at all! Here’s my Green Stock Media Facebook fan page with New Work slideshow a la P-shelter and this tutorial: http://www.facebook.com/pages/Green-Stock-Media-Sustainability-Stock-Photos-HD-Stock-Video-Footage/277417570309 Cheers, Mike

  11. Quinn at 1:10 pm

    http://www.hyperarts.com/blog/facebook-announces-new-static-fbml-cutoff-march-18-2011/ It seems static FBML was discontinued, and that’s why no add to page, or for those that had it already, no more ‘add another” buttons. Old ones created before the cutoff are supposed to continue to work. I had a few thankfully, and just repurposed them into a new welcome page and recent work page. Check them out here if you like. Thanks http://www.facebook.com/quinnryanmattinglyphotography?sk=app_7146470109 http://www.facebook.com/quinnryanmattinglyphotography?sk=app_4949752878

  12. Martin at 9:48 am

    You’re right, Facebook no longer supports FBML. now you need use iframe apps for your fan page tabs. It’s pretty easy to add more tabs – you need go to Developers section, confirm your account by allowing Facebook developers app, and then Set up your own app. This cane be a static mini-page, or dynamic (php, python…whatever) site which you will host elsewhere. also, it’s quite easy to find cool facebook app for your fan page. take a look at my fan page, i have created a portfolio fan page and a tab for it: http://www.facebook.com/pages/Martins-Photography-Agency/115975515158077?sk=app_142362325841057 by the way, it is using free portfolio fan page builder from hostFB.

  13. karlo at 2:21 am

    I think this post needs to be updated. I tried the method mentioned above and no results. On my second try I included “target=XXXXX” as Mike K said and and worked however I don’t want the viewer to click on an image to show the slideshow i want the slideshow to appear and play immediately. Calvert I visited recently your FB page and your slideshows were playing immediately. What part of the code is missing? can you post it? Thanks Calvert and everyone for putting the pieces together.

  14. Janice Sullivan at 6:05 pm

    I think with the new change this isn’t working anymore?? Can you write an updated post or let me know if I’m just going crazy and just can’t figure this out? Thanks :0)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>