If you have an important story to share online, start here!

Watch the video to get the 3 minute e-Advocacy crash course, What is e-Advocacy?, produced by Jennifer Dueñas from the Ryse Center’s Youth Organizing Team in Richmond, California. The video breaks down the ‘Four Processes for Sustainable Online Impact’ and let’s you know how to get the word out online.

What is e-Advocacy?

Produced by Jennifer Dueñas from the YO Hub

CANFIT says, “Props to Ryse Center’s Organizing Hub for a fresh video on E-advocacy and online organizing!” We couldn’t agree more!

We have a huge admiration for the Richmond Youth Organizing Team, CANFIT, and the Ryse Center in Richmond! Through a series of workshops and trainings, Aspiration had an amazing time working with them to build momentum for increased youth involvement in online organizing. CANFIT’s MO Youth e-Advocates Project engages youth in “e-Advocacy” and works directly with youth to expose them and their adult allies to the fast-evolving world of “online campaigning”. Check out more information from CANFIT on the Youth E-Advocacy project: http://canfit.org/our_work/programs/eadvocates/

Download training materials on the Four Processes for Sustainable Online Impact.

Follow the @RichmondYOT on Twitter to keep up with their game changing and community building work!

As you begin the process to engage people in the offline or online world, you have to figure out how your messaging reaches the people you care about by tapping into what they actually really care about. On top of that, you have to figure out not only how to reach your audience but also to balance the priority of these messages for your staff’s work time.

Of course, this is easier said than done.

To help get through this hurdle, we have a couple filters we like to run our online messages through to really think if the content might be engaging, based on what we are trying to get done vs. what other people’s motivations really are. We named these so-called “filters” the two P’s and two F’s.

What do we mean by that? Let me tell you.

The 2 P’s and 2 F’s are ways to think about if your online messages inspire action and give value to your constituency. We describe them as the following:

PAIN

Find common areas of pain among your people. Then, use this knowledge to identify how those pain points are being messaged in your website and your email newsletters. Figure out points of crisis or injury to identify points of need.

PASSION

When you tap into people’s passions, make sure to always give them the opportunity for a small amount of ownership (Tag in a photo, Name check, Invite to an event as a guest, Ask to share with friends). The act of acknowledgement will give you the space to build an online presence engaging folks with continued small, well-defined asks. This leads us to Fame…

FAME

Use Fame to bridge Online and Offline Work

• If you want people to come to your protest – you better have gone to a couple of protests.
• Making people part of your narrative in a noncommittal way through social media and online communications gives them “fame” and by default engages them more.
• Using the jpeg – posting people’s pictures on the Internet invokes the feeling of getting your name or picture in the local paper. It builds excitement, engagement, ownership.

FUN

People want to join movements that look like they are having fun.

Value Delivery is Key

The 2p’s & 2f’s can be used to not only continue to engage already existing networks but also GROW networks by connecting with more people, which we sometimes forget or find too hard to do.

At the end of the day, no matter what tricks or tips we apply, we must remember to always ask ourselves what value we are providing or creating for the people we are serving and if it’s what they really want.

Special Thanks to notetakers from the CA Tech Fest in Fresno and Gunner for providing thoughts on this blog post.

How do you motivate your people? What really gets them interested?

We’d love to hear more ideas!

Last year, Matt wrote one of Social Source Common’s most popular blog posts that details Creating “Share This on Facebook/Twitter” Links.
The post includes what code is needed to create an auto-tweet or auto-share link.

In this post we will dive deeper into “tweet this” links, including:

• Why not to use the Twitter button builder
• Why you need to use %xx in place of certain symbols
• How to also include a # and tag users with an @ sign in the tweets

Why not use the buttons supplied by
Twitter button builder?

Twitter offers an “easy” way to create your own button and twitter developers provide information about creating and using tweet buttons. The problem with buttons built in Twitter’s button generator is that they require Javascript. While this works fine for websites, Javascript is either stripped, or disabled in most email clients, because it is commonly used by spammers. So, if you include a ‘tweet this’ button in your HTML email newsblast it is likely that it just won’t work. Also, your email blasting service may flag any HTML code containing Javascript.

Why do I have to use these special characters just to do a #&%@ tweet?

When you create a “share this” link on twitter starting with
<a href=”http://twitter.com/share?text=…“> you are creating an URL that leads to a tweet composition page where text is already entered. That means that the text you want to show up in the tweet needs to be part of the link.

When you pass information through an URL link, you need to make sure it uses only allowed characters like:

• letters
• numbers
• special characters that have meaning in the URL

Any other characters in your tweet link will mess things up.

For instance, sometimes we use a / symbol when we make a tweet to save precious character spaces, like “I have a love/hate relationship with my office chair.” Usually, this works fine. But, we cannot put a / symbol in a ‘share this’ tweet link in email newsletters. The / symbol is mistaken as something else and your ‘tweet this’ link will not work properly. To that end, we must use other funky ways to tell the code exactly what we want. It’s pretty easy once you get the hang of it, I promise.

This funky thing we do so we can use symbols in our tweet is called “URL encoding“. URL Encoding is special combinations of characters in a URL that are interpreted as other characters.

Share on Twitter Links that include # and @

Creating a HTML link to automatically fill in some Tweet text is pretty simple and you will avoid all that Javascript trouble. You just need to know some additional code to stick into the HTML link code. You may want to check out Matt’s original post about creating share this on twitter links first.

Some of the most common symbols needed for a good tweet are also those that cause problems in the URL code. They include the #Hashtag symbol and the @Mention symbol.

Let’s take a look:

To make a link that works, just replace spaces and special characters in your tweet text with their URL encoding equal.

That sends the user to this:

…use the following code:

• Blue is the HTML code
• Green is the code that gets Twitter to generate a tweet through a link
• Purple are the URL encoding reserved characters
• Red is the text of the tweet
• Orange is the URL that will be included in the tweet
• Black is what the link will say

Make a Button

If you want to make it a button, just make the link an image instead of text.

For a button like this:

Use code like this:

• Blue is the HTML code
• Green is the code that gets Twitter to generate a tweet through a link
• Purple are the URL encoding reserved characters
• Red is the text of the tweet
• Orange is the URL that will be included in the tweet
• Aqua is the image link
• Black is what the link will say if pictures are not loaded

What other tips or tricks do you have for creating “share this” links or buttons?

I started the process of updating my contact information for the companies that had recently contacted me, this strategy worked fairly well. But, as I found out in the next 6-9 months through e-mail and from my previous residence continuing to forward mail, there were some fairly important contacts that I missed by not having a definitive list to work from.

“Do we already have an account with ___________?”

As a nonprofit trying to work in the vast online realm, you may find your organization in a similar position as I did. Needing to update contact and login information without knowing for sure where all your online identities are located and maybe not even aware of all the different locations where organizational data is stored.

Knowing where your data is stored is incredibly important because, as Matt explained in an earlier blog post, DATA IS YOUR MOST IMPORTANT TECH ASSET.

In order to keep track of organizational online real estate and identities, along with what data is stored in those places, Aspiration has developed a simple spreadsheet. In this spreadsheet we list out all of the different places where organizational data is living and record the account information associated with those places.

Benefits of Knowing Where Your Data is Online

Just like knowing who needs to have your updated contact information in order to send you important stuff like bills. Keeping track of our online accounts in this way has really come in handy when:

• doing regularly scheduled password changes
• figuring out if previous staff opened accounts on any platform
• closing online accounts that are no longer used
• and when educating new staff about what data is stored in what online accounts.

Essential Account Information

In general, we try to keep track of two different kinds of information for our online accounts. First, the basic essential information such as:

• What is the service or vendor?
• What URL do we use to access the account?
• What login information (username) do we need?
• Who has access to that information? Or Who uses this account regularly?
• What contact e-mail is associated with the account?
• Fee for service information

DO NOT KEEP PASSWORDS AND LOGIN INFORMATION IN THE SAME DOCUMENT. Ever. End of story.

Second, we record information about the data that is stored with each online account, including:

