FOLLOW US

Blog

These articles are in reference to our original plugin, SlideDeck 1 PRO. If you are searching for articles related to our SlideDeck 2 WordPress Plugin, please check the blog category for SlideDeck 2 or search our Knowledge Base.

How a Non-Profit Increased User Engagement with Facebook API and CSS3

By On March 15, 20119 Comments

The following is a guest post by Joel Glovier, web designer for the non-profit, CURE International.

If you are involved in a Non-Profit, I can assume that a lot of your time is dedicated to raising funds and spreading awareness. This can be frustrating as it takes you away from your main goal of creating momentum and making a difference for your cause.

We’ve recently launched a new initiative with SlideDeck and the Facebook API that builds meaningful connections with our website users. As a result, we have increased online donor engagement significantly.

Read on to learn about:

  • How to use a jQuery slider to connect with your website users
  • How to integrate the Facebook API with SlideDeck
  • Details about how to easily customize a SlideDeck skin with CSS3 tricks

How SlideDeck is Enhancing Our Workflow, User Experience and Engagement

I’m the designer/front-end guy at CURE.org. I do a lot of Photoshop work and code in HTML and CSS. I have two very talented programmers in the office who do most of the back-end work (another Joel and a John), but since their time is preciously spent on critical parts to our web presence, we decided that SlideDeck Pro would be a great out-of-the-box jQuery slider for me to simply work with on my own to get the job done.

the SlideDeck implementation at http://cure.org/help-now

Initially we choose the SlideDeck for the “Help Now” section of our site, where volunteers and supporters can find the essential ways to support our organization. The SlideDeck setup provided a very flexible tool that I was able to create a custom skin for and use to present our content in a very engaging fashion. Based on these results, we decided to take SlideDeck a step further with another part of our site.

Use the Facebook API to Create a Connection with Users

So CUREkids is a new initiative that we are piloting right now on our website and with our Malawi hospital. The whole idea is to provide a way for our online audience to authentically interact with the journey of a child who is undergoing the treatment process at one of our hospitals. Joel Worrall, our department VP always says it this way:

I know that if I could take you to one of our hospitals to see first hand what is happening in the lives of these children you would become a CURE supporter for life. But since I can’t, CUREkids is the next best way to show you.

So we want to make people really feel connected to the children we are healing, and to their story.

SlideDeck has become an integral part of how we are executing that connection. We were able to use the Facebook API to pull in the visitors profile image, as well as a selection of their friends to help illustrate the story of how the CUREkids program works.

In addition to using the SlideDeck on the CUREkids landing page, it’s also used on each child profile page where we dynamically pull in that child’s photo and combine it with the user’s photo to drive the point home.

You can see in the slides below each of the four slides how we explain what CUREkids is with the SlideDeck:

the SlideDeck implementation at http://cure.org/curekids - 1st Slide image

the SlideDeck implementation at http://cure.org/curekids - 2nd Slide image

the SlideDeck implementation at http://cure.org/curekids - 3rd Slide image

the SlideDeck implementation at http://cure.org/curekids - 4th Slide image

How We Did It

So let’s get into customizing the skin and implementing this thing.

1. Design Concept with PhotoShop

Starting from a default install of the SlideDeck, the first thing I did was design my custom skin in Photoshop. I took a good look at the markup, so I would know what I had to work with in terms of “hooks” that I could use CSS to hang styles from. I knew I’d be using a background of some type for the whole SlideDeck container, and that I could create images for the SlideDeck spines, and assumed the rest could simply be built out as normal using the actual slide panes as a blank canvas just like you’d style content any old div element.

Here you can see my initial mockup of what I wanted the SlideDeck skin to look like from Photoshop:

the SlideDeck implementation at http://cure.org/curekids - psd mockup

2. Exporting Image Sprites

I exported parts of the mockup as images to be used in the actual markup with CSS. I do this by converting the layers to be exported into a Smart Object, then opening the Smart Object and saving it’s contents with the Save for Web & Devices command into a .png, .jpg, or .gif – depending on the need. The benefit of using Smart Objects to export your images is that as when you save your layers into a Smart Object, the embedded document that results is cropped right up to the pixels of the contained artwork (not the canvas of the parent document) so it makes exporting the images much more efficient.

Here you can see the sprite I created for the for spines:

the SlideDeck implementation at http://cure.org/curekids - spines sprite

For the background of the SlideDeck, I ended up using a content background frame that we use elsewhere on our site which is a combination of a little extra markup, and background images that result in a flexible height content frame. I’ll talk more about that later, but you can see a sample of the sprite I use to build it here:

the SlideDeck implementation at http://cure.org/curekids - container background sprite

With this sprite I’m essentially reusing it on three different containers (as opposed to creating three different background images – to save bandwidth and improve page load speed) and simply using the CSS rule for background-position to hide or reveal whichever part of the sprite I need to show on that particular container. This actually just describes the technique of using sprites in general.

3. Skin Markup and Styles

To really look at what’s going on in the markup to skin this SlideDeck, let’s open Developer Tools (webkit) or Firebug (Firefox) and have a look at the markup. The first element you’ll see is div#curekids-toggle-frame, which is really just a container so that we can hide and display the SlideDeck with a bit of jQuery.

the SlideDeck implementation at http://cure.org/curekids - toggle frame

Next we have the div.page-bg, which contains div.page-bg-top (an empty div for setting up the top border image) and div.page-bg-btm (another empty div for the same purpose). Those two divs are completely for style, but allow me to use div.page-bg-contents as a wrapper for the SlideDeck where I’m actually just setting a y-repeating background image.

the SlideDeck implementation at http://cure.org/curekids - page bg top

