Facebook with CRM 2011 OR Facebook Image on entity Form in CRM 2011

Ref: MSDN Blogs- ("http://blogs.msdn.com/b/crm/archive/2011/09/28/displaying-a-contact-s-facebook-picture-in-microsoft-dynamics-crm-2011.aspx")


Can you imagine that your contact form is displayed with contact's Facebook image? Well, lets bring this imagination into reality.


Samples:

The interesting thing is that it could be done using simple javascript code. So lets kick off.


Consider the Contact entity. Now the idea is that on the contact form we are going to place a default image. And if the contact could provide the Facebook ID, then it would be replaced by the real profile picture from Facebook.


The default image could be something like this ( Eg: Dimension of 109x108 pixels). And this is saved as a webresource.

Lets have a look at the form design.
As you all know, we need a place holder for the image. And this could be a web resource. Thanks to CRM 2011 !
Lets place a new web resource on the form.

We could choose the default image which we already uploaded to web resources.

Also lets have a quick look at the Formatting tab of Webresource properties. Certainly, you could play around further for the best display results.

Also there would be one custom attribute on the form namely ' Facebook ID' to supply the Facebook ID from the User. Here is the form Design

In our case,
Facebook ID could be supplied in 2 formats
1. As a string ID. For instance, datong, d.manjaly etc
2. As a numeric ID. For instance, 100003583160143
The javascript code will pull the profile picture using the Facebook ID.
As you all know, the javascript code should be saved as webresource and should be triggered at the Form Load event as shown below.

Javascript Code:

function profilePicture_onFormLoad() {
 var profilePictureElement = Xrm.Page.getControl("WebResource_myphoto");
    var facebookAttribute = Xrm.Page.getAttribute("ap_facebookid");
   if (facebookAttribute && facebookAttribute.getValue() != null ) {
        var profileUrl = "http://www.facebook.com/"+facebookAttribute.getValue();
        if (profileUrl) {
            var profilePictureUrl = getProfilePictureUrl(profileUrl);
            if (profilePictureUrl) {
                // set src attribute of default profile picture web resource.
                profilePictureElement.setSrc(profilePictureUrl);
                return;
            }
        }
  }
}


function getProfilePictureUrl(profileUrl) {
    // trim trailing forward slash in url
    profileUrl = profileUrl.replace(/\/*$/, "");


    var patterns = [];
    // Format is http://www.facebook.com/userid
    patterns[0] = /^http:\/\/www\.facebook\.com\/([a-zA-Z0-9\.]+?)$/;
    // Format is  http://www.facebook.com/profile.php?id=987654321
    patterns[1] = /^http:\/\/www\.facebook\.com\/profile\.php\?id=(\d+?)$/;


    for (i in patterns) {
        var matches = patterns[i].exec(profileUrl);
        if (matches) {
            return "http://graph.facebook.com/" + matches[1] + "/picture?type=normal";
        }
    }
    return null;
}



Here we go....
A new contact form would have the default image on it

The new image would be displayed as soon as the user key in the Facebook ID and save the form.  (Refer the samples given at the beginning)