• What kind of data is stored there, hosted data or analytics data?
• What data are stored there?
• Is it backed up?
• How is it backed up?
• How often is it backed up?

For security, it is NOT a best practice to keep track of where the data is backed up in this document.

Hosted and Analytics Data

Its may be important to differentiate what kind of data is stored with an online account. In our experience, we can sort these kinds of data in two categories hosted data and analytics data.

Hosted data is information that you put into a platform, such as website content into a content management system or an event desription into eventbrite. Keeping a back up of this information is important because it is data that took time to create. Losing this data would result in a need to recreate it, which means time lost.

Analytics data, is also very important to your organization, as it lets you know how your online efforts are working. This is usually data that the platform reports to you, like when facebook insights lets you know how many visitors your page has had. Its important to know how long the platform will retain this information and to regularly record the analytics data somewhere else, so you can track progress over time.

Try It, You’ll Like It

Now that you have an idea of what an Online Accounts Inventory could look like, and what information is important to keep track of about each account. Try making one for your organization! You may be surprised at how many online accounts your organization has when you take the time to write it all down.

Get started with this template

• Online Accounts Inventory Template.ods
• Online Accounts Inventory Template.xls

Example of our Online Accounts Inventory

• Example of Online Accounts Inventory.ods
• Example of Online Accounts Inventory.xls

If you use this template to make an online account inventory for your organization, we would love to hear any feedback you come up with while working through the process.

Do you have another way that you keep track of online accounts? Share it with us!

We love SSC toolboxes

The current setup for toolboxes on Social Source Commons gives you some great options to talk about the tools you’re using as a nonprofit or an individual.

• Add tools

  It wouldn’t be a toolbox if you couldn’t add tools! SSC toolboxes allow you to search for tools right inside the toolbox and add the ones that are relevant to the toolbox’s topic.

• Custom Descriptions

  Once your tools are in the toolbox, you can edit their descriptions (almost) any way you want. These custom descriptions only change the tool’s info within that specific toolbox. Outside of the toolbox, the tool’s description always stays the same. As a result, you can tell your story of using the tools by talking about how you’ve used them and adding links or images.



 

• Add Resources & Documentation

  Other than tools, SSC Toolboxes let you link to relevant Documentation, Training, Community and Learning Resources so that people checking out your tools can get extra info that may be relevant to the toolbox’s function.

• Add Feeds

  In addition, you can throw relevant RSS feeds into your toolbox as well to automatically pull in blog updates, Twitter Tweets, Facebook Page updates or anything else that may be of interest or attached to the theme of the toolbox.



 

• Share it with the world

  Finally, what’s the use of a toolbox if no one knows it exists? SSC toolboxes give you a few ways to share toolboxes out with your social networks and existing audiences. With the Twitter Tweet and Identi.ca Share buttons, you can post a link to the toolbox to your stream for your followers to check out. In addition, each toolbox automatically comes with “Embed Code” so that you can embed your toolbox into the HTML of your blog, web site or online real estate.

Ch-Ch-Ch-Changes

My motivation for changing SSC toolboxes was largely due to the layout and structure. Not satisfied with the current tab structure and other design-y issues that I think could be improved, I wanted to throw it out to all of you in the SSC Family to see if you had thoughts about the SSC toolbox, design or otherwise. Features that you would like to see, things you wish weren’t so hidden, help when implementing a toolbox… What would make SSC toolboxes more valuable for you?

What would YOU like to see in an SSC Toolbox redesign?

Data are Your Organization’s Lifeblood

When someone says “data”, many people think of technical stuff like code, 1s and 0s, mathematical formulas and things that happen behind the scenes. Well I’m here to say Pish Posh. PISH. POSH.

Data, my friends, are the contents of the work that you do at your organization. Everything from the web pages that you create to the contacts you make at networking events to the conversations you have with your boss through email. If you dig deep enough, many of these things are, yes, code-y and technical at a deeper level, but as an organization you can think of these data as the information that informs, defines and fuels your work.