the SlideDeck implementation at http://cure.org/curekids - page bg contents

The next element down the DOM tree is the actual SlideDeck markup itself:

the SlideDeck implementation at http://cure.org/curekids - slidedeck frame

So the actual markup for the whole background frame to the slidedeck looks something like this:

<div id="curekids-toggle-frame">
	<div class="page-bg">
		<div class="page-bg-top"></div>
		<div class="page-bg-contents">
			<div id="slidedeck_frame">
			*Actual SlideDeck markup lives here*
			</div>
		</div><!--/.page-bg-contents-->
		<div class="page-bg-btm"></div>
	</div><!--/.page-bg-->
</div><!--/#curekids-toggle-frame-->

The next step is to style the SlideDeck components itself – which is really pretty straightforward. I first copied all the default styles from the file slidedeck.skin.css into my own skin file where I overwrote them with the appropriate styles to make the SlideDeck match my mockup.

I removed most of the background colors and styles, except for the background color on the .slidedeck dd, which I set for #faf7ee, so it will always match the background image. Although technically, I could have left this rule out because the background image would simply show through, including this rule ensures that users who are not getting the background images for any reason will still see some styling as intended. I’ve done the same thing with the slide spines, as well.

the SlideDeck implementation at http://cure.org/curekids - Spines

For the spines, I styled them with my background sprite using the following set of rules:

.slidedeck dt {
	height: 50px !important;
	width: 335px !important;
	line-height: 50px;
	background: url(/img/slidedeck-spines.jpg) no-repeat center bottom;
}
.slidedeck dt:hover {
	background-position: center center;
}
.slidedeck dt.active, .slidedeck dt.active:hover {
	background-position: center top;
}

You’ll notice in the CSS rules above that I’ve given the selectors targeting the dt element’s :hover state and the dt.active and it’s hover state rules to define the spine sprite as it’s background, and just shifted the background-position on :hover and .active.

You should also notice that for the height and width, I needed to add an !important declaration to override the styles that are initially applied by the SlideDeck javascript.

Adding the Content

After styling those main SlideDeck components – the skin – the rest of development was just adding content for the slides, and styling them as any other static content within a div container.

the SlideDeck implementation at http://cure.org/curekids - slide content

I used background images for each of the main slides (the dd element) adding classes to each dd to specify which slide number I was targeting.

Extra Step: Dynamic Content

Finally, after I had created a static working mockup of everything, JW and JK worked their magic to make the content dynamic. As I mentioned earlier, the slidedeck pulls the current child’s image into the slide with a PHP function that is powered by our CUREkids custom WordPress plugin.

the SlideDeck implementation at http://cure.org/curekids - dynamic content

We are also pulling in the users Facebook profile photo when the user logs into the site via the Facebook Connect option. We are even able to pull in a random selection of their friends for the third and fourth slide to give the presentation an extra personal touch.

Conclusion

I hope you’ve found this breakdown to be helpful in customizing your own SlideDeck implementation. And I hope it gives you a good first hand instance of how powerful the features of the jQuery slider plugin can be, especially along side other modern development technologies like the Facebook API, CSS3 tricks, and good old fashion finger-grease.

I’d love to see your examples – if you have a sweet implementation, please share it with me in the comments!

About the Cure.org

Cure.org is a Christian nonprofit organization that does medical work with children in developing nations. We run a series of hospitals in 10 countries that perform free or low-cost surgical care for kids with disabilities. Without CURE, these kids and their families would have little hope for a productive life, but we literally transform their lives through a surgery that costs us about $1000 to provide. Our hospitals and organization are primarily funded by donors who give to help us continue our vision. Our website, CURE.org, is a critical piece of that fundraising process.

Leave a Reply

Comments (9) Responses

  1.  

    Luca

    Very nice, my compliments!
    But your jQuery slider can be shared/embedding in FB wall? I think it wolud be very interesting to increased User Engagement…

    •  

      Jason

      Hey, thanks Luca! Yeah, we’d love to be able to embed SlideDecks in the FB newsfeed – there are a few technical hurdles, but it’s something we’ve been looking at, for sure.

  2.  

    mike ils

    By far the best Slide Deck I’ve seen.. nice work!

  3.  

    Jesper Lindebjerg

    thanks for sharing your work, helps a lot to get started.
    I was thinking why did you leave the signs, in your layout file, on the tabs out and put in numbers in the buttom? I like the signs only, but there is no templates with signs or letters – I would like to use letters, like A, B, C and so on, is this possible?

    •  

      Joel Glovier

      Hi Jesper – glad you enjoyed the article.

      Good question about the numbers/symbols/letters of the slide spines. The simple answer is that in my layout file, I was designing for our first implementation of the SlideDeck, on our Help Now page, which I did in fact stay with just using the symbols.

      But the rest of the article is regarding our second site implementation of the SlideDeck, on our CUREkids section.

      The reason I used two different approaches to designating the spine (symbol vs. numeral) is because for the former implementation – the one without numbers – the content of the slides is not sequential, so I didn’t feel using the numbers would be appropriate (same reason you’d choose an ul tag instead of an ol tag). Whereas for the implementation in our CUREkids section, the content is in fact sequential, so a numbered list is more semantically and visually meaningful.

      As far as whether you could use letters instead of symbols or numbers – the answer is yes. You’d simply need to edit the div.index inside the dt element and replace the numerals with letters.

  4.  

    Thunderfunk

    Thank you for sharing with us your customisation process of SD – with great result. It’s given me some valuable inspiration.

  5.  

    Joel Glovier

    Happy you enjoyed it Hatef – let me know if you have any questions!

  6.  

    Hatef

    Thanks, this is really useful. A perfect intro to customizing SD.