Adam Brill

Adobe

Each social network site is different, enforcing a different set of rules for posting content to their site and sometimes offering a choice in the location on their site where content can be posted. This article outlines a few essentials that will help you ensure your content can be posted to the sites you target.

Requirements

In order to make the most of this article, you need Adobe Flash CS4 Professional and the Distribution Service Extension for Adobe Flash CS4 Professional.

Flash CS4 Professional

• Try
• Buy

Distribution service extension for Flash CS4

• Download

Prerequisite knowledge

Basic familiarity with Flash and HTML is recommended. Readers should also be comfortable with using Social Networking sites.

Best Practices

Technical best practices can vary by social site. Incorporating all of these guidelines will help ensure that your application achieves the widest possible distribution and can be successfully embedded on the most popular social network destinations.

This section provides specific guidance regarding the dimensions of your application, a few general Embed Code guidelines, and a table listing general Social Network Capabilities.

Social Network Maximum Widths

Most social network sites have maximum widths for the content that can be posted to their site. In order to gain the broadest possible distribution, we recommend a width of 350 pixels. This width will enable your application to be viewed properly across all of the Social Networks.

Another possibility, if you wish to optimize the application size for one or more sites, is to create several instances of your application each of different size. The Share menu can be configured to post site-specific versions of your application to specific sites. For instance, you might have one version of your application that is 350 pixels wide for distribution to most sites, and a second that is 490 pixels wide for sites that accept wider content. When the end-user elects to share your application to Bebo, the narrower version would be copied, when they elect to share to Facebook, the wider version would be copied.

Here’s how to configure this option:

1. With the Share Panel open in Flash Professional, navigate to the "Optional Config" tab.
2. Click on "Advanced" in the button bar.
3. There is a dropdown box here that allows you to add a variety of extra configuration options to your Share menu. The options of the form <network-name>Content can be used for sending an application to specific Social Destinations. For this example select facebookContent.
4. In the adjacent text box, enter the embed code for the content that you would like to appear on Facebook.
5. Test your movie (Control > Test Movie). If you are using one of the include templates, hit the "Share" button then in the loaded Share menu, click on the Facebook icon. You should see the custom content that you defined above.

The following table lists the maximum application widths for most Social Network sites:

Social Network	Max Width	Variable	Theme Dependent
Bebo	350
BlackPlanet	420
Blogger	410		yes
Facebook	580
Freewebs	510		yes
Friendster	510	yes
Hi5	450
iGoogle	400	yes
Live Spaces	350
LiveJournal		yes
MiGente	420
Multiply	620
MySpace	420		yes
MyYearbook	490
Netvibes	410	yes
Orkut	660
Piczo		yes
Pageflakes	410	yes
Tagged	470
TypePad	630		yes
Vox	480
WordPress	No limit, scales to 450px		yes

Variable means: The site will resize the column width based on the browser window size.

Theme Dependent means: the maximum width for content posted to these sites is dependent upon the visual or layout theme the user has selected. You should review the documentation available on these sites for more information.

Also note that sites such as MySpace, Friendster, Orkut, and LiveSpaces which disable JavaScript access will prevent linking out from Flash applications. Either of the following workarounds can be used to work around this issue:

1. Include an html link above or below the embed code for your application.
2. Add a copy & paste box to your application where a user can grab the URL and paste it into their browser.

Embed Code Guidelines

The Distribution Service Extension will automatically generate an html embed code for you. Some people choose to edit this automatically generated embed code to fit their specifc needs. If all of the necessary paramters are not included in the embed code though, your application might not be properly shared. Editing or removing some of these parameters(e.g., the flashVar "crtr=1") will also prohibit your application from participating in the promotion and monetization services altogether. The following is a template for what a properly formed embed code should look like. If you have edited your embed code and find that it is not functioning as you think it should, you might compare your embed code against the sample below, then review the additional guidelines.

<img src="http://counters.gigya.com/wildfire/pimp.ashx?name=WBP&m=0&g=0&p={PARTNER_ID}&d={CONFIG_ID}&l={RANDOM}&pt={TIME}" />
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version={FP_VERSION}" WIDTH="{WIDTH}" HEIGHT="{HEIGHT}" id="{TITLE}">
    <PARAM NAME="movie" VALUE="{SWF_NAME}{URL_PARAMS}" />
    <PARAM NAME="quality" VALUE="high" />
    <PARAM NAME="bgcolor" VALUE="{BG_COLOR}" />
    <PARAM NAME="flashVars" value="crtr=1&{FLASHVARS}" />
<EMBED src="{SWF_NAME}{URL_PARAMS}" quality="high" bgcolor="{BG_COLOR}" WIDTH="{WIDTH}" HEIGHT="{HEIGHT}" NAME="{TITLE}" flashVars=" crtr=1{FLASHVARS}" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="/go/getflashplayer"></EMBED>
</OBJECT>
Additional Guidelines

• We recommend you avoid including <Javascript> and <iframe> tags in your embed code. For security reasons, most social network sites will block or strip out <Javascript> and <iframe> code when it is posted to a user’s profile. The preferred type of embed code for Flash-based applications will use either HTML <object> and/or <embed> tags.

