So, I get an email from a client complaining that their phone icon is not appearing next to some phone numbers in SharePoint but is appearing for others, to which my immediate response was: “What phone icon?”
After some digging, it turns out that this client recently upgraded to Lync 2010 and one of the features in this version of Lync is “Phone Number Detection” that is implemented as an Add on to Internet Explorer. It merely scans the contents of each web page looking for any text that matches a known phone number format. If phone numbers are found, it then injects html into the already loaded html that will display a small phone icon next to the number. This added html also enables the ability to click on that icon and have Lync dial the number for you.
All in all, a pretty handy feature except if you are editing content in SharePoint. You see, Lync has no knowledge of “edit mode” of a SharePoint page so it can’t tell that you are editing content in the page and thus doesn’t know to leave the content alone. On the other side, SharePoint can’t tell the difference between a person editing the html of a page and Lync injecting its icon html into it. The net result is that Lync will embed the obnoxious code below in the content html for each and every phone number on a page.
<span class="baec5a81-e4d6-4674-97f3-e9220f0136c1" style="white-space: nowrap;">+1 123 456-7890 <a style="position: static !important; margin: 0px; width: 16px; bottom: 0px; display: inline; white-space: nowrap; float: none; height: 16px; vertical-align: middle; overflow: hidden; top: 0px; cursor: hand; right: 0px; left: 0px;" title="Call: +1 123 456-7890" href="#"><img style="position: static !important; margin: 0px; width: 16px; bottom: 0px; display: inline; white-space: nowrap; float: none; height: 16px; vertical-align: middle; overflow: hidden; top: 0px; cursor: hand; right: 0px; left: 0px;" title="Call: +1 123 456-7890" src="data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAIGNIUk0AAHol AACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAKLSURBVHjadJPfS5NhFMe/21xvuhXRyJAZroiSrJnbRdT7vrA f5HBaK5RABmEEwQIvkpZ/QRcWXdSFw5soKaF0F7qZeLO13mGBDpQsf5CoxVKHOt0Pctp2uvEdrzG/V+c553w/54HnPDIiQi GpPMETABoB2AAYd9MRAMMAvGmX+RcAyAoBVJ7gZQDtABworH4AHWmX+bOMZdkjCoXiUzabvcAwzPSsob5p/VTNY9Gcdpnxd mYZ9wJThSCtCr1e/4XjuNPd3d1KjUZzaGbI27ysqzGQoggAsLa1A7ehArrDxfDNr0oBlQB+wmKxbJFEL968SxoamsjkHaPU 9l9piUo6A0RE1DG2QCWdASrpDAzJM5kMI8XecdjVxfEl+K9dxFgsgUvvR6HyBKHyBAEATyKLeGSsENuNcqk5kUjEGm7fzcY qr0ClVODl99+YXEvl6+c1amjVe+ahiGGYaUEQKnmeh91uL43rqheixjpdmzCL11er0PcjhrTLvMfUJsyKYUSeyWQ6enp6tg CgrKxsfbP8bB8AdE1G89cOReMAgOv+Cag8QXRNRkXAsDwcDr+am5tLCYKA3t7eo2dG+1vVK/MfpRPtA+MIReMYaKj+/xm9M iICx3EmpVL5wefzFavValis1u1vvHMkdfykCQC0kSGUTo+Ajmnx1dSC7IGD+UUCEYGIwLKsyWazrSeTSSIiMpnNf7Ttz5+ec 96fr7/VnE0mk+QfHMzV3WjcKH/4rEr05QGFIA6HY4llWRLPRER+v3/HYrFMFQSIkNra2tVQKJSlfcSyLO0LECFWq3XF6XRGA 4HAptTsdrsXeZ6fEHtl+31nAOA4rkUulz/I5XL63dQGgHEAN8Ph8AYA/BsAt4ube4GblQIAAAAASUVORK5CYII=" alt="" /></a></span>
That’s quite a mouthful – and yes, that is an actual image embedded in that html and yes it embeds it for every phone number on the page! There is one more thing in the works here though – it seems that the Rich Text Editor that is used when editing a page field does not allow embedded images so when you attempt to save a page that Lync has injected you get the error below. Strangely, the Content Editor Web Part will allow this to be saved without batting an eye.
The above content cannot be saved because it includes one or more of the following types of unsupported formatting: font and size, headings, images, numbered and bulleted lists, tables and external URLs. Click Auto Correct on the toolbar to remove invalid content or formatting.
An option appears above the text with this error to autocorrect the problem. Doing so will remove the embedded image but will leave a lot of the other junk in place so it is best not to hit that unless you really enjoy hand-cleaning large blocks of html.
If you use SharePoint and Lync 2010 and have phone numbers on your pages, odds are good that you have that blob of html already embedded in your site in numerous places. An easy way to determine that is to navigate to a page that contains a phone number, edit it, then view the html. If you see the html above then it is there – happy housecleaning!
Fortunately, there is a an easy way to to avoid all of this. You only have to train all of your content editors to disable the Lync Automatic Phone Number Detection when they are editing any content. Easier said than done, I realize but Microsoft has made it pretty easy to do this without having to restart the browser!
To disable Automatic Phone Number Detection in Lync, either click on the Lync Icon on the Internet Explorer toolbar or select Tools – Lync Addon, check the “Disable Number Detection” option and then click OK.
The users only need to disable this option for the duration of the session where they are editing content and then only if that content contains a phone number.
One last thing – if you are looking for a way to disable Lync from processing a phone number, all you have to do is split the phone number across two html tags, as shown below. Lync will not see it as a phone number and will leave it alone. If that doesn’t work for you then try some of these alternatives.