SharePoint 2010 YouTube & Google Maps Integration

It's been a while since my previous post. And in fact, this is just an extension to my previous post.

In my previous post I learned you how to integrate YouTube in SharePoint 2010 Blogs. Now I will teach you how you can use that script, though a bit tweaked, for YouTube and Google Maps integration anywhere on your site (ie. in Publishing Pages).

Go to SharePoint Designer 2010 and open your masterpage. Scroll completely to the bottom and add following pieces of Javascript below the -/body- tag.

try{
  //replace [youtube]url[/youtube] tags with corresponding HTML object
     if (document.getElementById("page_content").innerHTML.indexOf("[youtube]") > -1) {
         //find all [youtube][/youtube] tags
         var arr = document.getElementById("page_content").innerHTML.split("[youtube]");
         var tempSrc = document.getElementById("page_content").innerHTML;
 
         for (j = 0; j < arr.length; j++) {
             //get the url between the [youtube][/youtube] tags
             urltemp = arr[j].substring(0, arr[j].indexOf("[/youtube]"));
             if (urltemp == "") continue;
             
             //format the URL to the correct format to use with the object-element
             url = urltemp.replace(/<.*?>/g, '').replace("/watch?v=", "/embed/");
              
             //replace the [youtube][/youtube] tags with the corresponding object-element
             tempSrc = tempSrc.replace("[youtube]" + urltemp + "[/youtube]", "<iframe width='480' height='390' src='"+ url +"' frameborder='0' allowfullscreen></iframe>");
         }
                 
         document.getElementById("page_content").innerHTML = tempSrc;
     }
     
      //replace [googlemaps]url[/googlemaps] tags with corresponding HTML object
     if (document.getElementById("page_content").innerHTML.indexOf("[googlemaps]") > -1) {
         //find all [googlemaps][/googlemaps] tags
         var arr = document.getElementById("page_content").innerHTML.split("[googlemaps]");
         var tempSrc = document.getElementById("page_content").innerHTML;
 
         for (j = 0; j < arr.length; j++) {
             //get the url between the [googlemaps][/googlemaps] tags
             urltemp = arr[j].substring(0, arr[j].indexOf("[/googlemaps]"));
             if (urltemp == "") continue;
 
    url = urltemp.replace(/<.*?>/g, '');
 
             //replace the [googlemaps][/googlemaps] tags with the corresponding object-element
             tempSrc = tempSrc.replace("[googlemaps]" + urltemp + "[/googlemaps]", "<iframe width='480' height='375' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='" + url + "&output=embed'></iframe><br /><small><a href='" + url + "' style='color:#0000FF;text-align:left' target='_blank'>Grotere kaart weergeven</a></small>");
         }
                 
         document.getElementById("page_content").innerHTML = tempSrc;
     }
}
catch(err){}

What I basically do is look up the tags in a div called "page_content", which contains all of the page content, and replace the corresponding tags.

For YouTube you just copy paste the url between [youtube]http://www.youtube.com/watch?v=j3U7TAqbSds[/youtube] tags.



For Google Maps you use the url you find under the link. [googlemaps]http://maps.google.be/maps?q=gent&hl=nl&sll=50.503887,4.469936&sspn=4.772562,13.392334&t=h&z=12[/googlemaps]



I hope you can use this little piece of code in your SharePoint 2010 Blogs as well. I cannot guarantee this will work without any tweaking of the script. But it might push you in the right direction.



Enjoy!

SharePoint 2010 Blog and YouTube

Hi,

I've been struggling a while with the ability to show YouTube movies in a SharePoint 2010 blogpost.

A first glance at the problem seemed pretty easy, let's just copy the object/iframe code from YouTube and copy it in the RTE via the HTML Editor. Guess what? SharePoint just removes the tags. Great!

Since we already added a webpart to the blog that extends the posts with a FaceBook Like-button, I had the idea of just implementing something that would find a [youtube][/youtube] tag and replace it with its corresponding object. Hence, I couldn't find a way to make this work properly. Since the webpart is loaded on server-side, there wasn't a way to dynamically change the value of the text in the blogpost.



Think think think... Ping, JavaScript you genius!

Implement following piece of Javascript at the bottom of the masterpage, used in the blog, and you'll have exactly what you need. After some trial and error and, ofcourse, browserissues I got to the following script:

var objDivs = getElementsByPrefix("PostDateTopBox", document);

