Embed into SharePoint: Part 1: SlideShare


Last week I wrote a post about using the content editor web part and embedding external content into your site.  You can read the post here Embed YouTube and other code into SharePoint 2010.

I thought I would be a good idea to show a few others examples of what you can embed. In the original post we looked at YouTube so in this post we are going to look at SlideShare.

When you upload a PowerPoint or PDF presentation to slide share you can decide whether you would like to publish it to the outside world.  By doing this users can then embed slides into any of their websites


Copy the embed content and paste it into a new text file.

When we follow the steps in the original post we can then see our presentation in our SharePoint environment.


Content Editor WebPart: Twitter


I don't know about anywhere else in the world but Twitter seems to be going through the roof here in the UK.  You go on the radio and someone is talking about twitter or they are getting comments from it, TV shows are talking about, newspapers etc.

I've been using twitter since about July 08 and have found it a great way to communicate but since Christmas I have been on it a lot more as more people join. http://www.twitter.com/alex_pearce

I'm not going to claim any of this work but you can see how to add Twitter through you content editor webpart over at a post by the guys at End User SharePoint



Content Editor WebPart: Popfly/Mashup


Microsoft Popfly is a great way to create a mashup – taking a source of information and publishing it in a great graphical view.


As an example here I have taken my favourite football team(soccer for you Americans ;-), Aston Villa, searched Live Images and  published all the images it finds into a page turner.  There are some many different blocks you can use now in Popfly – you should really give it a go if you haven’t already.

So here are the blocks for the Aston Villa Page Turner


When we’ve saved that, we can run and see how it looks as a mashup


So how do we get this onto our SharePoint page.  Well its easy as the others really.  As per YouTube and SlideShare, Popfly gives you the embed code to add to any kind of website.

Click on Share at the top and you can see other sites you can publish it to like your Space and Bebo.  Click on Embed and you can copy the code


Here is the code for the Aston Villa Page Turner

<iframe style='width:500px; height:375px;' 
frameborder='no' allowtransparency='true'></iframe>

.csharpcode, .csharpcode pre


font-size: small;

color: black;

font-family: consolas, "Courier New", courier, monospace;

background-color: #ffffff;

/*white-space: pre;*/


.csharpcode pre { margin: 0em; }

.csharpcode .rem { color: #008000; }

.csharpcode .kwrd { color: #0000ff; }

.csharpcode .str { color: #006080; }

.csharpcode .op { color: #0000c0; }

.csharpcode .preproc { color: #cc6633; }

.csharpcode .asp { background-color: #ffff00; }

.csharpcode .html { color: #800000; }

.csharpcode .attr { color: #ff0000; }

.csharpcode .alt


background-color: #f4f4f4;

width: 100%;

margin: 0em;


.csharpcode .lnum { color: #606060; }

So we copy the code and place it in the Content Editor Web Part in the Source section


And we then have our Popfly mashup in our SharePoint site


Content Editor Web Part: Slideshare.net


I got introduced to slideshare.net this week which is a great way of sharing your presentation with the world.


You can upload your presentation and make the available only to yourself through your login or through the public domain.  When you’ve uploaded your presentation you can view your slides in the same size as a YouTube video but you have the option of making it full screen.  You don’t get any kind of animation, all you get are still frames of the slide.  This could be a great way to keep a back up of your slides online and also sharing them with the general public.

Getting your slideshare presentation in SharePoint is the same process getting a YouTube video.

The same as YouTube on the right of the page on Slideshare you will see embed with code next to it.  Copy this code



   1: <div style="width:425px;text-align:left" id="__ss_213894"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" href="http://www.slideshare.net/srinatha/technical-overview-of-microsoft-office-sharepoint-server-2007?type=powerpoint" title="Technical Overview of Microsoft Office Sharepoint Server 2007">Technical Overview of Microsoft Office Sharepoint Server 2007</a><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slideshare.net/swf/ssplayer2.swf?doc=technical-overview-of-microsoft-office-sharepoint-server-2007-119883874577421-2&stripped_title=technical-overview-of-microsoft-office-sharepoint-server-2007" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=technical-overview-of-microsoft-office-sharepoint-server-2007-119883874577421-2&stripped_title=technical-overview-of-microsoft-office-sharepoint-server-2007" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object><div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;">View SlideShare <a style="text-decoration:underline;" href="http://www.slideshare.net/srinatha/technical-overview-of-microsoft-office-sharepoint-server-2007?type=powerpoint" title="View Technical Overview of Microsoft Office Sharepoint Server 2007 on SlideShare">presentation</a> or <a style="text-decoration:underline;" href="http://www.slideshare.net/upload?type=powerpoint">Upload</a> your own. (tags: <a style="text-decoration:u
nderline;" href="http://slideshare.net/tag/sharepoint">sharepoint</a> <a style="text-decoration:underline;" href="http://slideshare.net/tag/ovrview">ovrview</a>)</div></div>

We are going to paste this code into the Source Editor with in the Content Editor Web Part.

Open your SharePoint site and add a Content Editor Web Part to your page

When you’ve loaded the web part properties click on Source Editor.

Paste the code into this box.


Now click on OK and Ok again and you will see your slides on your SharePoint site.



Content Editor WebPart: Flash


In part 2 of Using the Content Editor WebPart I want to talk about how you can integrate a Flash file into your site.

We’ve all seen flash before and we all know that you can create some great animations.  If you look around the internet many websites use flash for animations.

Some companies such as the BBC and SkySport have streamed videos through flash and YouTube using flash videos to stream their videos.

Many sites that have banner advertising, also user adverts that are now in SWF/flash format.

So lets add a flash file (.swf) to run on the front page of our SharePoint Site.

We first need to upload the swf file into a document library.

Create yourself a document library.  You might want to tell the document library to be hidden from the Quick Launch bar down the left hand side so visitors/members of your site can’t easily find the library.

Go to Site ActionCreate and under Libraries click on Document Library.

Give your Document Library a name.  I’m going to call mine SWF.  Under Navigation, click No which will hide the library from the left hand side navigation.


I’m now going to upload my SWF file into the library and anything else that might be required for the flash file to run.


At this point we need to find out the URL of the SWF file as we need it later.

Right click on your flash file.  You will see your standard Internet Explorer properties and we need to copy the URL.  Click on Copy Shortcut and it will add the URL to your clipboard.  Paste this into Notepad or Word for reference later on.


We now need to add the Content Editor Web Part to our site.

Go back to the top of your Site and click on Site Actions, Edit Page and then Add a Web Part.

Find the Content Editor Web Part and add it to your site.

Click Edit on the webpart and then into Modify Shared Web Part.

Click on Source Editor and paste the following code

<embed src = "http://www.website.com/site/SWF/flash.swf" width = "500" height = "375"></embed>

If we have a quick look at the code here you will see three main areas.

Src = the URL of the flash file
Width = the width of your flash file
Height = the height of your flash file

We now need to add the code to the content editor web part.


Before we click save and finish we need to tell the code where to pull the SWF file from.

We copied it earlier, so we’ll now paste the URL of the SWF file in the code after src =.

Click Save and you’ll have your flash running in the page.



Content Editor WebPart: YouTube


In my first post of the series I want to looking at getting YouTube videos embedded into a site.

Many schools look at YouTube and see a website that is full of violence and inappropriate videos but when you search for some of these key words nothing comes up.

We look at YouTube and see a vast number of videos that can help students in their understanding of the subject.

So how do we get these into out SharePoint site?

There are many different ways to download videos from YouTube, convert them and then upload them to play in your site but there is a very simply way of adding them.

Go and find your video on YouTube.

If the user has allowed it you will see an embedded section down the right hand side.  You will then see some code down just below it.  Copy this text.


So now you should have something like this ready to paste into your SharePoint site

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/QeoKQbT8BKs&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/QeoKQbT8BKs&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

Open your SharePoint site and add a Content Editor Web Part to your page

When you’ve loaded the web part properties click on Source Editor.

Paste the code into this box.


Now click on OK and Ok again and you will see your video on your SharePoint site.


You now have your video in your sharepoint site