Data are the raw materials that tools (e.g. CRM, web site CMSes, Facebook, email clients) use to be effective. Think of your email client (e.g. Outlook, Thunderbird, etc.) without your emails or contacts. Pretty useless, eh? Or think of your web site without the page text, pictures and customizations you’ve made. It would just be an empty skeleton of a web site, right?

Data are the real organizational assets.

Your organization’s data are what makes it do what it does. Tools act as containers that hold that data. The containers can change but the data are what stays the same. As a result, we advocate for organizations to take a data-centric approach to their organizational technology rather than a tool-centric approach.

Have a Data-Centric Technology Policy NOT Tool-Centric

Remember that tools change, break and developers stop working on them all of the time, whereas the data that your organization uses will continue to exist and grow. By prioritizing your data rather than tools, you’ll be focusing on the stuff that really matters rather than the container (tool) it’s currently sitting in.

Many organization have budget line items for tools but few if any have budget line items for the amount of time, energy and money that goes into data creation and maintenance. Unfortunately, “data” can be an abstract and vague concept especially for budgets. But however vague it is, because it is the real asset, “nonprofits should center their technology strategy and resource allocation around the creation and curation of data, instead of fixating on the cost of applications and processors that edit and store that data.”

Think about Data When Choosing a New Tool

Ideally, all of this talk and stress about the importance of data is happening when you begin a relationship with a new tool (rather than figuring out what the situation is for an existing tool in your infrastructure). When looking at new tools to take on some type of function at your organization, here are a few things to consider as you prepare to send your data off into the big scary world:

• Plan for the day when you need to switch tools or the tool you’re using breaks

  Can you get your data out (in other words, what are the “export” options)? How? What if Facebook accidentally deletes your page? What if your email blasting program breaks? Are you able to prepare for those eventualities by making a data backup?

  What about if a tool choice you made turns out to be bad? How do you move your data from one tool to another?

  

   

• Make sure the backup of essential data is a well-defined process

  If you are able to get your data out of the tool, do you know what you need to do to use it again in another tool? Is it using a universal filetype like .CSV or something that wouldn’t be intelligible even if you are able to get it out?

• Know the security and privacy implications for your data, your org AND more importantly your constituents

  What does the tool’s Terms of Service say about its use of your data? Are the data secure, private, encryptable? Who else is allowed to look at your data? In what legal jurisdiction are your data being stored? As a nonprofit with constituents, you have an obligation to keep their data safe and secure.

• Find out ownership terms for you data

  Are your data really yours? What do the Terms of Service say about ownership?

Open Source Tools are a Data-Centric Org’s Best Friend

Choosing tools that are good to you and your data can be tricky. You have to do your due diligence in making sure the container (the tool) for your data is going to treat it all right and let you have all the access you need. While you need to evaluate what your different tools are doing with your data no matter what, Open Source tools generally put you on much, MUCH more steady of a foundation.

• Open means transparent
  

  The nature of open source technology is that anyone can see how it works. This means that every aspect of an open source tool is out in the open for the entire world to see. No backdoors installed for the government to snoop and no software developers coding secret pieces to gather data on your use.

• Not tied to one person

  Because anyone can dig around in an open source tool and learn how it works, there are many open source tools with very large communities of developers and users who are super familiar with it and can help you out. This, in contrast to a custom-built tool that may do exactly what you want but if the relationship with the developer goes sour, you’re trapped with its functionality, price hikes for services and schedule because no one else knows the tool but the person who made it.

• No profit motive

  When you buy a proprietary tool like Adobe Creative Suite or Microsoft Office, those companies are making money. They’re in the business of selling software. Money is their bottom line and motivation. With open source tools, on the other hand, because anyone can see how the tools work, most of the developers aren’t are out to make money, they’re more about supporting users with functions that they need to get real work done.

All of these factors (and many others) lend more transparency how tools are manipulating your data and give you more freedom in terms of how you can get it out. We strongly recommend whenever possible, especially as a nonprofit to choose open source tools.

How Can Our Organization Get On Top of Our Data Management?

Ok, so now we’re all freaked out about tools throwing our data around.

What do we do about it?

