Home > SharePoint Advancements > Dressing up SharePoint external Links

Dressing up SharePoint external Links

For those that are interested in dressing up your SharePoint external links on your pages can do so by using a little JQuery code along with the JQuery Library.

1.  First if you haven’t done so already go to http://jquery.com/ and download the latest version of the JQuery library
2,  Next do a google search for the Icon_External_Link.png.  I’ve included a link for it here: http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png
3.  Upload both the JQuery library and the Icon_External_Link.png onto SharePoint.  I uploaded the JQuery libary in a Documents library and the Icon_External_Link.png image into an Image library.
4.  Next on your SharePoint site, edit and add a Content Editor Webpart to your page.
5.  Edit the Source Editor and copy/paste the following JQuery code below into the source editor

<script src=”/Documents/jquery-1.3.2.min.js”></script>

<script>
$(function() {
     $(‘a’).filter(function() {
          return this.hostname && this.hostname !== location.hostname;
          }).after(“<img src=’/PublishingImages/Icon_External_Link.png’ alt=’External Site’ style=’margin-left: 3px;’>”).attr(‘target’,’_blank’);
});
</script>

6.  For the script and image src tags make sure you point those to where you uploaded your JQuery library and the Icon_External_Link.png image.
7.  Apply and save
8.  On your page you should now see the Icon_External_Link.png image next to all the external links that point outside of your SharePoint portal.

Advertisements
  1. Walter
    April 14, 2011 at 1:20 pm

    How do I limit this to a particular web part? As it is, it modifies every link in my header as well as the body of the page.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: