Tell a friend



You can see a working version of the tool in this page:

http://www.greenpeace.org/portugal/participa/protesto-jeronimo-martins-2-julho

Purpose of the tool
The tell a friend widget was designed to help our cyberactivists to spread the word about Greenpeace non-violent direct actions.

When a cyberactivist visits a the page with the widget, can see a message asking him to help the activists by spreading the word about the action. While the cyberactivist inserts the name and e-mail of up to 5 of his/her friends, the banner starts to descend.

You can test it here:

http://www.greenpeace.org/portugal/participa/protesto-jeronimo-martins-2-julho

Before you start implementing the widget you should have a visual idea about the action so you can define the design and interactive elements of the widget. To maximize impact, the public should see immediately a relation between the online cyberaction and the offline action.

The widget was designed to promote climbing actions. On the 2nd of June 2009 the tool was used for the first time to promote an action in Portugal. The background photo in the widget is the photo of the building where the direct action took place, and the banner has the same logo and text.

The widget was made to be easily updated during and after the action.



Main features

 * Displays a slideshow or a video to inform cyberactivists and visitors about the action
 * Small lead text and link to a web page or web-story about the action
 * Each cyberactivist can send the message to up to 5 persons
 * Customized “thank you” message with photo or text

How to install and customize
Please read this instructions carefully before you start implementing the widget in your Greenpeace website.

Required know-how:


 * Edit xml files
 * Publish content using Planet 2
 * Basic photo editing (resizing/cropping)

To change the scenario image (the building image in the example above) and to position the climbers you should have average knowledge of flash. However this task can be done a few days before the action, so you can ask a colleague (flash designer) or outsource it.

(For now this instructions will not explain how to edit the flash file, but you are free to contribute by adding a section to this manual).

Requirements before installing

 * The widget has to be published in the Greenpeace.org domain, using Planet 2 as a CMS.
 * You should have a desktop program to crop and resize images. If you don't have Photoshop, you can use a free replacement. You should have also a text editor program to edit the xml files.
 * The design of the tool and interaction has to be modified by someone capable of editing flash files.

Get the last version
If you are installing a new tool for a new action, please make sure you have the last version. Some bugs might be fixed and it can have new features. You should use subversion to download. Downloading each file directly is not recommended.

svn checkout http://code.ciberactivistas.org/tellafriend/ tellafriend

If you have a username in the project, use this command instead. You can ask a username e-mailing osvaldo.gago@greenpeace.org

svn checkout http://code.ciberactivistas.org/tellafriend/ tellafriend --username yourlogin

Select Video or Gallery for your widget.
The fla file had two folders, one called video and the other one called gallery. The gallery folder is visible and functional by default. The video folder is invisible and the layer inside is turned into a guide layer.
 * If you want to use images instead of video, refer to the section "Prepare the photos and publish the slideshow" that explains how to do so.


 * If you want to use video instead of images, open the gallery folder and right click on the only layer inside. Turn the layer into a guide and then make it invisible. Open the video folder and right click on the only layer that is inside. Uncheck the guide option and made the layer visible. Refer to the section "How to use video instead of photos" that explains how to add your videos.

Modify the background image, adjust the climbers position to your action and change the banner text and design
Modifying the background image, banner and climbers has to be made by editing the flash reclimbingwithfriends.fla file. Please consult with your flash designer about this step.

Customize the text and the thank you image

 * 1) Decide the text you want. You can see an example in the Portuguese Greenpeace website.
 * 2) Edit the the text.xml file with a code text editor.(Notepad++, Smultron, Gedit). First don't forget to set the preferences of your text editor to edit and save using utf-8 encoding  or the non-english characters will not display properly.

The file where you can define the text looks like this:



 Acção terminou, mas tu ainda podes ajudar Greenpeace exige que o grupo adopte de imediato uma postura responsável em relação ao peixe que vende. Supermercados Pingo Doce e Feira Nova devem agir já. FOTOGRAFIAS Ajuda os activistas da Greenpeace!

Tu podes ajudar a fazer a diferença. Clica aqui para ajudar. Anterior Seguinte Jerónimo Martins destrói os oceanos Mais informação

Divulga a acção a 5 dos teus amigos e ajuda a pendurar o banner. Em apenas alguns minutos podes ajudar a campanha. Tu: Nome: Email:

Continuar

Teu amigo/a Quanto mais pessoas souberem da acção...              ...maior será a sua eficácia. Enviar

Coloca um e-mail válido OS OCEANOS PRECISAM DE TI!

images/image_lastframe.jpg O teu nome, por favor Caro/a amigo/a

Continua, ajuda-nos a pendurar o banner Estás a ir muito bem

Vamos começar de novo? Obrigado.

MUITO OBRIGADO PELA TUA AJUDA

Prepare the photos and publish the slideshow
Selecting and resizing – Images should have 320 X 240 pixels each and should be in jpeg format with a compression that's not too heavy for the web, but that ensure some quality.

Uploading – If you use Planet you should upload all images as assets inside the “folder” used for images inside the folder used for that action. For example:

http://www.greenpeace.org/assets/flashes/action/images

Declare the images in the xml file – The images on the front widget have to be declared in the photo.xml file. For example:

 http://www.greenpeace.org/assets/flashes/action/images/image01.jpg http://www.greenpeace.org/assets/flashes/action/images/image02.jpg http://www.greenpeace.org/assets/flashes/action/images/image03.jpg http://www.greenpeace.org/assets/flashes/action/images/image04.jpg 

How to use video instead of photos
Before you proceed, make sure that you have completed all steps in the section "Select Gallery or Video for your widget"

Creating an .flv video file
The widget can publish videos in .flv format. Your video department should be able to provide you with a .flv file. The image size of the video must be 320 x 240.

Note on how to convert from a .mov to a .flv file:

If the video department can't help, the easiest way is to use a video service like blip.tv. Other ways include using a free command line conversion tool, if you know how to use it. For example with ffmpeg you can convert from .mov to .flv. Ffmpeg is a free program for Windows, Mac (trough MacPorts) and Linux (install using your distro package manager).

ffmpeg -i original.mov -ar 22050 -ab 32 -f flv -s 320x240 -sameq destination.flv

Ffmpeg is more difficult to use than uploading to blip.tv, but it can be faster to convert, as you don't have to upload a large .mov file and wait for blip.tv to convert. Practice the whole process successfully with a placeholder video a few days before the action. Check if the file size of the flv file is not too large and if the video has enough quality.

Upload and publish
Next you have to upload the video as an asset into the widget folder and declare it's location on the videos.xml file:

 

Finally you have to modify the html on the page to display the correct .swf file. On the example, we would change from:



to



and from

src="http://www.greenpeace.org/raw/content/assets/flashes/action/reclimbingwithfriends.swf"

to src="http://www.greenpeace.org/raw/content/assets/flashes/action/reclimbingwithfriends_video.swf"

See the section "Publish it in a Greenpeace website" for more informations on how to publish the flash tool on a page.

The file structure
All files have to be on greenpeace.org domain. If they are in a sub-domain like static.greenpeace.org, the tool will not send e-mails. All files have to be on a URL “tree”, like the example bellow, where everything is inside the “action” folder.

Example of a file structure:

(As you see all the files are contained in the action “folder”)

http://www.greenpeace.org/assets/flashes/action http://www.greenpeace.org/assets/flashes/action/reclimbingwithfriends http://www.greenpeace.org/assets/flashes/action/reclimbingwithfriends_video http://www.greenpeace.org/assets/flashes/action/videos http://www.greenpeace.org/assets/flashes/action/text http://www.greenpeace.org/assets/flashes/action/photo http://www.greenpeace.org/assets/flashes/action/logic http://www.greenoeace.org/assets/flashes/action/fight http://www.greenpeace.org/assets/flashes/action/images http://www.greenpeace.org/assets/flashes/action/images/image01 http://www.greenpeace.org/assets/flashes/action/images/image02 http://www.greenpeace.org/assets/flashes/action/images/image03 http://www.greenpeace.org/assets/flashes/action/images/image04 http://www.greenpeace.org/assets/flashes/action/images/image05 http://www.greenpeace.org/assets/flashes/action/images/image_lastframe

As in Planet 2 you can't create folders in the assets area, some files exist just look like folders, they don't have any role in the widget. You can use placeholders in this files. In the example this files are:

http://www.greenpeace.org/assets/flashes/action http://www.greenpeace.org/assets/flashes/action/images

