In this recipe, we will be looking at the most simplistic way to bring Facebook information into your CRM. We are doing this exclusively on the client side, thus adding no additional load on server resource. For this reason, the client machine will need to have internet access, and the access to Facebook should not be blocked by the corporate firewall.
We will be taking advantage of the Facebook Badge feature. If you go to http://www.facebook.com/badges/, you will find the available badge options. For this example, I will focus on using the Profile badge. We will capture the contact information as it relates to Facebook from the system user, and we will display a Profile badge on the Contact form.
You will need access to a Dynamics CRM 2011 instance. In addition, you will need the system customizer or system administrator permissions.
If you do not have a solution package already created, you should create one for this chapter.
You can use either a CRM Online instance or an On-Premise deployment for this solution. If you are using On-Premise, make sure that the user machines have direct access to the internet, and that the Facebook site is not being blocked or filtered by the corporate firewall.
Also, if you are accessing the corporate CRM instance through a VPN connection and if the connection drops your internet connection while the VPN is active, then this recipe will not work. Please work with the network infrastructure team supporting your final production deployment to make sure this is a supported scenario.
In order to add a Profile badge on the Contact entity, perform the following steps:
- Open any existing solution you might have, or create a new one.
- Add the Contact entity to your solution.
- Add a new web resource of type JScript. Name it
FacebookScript(new_facebookscript). - Add the following function to this resource:
function getFacebookBadge() { var _fbURL = Xrm.Page.getAttribute("new_facebookurl").getValue(); if(_fbURL != null && _fbURL != "") { var _fbuser = _fbURL.substring(_fbURL.indexOf("facebook.com/") + 13); $("#new_facebookurl_d").append("<a href='"+_fbURL+"' target='_blank'><img src='http://graph.facebook.com/"+_fbuser+"/picture?type=normal'/></a>"); } } - Save and Close this web resource.
- Add a new web resource of type JScript. Name it
jQueryand load the latest jQuery library available at http://jquery.com/. - Save and Close this web resource.
- Open the Contact main form for editing.
- In Form Properties add the
jQueryresource to the Form Libraries. - Click on OK to close Form Properties.
- Add a new section to your form. Label it
Facebook Badgeand check the Show the label of this section on the Form and Show a line at top of the section checkboxes. - On the Formatting tab, set the properties to Two Columns. You will want to adjust this based on the size of the badge created.
- Click on OK to close the Section Properties.
- In this section add a new Single Line of Text field. Set its format to URL and name it
Facebook URL(new_facebookurl). - Add the field to the form and in the Formatting tab set the layout to Two Columns.
- Click on OK to close the Field Properties window.
- Add your function to the
OnChangeevent of the new_facebookurl field. - Also add your function to the form's
OnLoadevent. - Save and Close the form.
- Publish your solution.
- In order to test this customization, open an existing contact or add a new one.
- Retrieve the URL of the contact's profile from Facebook. This URL is in the
http://www.facebook.com/usernameformat. - Put this URL in the new_facebookurl field. Once you tab out of the field, the script will execute and will bring the contact's image over.
- This method works with both Contacts and Accounts. The standard URL used for both is of the same format.
This integration method brings over the profile picture of the contact or account, as presented and maintained on Facebook by the owner. While for companies (accounts), it's almost guaranteed to get a logo or a relevant image, when using this approach with contacts be aware that since Facebook is not really a professional network, some images retrieved might not present the person in a professional way.
In addition to retrieving the logo image of a contact or account, using the Graph API you can retrieve additional information. For details on using the Graph API, see the Facebook Developers documentation at http://developers.facebook.com/docs/reference/api/.
- jQuery library and documentation at http://jquery.com/.