Help & Support Mendaftar secara Login

The Social Website: Integrating Social Media into Website Design and Function

Debra Askanase & Seth Giammanco

If you're considering revamping your website to include social elements like the Facebook Like button, streaming from YouTube, or adding information from a social site through its API, it can be overwhelming to know where to begin. There are many ways to “get social,” and so many reasons for doing so. Primarily, it's about creating a fundamentally engaging experience for the website visitor that brings them closer to your organization.

The process of considering how to get social starts with considering goals.

What are the reasons for integrating social media into your website?

It all begins with a goal: what do you want to accomplish using social media? The goals seek to address “Why” you might want make your website social. Taking that thought a bit further, think about how using social media on your site will accomplish those goals. By thinking first about the goals, you clear a path for the decisions around which tools you’ll use to get there.

There are five main reasons for integrating social media with a website. The five basic goals of using social media within a website are:

  1. Build followers within the nonprofit’s social media spaces
  2. Create on-site engagement
  3. Develop a sense of community on the website
  4. Raise funds
  5. Create a call to action

In our review of many social websites, we noticed that some websites have at least two primary goals for placing social media on their website. Think about separating your goals into “priority” and “lesser priority” goals for your organization. Don’t be afraid to begin with one or two primary goals, testing to see whether or not your goals are being achieved, then adding more social media integrations that achieve other goals to the site.


Categories of Implementation

Categories of integration address “what” you might do to meet your goals, and how you would do it. While reviewing websites, we specifically looked at the different types of social media organizations were integrating into their websites. We categorized the (almost limitless) social media integration possibilities into five categories:

  1. Show
  2. Share
  3. Interact
  4. Co-create
  5. Authenticate
  6. Open source

Each category is exhibited by different tools, technology, and/or approaches. Here are some examples of categories and how they might be implemented within a website:

  1. Show – Recent Tweets, Likes, Comments
  2. Share – Like & Tweet Button, E-Card, Fwd to Friend
  3. Interact – FB Live Stream, Hashtag (Tweet Chat), Comments
  4. Co-Create – Shared Content: Mapping, Mosaic, Wiki, Links, Games
  5. Authenticate – FB Login, Twitter OAuth
  6. Open Source – API

Some of the items above are simple widgets and plug-and-play doodads that allow one to take a little snippet of code and incorporate it onto a web page. With services like Disqus, even complicated features like comments can be added to a page in literally minutes.

On the other end of the spectrum, there are uses of technology to create unique "co-create" opportunities, if not open opportunities, where content can be made available through APIs and syndication for others to use. Check out the Brooklyn Museum’s API documentation for some pretty advanced tech sharing.

The graphic below illustrates the intensity of resources required for each category.

Here are a few social websites that offer different levels of resource integration.


1. HandsOn Network’s America’s Sunday Supper

This was a Livestream powered event billed as “America’s Sunday Supper” in the spirit of Martin Luther King, Jr., part of a national event to inspire giving and local leadership. HandsOn created a page on their site to showcase the livestreamed panel discussion on volunteering and leadership, and encouraged online participation through its live Twitter stream and Facebook stream on the website page.

  • Goals: develop a sense of community, create on-site engagement
  • Categories: show, share, interact
  • Implementation: livestreaming, Facebook event plugin, Twitter feed


2. American Red Cross: Why Should I Give?

The site presents, one reason at a time, why one should give to the Red Cross. Each reason is clearly presented with no more text than you might put on a PowerPoint slide. The reasons are sourced from blog, news, or case study posts from a network of American Red Cross sites. These posts are linked to if a visitor chooses to read more about the reason shared. For each reason you view, the site ticks up your donation counter one buck and if you decide to give, the resulting donate screen defaults to the amount of your donation counter and number of reasons you needed to be “convinced”.


The primary goal of the site is to fundraise and build followers. The social aspects of the site rest in use of Facebook and Twitter social plugins/widgets for sharing as well as liking the campaign.

  • Goals: raise funds, create on-site engagement, create a call to action
  • Categories: Show, Share
  • Implementation: Tweet Button, Facebook Like Button


3. VolunteerMatch: Live Map

VolunteerMatch has created an up-to-the-minute live map on its website, offering information about the total number of searches and different categories of referrals indicating when a user has responded to a volunteer opportunity. The map pinpoints where the referrals were made throughout the United States, with the goal of showcasing individual activity collectively to illustrate the social impact of volunteerism. VolunteerMatch also utilizes social authentication to allow Facebook account holders to login using their Facebook accounts. VolunteerMatch also has placed a Facebook activity widget on the home page to highlight users whom have recommended (liked) content on the site.

  • Goals: create a call to action, develop a sense of community on site
  • Categories: show, authentication
  • Implementation: Custom mash-up of site specific volunteer activity with geo data to map via Google Maps.

It's an exciting time, where strategy begets technology solutions and in turn technology inspires new strategic opportunities. It's critical that all of us crafting engagement keep learning, keep seeking out new tools and inspiration from our peers. Each day a new tool is announced and someone is doing something cool with it to create connections and to do some good. Having a framework to organize the goals you see and to categorize the types of technology integration can help to make quick sense of a social site.

Please join us online on September 13th, 10am Pacific for our NTEN Webinar, The Social Website: Integrating Social Media into Website Design and Function to look at additional examples of sites getting social. If you have a social site to share or are curious about other examples to check out, please visit the Get Social blog.

Debra Askanase is the founder and Engagement Strategist at Community Organizer 2.0, a strategic social media consulting firm to nonprofit organizations. Prior to founding Community Organizer 2.0, Debra worked for almost 20 years in the nonprofit field, originally as a community organizer and later as a program director, executive director and fundraiser. Debra holds a B.A. from Emory University and a M.B.A. in International Business from Bar Ilan University. She has presented workshops at the Nonprofit Technology Conference and is a speaker and presenter at conferences worldwide.

Seth Giammanco is a Principal and the lead technologist at Minds On Design Lab, a design and technology studio that serves as a partner to nonprofit organizations. Seth joined with Michelle Perreault to establish Minds on Design Lab to pair his technology experience with her creative leadership in 2007. Together they defined a guiding formula: a thoughtful approach + creative minds = smart design. This formula is being successfully applied to a continually growing collection of nonprofit partners across a diverse body of work spanning print collateral and marketing materials, websites, and highly interactive web applications and community destinations. An experienced software product and project manager for over 11 years, Seth's in-depth experience combines information and interactive design with hands-on technology skills. Prior to Minds On Design Lab, Seth worked in the educational field first as a 5th grade classroom teacher and then as a technology and support leader in a thriving education technology startup.

Image: Woman, Face, Head, Question Mark Circle Tree, Pixabay