Other configurations: Logic.xml
The logic.xml file defines: (1) the url where the post request will be sent to send the e-mails and (2) the link of the “read more” bellow the intro text, where usually you put the web story.

<?xml version="1.0" ?> http://www.greenpeace.org/portugal/footer/jm http://www.greenpeace.org/portugal/

Main HTML
Use a similar html code to publish:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="580" height="438"> <param name="movie" value="http://www.greenpeace.org/raw/content/assets/flashes/action/reclimbingwithfriends.swf" /> <param value="http://www.greenpeace.org/raw/content/assets/flashes/action/" name="base" /> <param name="allowScriptAccess" value="always" /> <embed type="application/x-shockwave-flash" src="http://www.greenpeace.org/raw/content/assets/flashes/action/reclimbingwithfriends.swf" base="http://www.greenpeace.org/raw/content/assets/flashes/action/" allowscriptaccess="always" width="580" height="438" pluginspage="http://www.macromedia.com/go/getflashplayer" />

Don't forget to change the values for the “movie”, “base” and “scr” atributes in both and.

Check the vídeo section on this document for instructions on how to publish video.

You can get a copy of the above html in the publish.html file in the folder.

Additional CSS and HTML Layouts
You will need a 580 pixels wide column, if you use the 3 column layout by default, you have to make some changes.

To do this you have to do in Planet:


 * 1) Go to the edit page where you are going to place the widget
 * 2) Select the “No right sidebar” layout in Planet
 * 3) In the head add two Content Item Includelets. The first one with Item ID 1837811 and the second one with the Item ID 1297733.

Result:



If you want to remove the breadcumb from the page, add the following CSS:

/* Remove the breadcumb */ display: none; }
 * 1) Breadcrumb, .PageHeader {

Customizing the mail message
Cyberactivists can't customize the message to be sent to their friends. The webbie has to write and layout a message that can fit all situations and that considers legal requirements in your country. It's fair that the person that receives a message knows that the decision to send was from a friend, but the text in the message was written by Greenpeace.  Important: The title of your page (that sends the e-mails) will be the subject line for all the e-mails that are sent. Please customize it to fit your message.

Next you should put your text to be sent in the “Email body for 'Send to a Friend' “ box in Planet.

Important: Don't forget to follow the Planet instructions:

''Use plain text or HTML. %sender_name% and %item_url% will be replaced with appropriate information. If %item_url% is not present then the default message will be used.''

You can use the tags %sender_name% and %item_url% inside a text or a html message.



If you want to send an html e-mail don't forget to test it with the main mail clients. (I.e Gmail, Thunderbird, Apple Mail, Outlook, Yahoo webmail, Hotmail webmail).

All messages are sent with the name of the cyberactivist that sent, and with our e-mail and message. Look at the gmail example (Sent trough the widget from opgago@yahoo.com to pablo@ccloule.com)



If you are sending an html e-mail you can create Google Analytics campaign links to measure the effectiveness of your tool. Check Google Analytics help pages for more information.

Important note:

Planet doesn't allow the home page “send to a friend” text to be customized. If you want to put the home page as destination url you have to create a html redirect from a page you create just for this purpose. Too see an example please look at the Portuguese page in:

http://www.greenpeace.org/portugal/footer/jm

Put this line of code in the section of the page that will receive the post request and replace the URL by the address of your widget.

<meta http-equiv="refresh" content="0;URL=http://www.greenpeace.org/portugal/" />

Browser testing
Make sure you test the application in the layout with different browsers a few days before the action. At least test with Internet Explorer 6, 7 and 8, and the last versions of Firefox and Safari.

Remember that you have to clear the browser cache between every test and that Planet's Akamai cache may also be showing an old version of the tool.

Changes during and after the action
By changing the xml files you can easily change the content during and after the action, however beware with cache problems. Changes may not be visible immediately. Both Planet and Flash have a cache systems. If you make all the changes in the xml files: text.xml and photo.xml or if you use video text.xml and videos.xml.

In the Portuguese action on the 2nd of July, before the photos were signed off by the photo editor, we have used placeholder text (inside an image) saying. “Images arriving at any moment”. After the photos were approved to publish we switched from the placeholder text to the images. Later we added more images to the slideshow. '''