• Put together a “data inventory”

  Open a spreadsheet and start listing all of the places that your organization has data. Think of communications tools, project management tools, online real estate, white boards, photo albums… Have the spreadsheet account for the following:

  • Where are all the places your organization has data living?
  • What data are stored there?
  • Who has access?
  • Is it backed up?
  • How is it backed up?
  • How often is it backed up?
     
• Back up your data!
   
• Make sure that with each new tool adoption, you have a sense of how to get your data out of the tool

Need a template? Here is deeper look into Creating an Online Accounts Inventory.

Data Trumps Tools Every Time

In a nutshell, try to prioritize data as the true technology assets at your organization. That way you’ll be able to manage tool shakeups, breakages and switches that are inevitable while protecting the real information that your organization needs to keep saving the world.

How do you prioritize data at your organization?

Aspiration was excited to be involved in such an important movement happening in tool development. You can see photos from the weekend on Flickr with the tag wsjdata. I wanted to highlight some of the amazing tools being put together from this weekend.

From tools that show you which sites are blocked on your current network to tools that allow you to have encrypted telephone calls and even encrypted Facebook instant messaging, these tools are on the bleeding edge of privacy and security.

Check out the tools that have been put together over the weekend in the toolbox below. Note: These tools are all in varying levels of progress so don’t dive in assuming they’re “ready for primetime.”

What tools would you like to see that support your privacy online?

Take a look at our updated chart below and click on it to get more details from the post

WYSIWYGs Suck

When you’re putting together an email in your email blaster with images, links and formatting, you’re really writing a piece of HTML code (*gasps*).

Editors in blasters like VerticalResponse or MailChimp use what are known as “WYSIWYG” (What You See Is What You Get) editors so that instead of having to know how to code something to, say, look bold in HTML, they can just highlight some text and click a bold button. Anytime you see buttons like “bold” “italic” “left align” font size, etc. like you would in Microsoft Word or Open Office, you’re most likely using a WYSIWYG editor. So why is this even an issue to bring up?

Well.

The long and the short of it is that WYSIWYG editors almost universally suck. And the problem is that, unless you know how to code HTML, you’re stuck with them to build your HTML email. Let’s take a look at why WYSIWYGs by nature are problematic and give you some tips around how to work with them so that you’re not pulling out your hair.

Many Ways to Do the Same Thing in HTML

The first thing to know about HTML is that there are many ways to do the same thing. For instance, let’s say that I want to add space around an image so that the text isn’t butting right up against it. In HTML, I could increase the “margin” around the image OR
Increase the margin around the text OR add some non-breaking spaces OR put it in a table and increase the “cellspacing” OR a whole host of other things to give that image some breathing room from the text. When I’m using a WYSIWYG editor, though, all I see is space between the image and the text. It has to guess which technique I want to use.

This can cause problems down the line.

For example, in the WYSIWYG, I’m just visually separating the image from the text probably with my mouse.

The WYSIWYG interprets this as adding margin around the text.

Later, let’s say I decide I don’t need that image after all. I delete it.

Because the WYSIWYG added margin around the text rather than the image, the margin stays because the text is still there and now the edge of my text has extra white space and doesn’t line up with my other text.

Argh. Because WYSIWIG editors have to guess which of many HTML techniques you want, your email suffers.

Formatting Invisible Containers

Another basic point to understand about HTML is that it is a language built of containers. In HTML, you define containers and put containers inside other containers. Like tupperware, HTML containers (ideally) fit nicely into one another.

Most of the time, these containers aren’t visible when a browser or email client is displaying the email. The contents of the containers are visible.

In code, to make the contents of the container look a certain way (font size, family and color), you format the container. The problem with this is that when you’re using a WYSIWYG, all you see is the contents because the containers are usually invisible. So if you select some text and click the “bold” button, the WYSIWYG has to guess which container you’re trying to format.

*sighs*

Because WYSIWYGs don’t show the containers that are being formatted only the contents, deleting content in WYSIWYGs, many times, leaves HTML “crumbs” behind. In other words, deleting content in WYSIWYG editors many times leaves empty, previously-used containers that may be formatted a certain way. With all of these invisible, empty, formatted containers lying around your email template, it’s only a matter of time until you place content into one of them without knowing and the format of your text is completely different.

