We will continue to work on customizing the WebCards system to work within a Facebook iframe which is only 510 px wide.

If you have clicked on one of the thumbnails on the front page of the system, you will be taken to the form that collects the sender/receiver information. Notice that we only see the large image or swf on the page. The rest of the page goes beyond our 510 px and the form disappears. We have two options for fixing this problem.

Option 1
Our first option is to change the preview of the ecard from the full size to the thumbnail, giving us more room for the form to be displayed. However, this will prevent the user from viewing the full size swf animation or image until after they have filled in the form and clicked the Preview button at the bottom of the page. If you prefer to let the user preview the animation or image before submitting the form, you will want to use Option 2 in the next tutorial.

For Option 1, we need to change a few lines of code in the index.html file. First we will add a few more variable names to the SELECT code that collects the data from our database. The variables will be the thumb and thumb_type variables. Then we will replace the variable names in a few if statements to work with the thumbnail variables instead of the image variables.

webcards/index.html

line 1360 - grab the thumbnail information from the database

if (!$DB->query("SELECT id, cost, name, url, thumb, img_type, thumb_type, width, height, keywords, freetext FROM " . $conf['dbprefix'] . "images WHERE id=\"" . escape_string($selected_pic_id) . "\" AND slug=\"" . escape_string($selected_pic_name) . "\" LIMIT 1"))

line 1372, 1374 and 1376

if($row['thumb_type'] == "free_text")
{
$dsp_image .= stripslashes($row['thumb']);
}
elseif(substr($row['thumb'], "-3") == "swf")

line 1388, 1390, 1392 and 1394

if($row['thumb_width'] != "" && $row['thumb_width'] != "0")
{
$width = "width=\"" . $row['thumb_width'] . "\" ";
}
if($row['thumb_height'] != "" && $row['thumb_height'] != "0")
{
$height = "height=\"" . $row['thumb_height'] . "\" ";
}

line 1399, 1401 and 1405

if($row['thumb_type'] == "upload")
{
$dsp_image = str_replace("{{img}}", $conf['url'] . "images/" . $row['thumb_url'], $dsp_image);
}
else
{
$dsp_image = str_replace("{{img}}", $row['thumb'], $dsp_image);
}

After saving our changes, we can refresh the webpage and see that with the thumbnail at the left, the form is back on the page.

http://www.mywebcards.net


WebCards screenshots used by permission.