for (i = 0; i < objDivs.length; i++) {
    //replace [youtube]url[/youtube] tags with corresponding HTML object
    if (objDivs[i].parentNode.parentNode.innerHTML.indexOf("[youtube]") > -1) {
        //find all [youtube][/youtube] tags
        var arr = objDivs[i].parentNode.parentNode.innerHTML.split("[youtube]");
        var tempSrc = objDivs[i].parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML;

        for (j = 0; j < arr.length; j++) {
            //get the url between the [youtube][/youtube] tags
            urltemp = arr[j].substring(0, arr[j].indexOf("[/youtube]"));
            if (urltemp == "") continue;
            //format the URL to the correct format to use with the object-element
            url = urltemp.replace("/watch?v=", "/v/");
            if (url.indexOf("&") > -1) url = url.replace(url.substring(url.indexOf("&"), url.length), "");
            url += "?fs=1&amp;hl=nl_NL&amp;rel=0";

            //replace the [youtube][/youtube] tags with the corresponding object-element
            tempSrc = tempSrc.replace("[youtube]" + urltemp + "[/youtube]", "<object width='480' height='390'><param name='movie' value='" + url + "'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='" + url + "' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='480' height='390'></embed></object>");
        }
                
        //note the 5x .parentNode suddenly, this is for IE. in IE you cannot edit the innerHTML of a non-div element. So I went to search the nearest div-element.
        objDivs[i].parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML = tempSrc;
    }
}

function getElementsByPrefix(inPrefix, inRoot) {
    var elem_array = new Array;

    if (typeof inRoot.firstChild != 'undefined') {
        var elem = inRoot.firstChild;

        while (elem != null) {
            if (typeof elem.firstChild != 'undefined') {
                elem_array = elem_array.concat(getElementsByPrefix(inPrefix, elem));
            }

            if (typeof elem.id != 'undefined') {
                var reg = new RegExp('^' + inPrefix + '.*');
                if (elem.id.match(reg)) {
                    elem_array.push(elem);
                }
            }

            elem = elem.nextSibling;
        }
    }

    return elem_array;
}

This will give the following result.

The RTE:


Wherever you need it, just provide the tag: [youtube]url_of_movie[/youtube].
The url_of_movie is just copied from the browser.


The result in the actual blogpost:



I hope you can use this little piece of code in your SharePoint 2010 Blogs as well. I cannot guarantee this will work without any tweaking of the script. But it might push you in the right direction.



Enjoy!

Shirokan

Phew,

It really has been a long time since my latest activity on here.

Well, I admit I do not have that much to say right now. I'm busy, as usual.

But, I do published a new website today: http://www.shirokan.be
It is for the local Karate club, in which I'm a member ofcourse.



I built it completely with jQuery. To say the least, it was my first project I worked out with only jQuery! I must say, I fell in love with it. The ease of doing things, it just makes you melt.

To learn more about jQuery, I recommend you visiting http://jquery.com/.


Have fun!

Outlook 2010 - Christmas countdown

To all Outlook-users, there is a free add-in for Outlook available which counts down to Christmas time. You can download it for free here.


Ofcourse I tried it out. Looks nice, isn't it?
















There are some little features in it as well:

• Play some Christmas music!


• Send an e-mail to Santa!


• Plan your holiday events!


• Organize your shopping list!


• Create your Christmas card mailing list!

Well, just download it and have some fun. :)


Have a good day!

SPTechCon @ Boston

I attented SPTechCon at Boston previous week. SPTechCon is an event about SharePoint 2010. Time to write a blogpost about it.

First of all I'd like to thank the organisators of this event. It was organised at a very nice location, Hyatt Regency Hotel in Cambridge. To say the least, I enjoyed my first stay in Boston alot.

Second, this event has a few of the best speakers around SharePoint on the globe. I learned nice new stuff. Ofcourse such an event also covers topics which one already know, but then you just change to another room and you're set for some new intresting content.

Content varied from SharePoint Administration to configuring and even programming using the latest API's and functionalities available in SharePoint 2010.

The speakers I enjoyed the most were definitely Heather Solomon and Dustin Miller. I already attended a class of these 2 geniuses about SharePoint branding in May.


For more information, visit: http://www.sptechcon.com/

The next SPTechCon is scheduled feb. 7-9,2011 at San Francisco, I hope I can attend that one too. You should definitely consider it.

SharePoint 2010 in plain English

Since I'm working at Vortalities, I've been really into SharePoint 2010. Working all day with it, giving basic and advanced trainings on the topic, ... It just keeps me going. Combining the power of SharePoint 2010 with some very neat website template... It keeps a man dreaming.

But then again, when you go to a company to teach them about SharePoint in general, they have certain expectations. Going to the pub later that night and trying to explain the story of SharePoint to a couple of drunk friends, seems harder than anything.

I've found the perfect solution to that. SharePoint 2010 explained in 3 minutes... Make sure to check it out:

I've been putting this in my PowerPoint slide deck since a couple of days, and I must say it has some good reactions.

Thanks to the authors of this movie!

Webdesign

Having it running in the background, I recently decided to give webdesign a more important place in my life again. Recently, my fire has been lit again. Though, I cannot really give a reason for that. I guess just waking up with a nice idea makes a day.

The latest 3 projects I've been working at are:

Vortalities: http://www.vortalities.be

Personal site: http://www.laurentschoenaers.be

BizNext: http://www.biznext.be

The reason for this blog is also to keep track of my evolutions in webdesign. Lately, I've been really fascinated by HTML 5 and CSS 3. Combining this with a good portion of jQuery might just give Flash a different life, a meaningless life. Though, I'm still using Flash on my Personal website. But I'll be changing that soon.

I'll keep you posted about future projects.