Microsoft

Blog Categories

Subscribe to RSS feed

Archives

Adding Flash Content to SharePoint 2010 / Office 365

SharePoint 2010′s rich text editors make it pretty easy to format text and insert media, but they also make it difficult to embed Flash content. In order to streamline the HTML generated by the Content Editor Web Part and other edit boxes, Microsoft decided to automatically remove non-essential tags. Any time we try to embed a Flash file or other add-in that uses an <OBJECT/> tag, SharePoint removes it upon being saved.
 
So how do we add Flash to a SharePoint page? The trick is to use the Content Editor Web Part’s “Content Link” functionality.
 
In SharePoint 2010, we can tell the Content Editor Web Part to show data from a file in one of our document libraries. That’s a nice feature because we can define HTML centrally and reference it in many places, allowing for changes to scale everywhere.
 
Best of all, files that we upload to a document library aren’t processed at all, so our <OBJECT/> tags won’t be escaped. The process of adding Flash to a SharePoint web part page then becomes easy:
  1. Create a minimal HTML file containing just your Flash reference. Make sure that the path to the SWF file reflects the document library where you’ll upload it to.For example:

     

    <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
    codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0
    width=”1024″ height=”768″>
    <param name=”movie” value=”/SiteName/DocumentLibraryName/FlashFileName.swf“/>
    <param name=”quality” value=”high”/>
    <embed src=”/SiteName/DocumentLibraryName/FlashFileName.swf” quality=”high”
    pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash”
    width=”1024″ height=”768″></embed></object>
  2. Upload this HTML file along with your SWF file to the document library corresponding to the bolded text in step 1.
  3. On the page where you want to add your Flash content, add a Content Editor Web Part. Click “Edit Web Part”. Under web part properties, enter the relative path to your HTML file in the “Content Link” property” and save.

Edit: As Ram Gopinathan pointed out on Twitter, there are many upsides to using the Content Link web part. Perhaps most importantly we can then version page content. One caution is that it adds an extra step to rendering your page.

Tags: , ,

Leave a Reply