This page contains an EyeRollerWEB widget that loads its content from several image files and a from a document embedded in your page that defines the properties of the face.
This approach can be used with any host or blog, even when the single jfa file approach is unfeasible. Since it is a bit more difficult to implement, the single jfa file approach is preferred when possible. The rest of this page will assume that you are on a blog such as blogger.com that forces you to use only this approach.

You can get all the files that make up this example from this archive.

Take a look at the page HTML source to see the implementation details and continue reading for an explanation.
You can also take a look at this step-by-step video
sample video

 

 

 

Extract all the files from the .jfa face: to do this rename the .jfa file to .zip and extract the files as you normally do with any .zip archive (you should get 4 images called something like face.jpg, mask.png, pupil.png, pupil2.png and a text file called properties.xml)
Then you have to upload the images somewhere: you can use any image hosting service that supports direct linking to your images such as tinypic.com. Take note of the URLs of the images you just uploaded.
Open the properties.xml file with a text only editor (such as Notepad), and immediately after the <face> element paste the following code

 <back>urlToTheFaceFile</back>
 <mask>urlToTheMaskFile</mask>
 <eye1>urlToTheFirstEyeFile</eye1>
 <eye2>urlToTheSecondEyeFile</eye2>

and replace urlToTheFaceFile etc. with the URLs of the uploaded images.
Copy all the text of the modified file and paste it inside the following code, replacing [CONTENT OF THE MODIFIED properties.xml FILE].

<div id="eyerollerFaceProperties" style="visibility:hidden">
<!--
 [CONTENT OF THE MODIFIED properties.xml FILE]
-->
</div>