Because of this reality, it’s important to use a fresh, empty template every time you send an email instead of taking a previously-sent email, deleting its contents and inputting new content. Templates provided with email programs are specifically designed to work with that particular program’s editor and quirks. So remember that when you upload or input a new branded template that you have created outside the program, it may not work as well as the templates that the email blaster automatically provides.

Common HTML Email Editor Problems:

Let’s look at some other common problems that people encounter when working in an WYSIWYG editor and why they’re happening:

• Tables and bulleted lists (sometimes known as “unordered lists” or UL) automatically changing the font family and font size

  This is because when you insert a table or bulleted list, you’re actually creating a new container. Depending on your editor, these containers may have specific formatting that is different from the rest of your email.

• Small images take forever to load when someone looks at the email

  When you upload a large photo (think high-res photos from a digital camera) and then resize them in the WYSIWYG, the email will actually load the big picture (and its huge size) inside the smaller frame that you set for it when someone looks at it. Best practice (and courtesy to your constituents) is to resize photos and images before uploading them into your email blaster.

• Copying from Microsoft Word or “Rich text”

  Whenever you’re working in code, whether it’s HTML or CSS or whatever, you don’t want to be copying from Microsoft Word or any other “Rich Text” editor. “Rich Text” as opposed to “Plain Text”. Rich Text allows you to format your text (bold, left align, font family) while Plain Text is just text. The extension for plain text files is .txt while Rich Text is .rtf and Microsoft Word is .doc.

  Any text editor that allows you to format text will insert its own invisible code around the text so that the computer knows that it should show it a certain way. When you copy this extra code and paste it into your HTML email editor, it can cause a slew of errors because the editor is expecting only HTML code not rich text or Microsoft Word code. Plain text doesn’t have any of this extra code. It’s simply text. Nothing more.

  Before you copy any text into your HTML editor, make sure you first paste it into a plain text editor and see if there’s any extra invisible code floating around. A plain text editor will only show text so you’ll immediately see anything that isn’t the text of your email. Remember that even if the code looks unformatted, it might still have rich text or Microsoft Word formatting code around it.

• Weird codes like &#8220; show up where there’s supposed to be a character

  

  Sometimes Rich Text or Microsoft Word will change certain characters to look more fancy. The most common two examples are quotation marks and ampersands. Some rich text editors will automatically change quotation marks to what are called “smart quotes”. Smart quotes curve depending on whether they are to the left or right of the text. These “smart quotes” replace the plain text ” with a bit of code to make them “smart” so that when you paste the code into HTML, they get pasted as a string of code instead of a quotation mark. This is a big deal because quotation marks are a critical piece of HTML code so that if they are switching to “smart” mode because of your editor, a whole host of things can go to hell because of it.

• My editor says my file is too big!

  Sometimes you may try to send your email and your editor says that your email file size is much too large. This can be caused by many things but one thing that happens often is that an email created in a WYSIWYG editor creates a new container for every new type of formatting. In regular non-WYSIWYG HTML editing, you can apply multiple formats to a single container.

  For instance, if you wanted to make a paragraph have orange, bolded, underlined and italic text that was 20pt in size you would format the paragraph container orange, bold, underline, italic and 20pt font. In WYSIWYGs, many times instead of formatting the same container in multiple ways, it creates a new container for each format. So in our orange text example, it would make a new container around the paragraph and style the new container with underline text and then enclose that container in another container and style it with orange text and then another enclosing those two styled as bold and so on. All this extra, unnecessary code means the file size of your email increases and looks more and more like spam or a virus.
  

Take-Aways

• Use a plain text editor (Notepad in Windows, TextEdit in Mac (make sure in the preferences that you’re editing in TXT and NOT RTF)
• Use a fresh template for every new email. Don’t copy a previously-sent email and delete its contents.
• Resize your images before you upload them

What are your experiences using WYSIWYGs for HTML Emails?