• Make sure there is the classid attribute in the <object> tag. Without it Internet Explorer on PCs may display a security warning message in certain situations. Make sure the codebase attribute is there as well. The object tag should look something like this:

  <object
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
  ...> ... </object>
          

• The allowScriptAccess attribute should be set to "always", i.e.:

  <object
  ...>  
     
  <param name="allowScriptAccess" value="always"
  />  
      
  ...   
     
  <embed ... allowScriptAccess="always"></embed>  
  </object>

• The allowNetworking attribute should be set to "all", i.e.:

  <object
  ...>  
     
  <param name="allowNetworking" value="all"
  />   
     
  ...   
     
  <embed ... allowNetworking ="all"></embed>  
  </object> 
          

• The <embed> tag should use a closing </embed> tag instead of the abbreviated <embed ... /> form. This is for LiveJournal and Blogger.

Social Network Capabilities

Some networks do not allow certain tags (such as <script> or <style> tags) in the embed code. Some networks do not support certain Flash abilities. The following table summarizes the capabilities of the Social Networks supported by the Distribution service. You may use this information in a couple of different ways:

• Remove the destinations that do not have the required support from the Share Menu, or make several instances of your application, each using different technologies.

To remove destinations:

1. With the Share Panel open in Flash Professional, navigate to the "Edit Theme" tab.
2. Click on "Destinations" in the button bar.
3. Uncheck the checkbox next to any destinations that you do not wish to appear in the Share menu.
4. Test your movie (Control > Test Movie). You should not see icons for any of the Social Networks that were removed in step 3.

To make several instances of your content, each using different technologies:

1. Use the method outlines above in "Social Network Maximum Widths"

Social Network	<html>	<script>	<style>	<embed>	<iframe>	Full Screen	Flash Scale	Communication between JavaScript and Flash
MySpace			yes	yes			yes
Facebook	yes			yes			yes
Friendster	yes			yes		yes	yes
Orkut	yes			yes			yes
Tagged	yes			Black list		yes	yes
Bebo	yes	yes			yes
WordPress	yes	yes				yes		yes
Blogger	yes	yes		yes	yes	yes		yes
Hi5	yes		yes	White list		yes	yes
Piczo	yes	yes	yes	yes	yes	yes		yes
Freewebs	yes	yes		yes	yes	yes	yes
LiveJournal	yes			yes		yes	yes
BlackPlanet	yes			yes	yes	yes	yes
MyYearbook	yes		yes	yes	yes	yes	yes	yes
TypePad	yes	yes	yes	yes	yes	yes		yes
Xanga	yes		yes	yes		yes	yes
Multiply	yes			yes		yes
iGoogle	yes	yes	yes	yes	yes	yes	yes	yes
Netvibes	yes	yes	yes	yes	yes	yes	yes	yes
Pageflakes	yes	yes	yes		yes	yes	yes	yes
Vox	yes		yes			yes	yes
Yahoo!		yes	yes		yes	yes	yes
Eons	yes	yes	yes		yes	yes		yes

Whitelisting (Hi5 and Friendster)

Some social networks require that applications be whitelisted, otherwise their embed code will be stripped out when posted. Currently the following Social Networks require whitelisting: Friendster and Hi5.

To add you application to the Friendster whitelist, send an email to the following addresses:

• Help & Support: help@friendster.com
• Developer's Program:widgets@friendster.com

The email should include the following content: the domain where the application is being hosted, a link to a webpage where the application can be viewed, and your contact info.

To add your application to the Hi5 whitelist, you will have to follow the procedure outlined on their developer site: http://www.hi5networks.com/developer/whitelist.html. In addition, send an email to api-request@hi5.com including the following content: the domain where the application is being hosted and your contact info.

Managing Where Content Is Posted on Select Sites

Many of the social networks that are supported by the Distribution service allow the end user to post content in a variety of different locations. For instance, Tagged allows users to post content to either the "aboutme" or "mywall" sections; Facebook restricts users to posting content to the MyStuff section and automatically writes an update to the user’s News Feed.

For sites that offer posting to more than one section, you can restrict the list of sections displayed in the sections' selection dropdown by:

1. With the Share Panel open in Flash Professional, navigate to the "Optional Config" tab.
2. Click on "Advanced" in the button bar.
3. There is a dropdown box here that allows you to add a variety of extra configuration options to your Share menu. The options of the form <network-name>Sections can be used to restrict which areas of the social network site are shown. For this example select friendsterSections.
4. In the adjacent text box, enter "About,Media" (from the table below) and click out of the box to update the component on the stage.
5. Test your movie (Control > Test Movie). If you are using one of the include templates, hit the "Share" button then in the loaded Share menu, click on the Friendster icon. Notice that in the "Section" drop down only "Media" and "About Me" are shown.

The following table lists the sections available for different social networks supported by the Distribution service.

If a network is restricted to use a single section then that section is used but the section selection dropdown is not displayed.

Social Network	Available Sections
Friendster	ProfileLayout, Media, About, Meet
Tagged	aboutme, mywall
Hi5	About, Interests, FavoriteMusic, FavoriteTVShows, FavoriteMovies, FavoriteBooks, FavoriteQuote
BlackPlanet	PersonalMessage, Blog
Migente	PersonalMessage, Blog
Ameba	BlogSidebar, Profile

About the author