FANDOM


File:Tell a friend screenshot2.png

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 Edit

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.

File:Tell a friend screenshot.png

Main features Edit

  • 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 Edit

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 Edit

  • 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.

Implementing the widget: Step-by-step Edit

Get the last version Edit

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. Edit

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 Edit

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 Edit

  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:

<?xml version="1.0" ?> 

<sim>
  <widget id="2"> 
      <head text="Greenpeace em Lisboa!"/>
          <copy>
	      <text>Acção terminou, mas tu ainda podes ajudar</text>
	      <text>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á.</text>
	      <text>FOTOGRAFIAS</text>
	      <text>Ajuda os activistas da Greenpeace!</text>

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

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

              <text>Continuar</text>

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

              <text>Coloca um e-mail válido</text>
             <text>OS OCEANOS PRECISAM DE TI!</text>

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

             

	  </copy> 
           <copy>

	      <text>Continua, ajuda-nos a pendurar o banner</text>
              <text>Estás a ir muito bem</text>

              <text>Vamos começar de novo?</text>
              <text>Obrigado.</text>

              <text> MUITO OBRIGADO PELA TUA AJUDA</text>

	  </copy>           
  </widget> 
 </sim>

Prepare the photos and publish the slideshow Edit

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:

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

How to use video instead of photos Edit

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 Edit

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 Edit

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

<?xml version="1.0" encoding="ISO-8859-1"?>
<videos>
<video url="http://www.greenpeace.org/assets/flashes/action/fight.flv"/>
</videos>

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

<param name="movie" value="http://www.greenpeace.org/raw/content/assets/flashes/action/reclimbingwithfriends.swf" />

to

<param name="movie" value="http://www.greenpeace.org/raw/content/assets/flashes/action/reclimbingwithfriends_video.swf" />

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 Edit

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 Edit

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" ?> 
<config>
	<link>http://www.greenpeace.org/portugal/footer/jm</link>
	<link>http://www.greenpeace.org/portugal/</link>
</config>

Publish it in a Greenpeace website Edit

Main HTML Edit

Use a similar html code to publish:

        <!-- BEGIN TELL A FRIEND -->
        <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" />
        </object>
		<!-- END TELL A FRIEND -->

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

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 Edit

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:

File:Planet Includelets screenshot.png

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

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

Customizing the mail message Edit

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.

File:Planet Send To Friend screenshot.png

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)

File:Gmail screenshot.png

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 <head> 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 Edit

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 Edit

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.

Notes Edit

Please e-mail osvaldo.gago@greenpeace.org if you have questions that you would like to be answered in a future release of this instructions or to report errors.

If you modify the tool adding new features, fixing bugs or changing considerably it's design or purpose, please share the modified copy with all the other NRO's. E-mail osvaldo.gago@greenpeace.org and ask for a login to subversion.

As for updates on the instructions, feel free to edit this page.To talk about this widget use the talk page