Brand SharePoint “The Right Way” – Integrate Web Parts into Master Pages (Part 4)


You may also be interested in: SharePoint Solutions In-A-Box from Alcero


 

Editor’s note: Contributor Christian Merat is a .NET architect and developer at GSoft Group. Follow him @cmerat

2012-05-09-BrandingSPTheRightWay-Intro-01.jpgWeb parts are an integral part of any SharePoint site. Most users are used to adding a web part to a site page using a web part zone and configuring it using the browser. Web parts are powerful pieces of software that can often bring complex and advanced behavior to your SharePoint site. As such, it is important to consider web parts when branding a site. There are numerous 3rd party web parts available (both free and purchased) that can add significant functionality to your branding with little time invested on your part.

It would not occur to most power users that web parts can also be added to a Master page, and while this behavior is not available in the SharePoint UI, it can easily be accomplished using SharePoint Designer. In this article, I’ll walk you through the steps to setup Twitter feed web parts into your Master page.

The solution

The web part in question was developed for the Iron SharePoint competition held at the SharePoint Summit in Toronto in May (you can read a wrap-up of the entire event by my team leader or an article by Susan Hanley describing the event). I packaged the web part into a Sandboxed solution WSP (available here: here, source code here: here) that you can easily deploy on your SharePoint server. Please note that this requires the Sandboxed Solution service to be activated on your Farm (available in “Central Administration -> System Settings -> Service Applications -> Servers -> Manage services on server”, make sure the “Microsoft SharePoint Foundation Sandboxed Code Service” is started). If you are using Office 365, the service is already enabled. Additionally, please note that you must be Site Collection administrator in order to install and activate solution packages.

2012-06-12-BrandingSPTheRightWay-Part04-01.png

The first step is to upload the WSP to the Solutions Gallery in your Site Settings and “Activate” it:

2012-06-12-BrandingSPTheRightWay-Part04-02.png

Once this is done, we’re going to add the web part under the QuickLaunch on the site. Using SharePoint designer, create a copy of the “v4.master” Master page by opening the “Master Pages” site object and Copy/Pasting it. Rename it to “twitter_test.master” or something more to your liking, then set it as the default Master page.

2012-06-12-BrandingSPTheRightWay-Part04-03.png

Right-click on the “twitter_test.master” file and select “Edit file in advanced mode”. This opens up the markup editor. If the editor isn’t already in “Code” view, select it on the bottom left side of the editor window. Since the default width for the QuickLaunch is 155 pixels, that’s not wide enough for the Twitter feed. Increase it to 250 pixels by adding custom CSS before the end of the </head> element.

2012-06-12-BrandingSPTheRightWay-Part04-04.png

Search for “PlaceHolderQuickLaunchBottom” which will position the cursor at the placeholder at the bottom of the QuickLaunch (containing the Recycle Bin). Position the cursor after the closing </asp:ContentPlaceHolder>, select the “Insert” tab on the ribbon, expand the Web Part dropdown and select “TwitterFeed” from the “IronSP” category.

2012-06-12-BrandingSPTheRightWay-Part04-05.png

Switch to Split view and make sure that your cursor is within the SPUserCodeWebPart element that was just inserted. On the ribbon, there will be a new contextual menu called “Web Part Tools”. Select this tab and click the “Properties” button.

2012-06-12-BrandingSPTheRightWay-Part04-06.png

Expand the “Twitter Control Settings” category and enter the desired parameters. The “Search Criteria” property is what you want to display in the feed (it will search Twitter for that value), the “Title” is the small title at the top and the “Subject” is the larger text right under that, above the theme. You can also expand the other sections to specify the look and feel of the Twitter feed (colors, scrolling, interval, etc).

2012-06-12-BrandingSPTheRightWay-Part04-07.png

Once the configuration is complete, click “OK” and save the master page. Now open your site using your favorite browser and you should see a Twitter feed on the left sidebar, right under the Quick Launch.

2012-06-12-BrandingSPTheRightWay-Part04-08.png

It’s easy to integrate custom Web Parts into your branding solution. This can lead to a significantly improved user experience by integrating advanced features and functionality from Web Parts into your site branding.