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

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.

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:

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:

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:

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:

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.

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 next element down the DOM tree is the actual SlideDeck markup itself:

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

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.

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

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.

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.

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.

Featured Posts

Do you want to showcase your WordPress custom posts in the slider of your website? A WordPress post slider will not improve traffic for your blog posts, but will also improve the visitor engagement with...

Showcasing images from any Pinterest account was never so easy. SlideDeck3 gives you the ability to create a dynamic Pinterest slider in WordPress in just 30 seconds. Also, enables you to allow visitors to pin your slider’s...

Instagram is one of the most popular social media platforms today. How about if you could showcase your favorite Instagram photos into the slider of your WordPress site? While there are many WordPress plugins available,...

Do you want to boost your sales ? Sliders can be used for marketing and highlighting the hot products on your site. Using the WooCommerce Product Slider to showcase your hot products is an efficient...

Do you want to quickly create image/video/text/HTML slides in WordPress? SlideDeck3 allow you to mix a variety of slide types into a single presentation such as photos, videos, text and HTML documents to create a...

Do you want to add a Zenfolio Gallery slider to your website? You can easily import the gallery images from your Zenfolio account and create a beautiful responsive slider for your WordPress site using SlideDeck3....

Joel Glovier

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

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.