Create your own SharePoint “Quote of the Day” Web Part using the CEWP – No Coding required

Posted by on Oct 6, 2009 in SharePoint 2007

This question pops up every now and then and that is, how do I create a “quote of the day” web part to place on the front page of my SharePoint Intranet Portal.  Quite easily is my response and in today’s post I will demonstrate how you can utilise the Content Editor Web Part (CEWP) to easily achieve this.  As way of background, the CEWP is an out of the box SharePoint web part allowing you to add formatted text, tables, hyperlinks and images to a Web Part page.  In addition to the above, the CEWP also allows you to add HTML content which we will utilise in the below example to create our quote of the day web part.   The end product will look similar to the below screen capture;

Capture1 thumb Create your own SharePoint Quote of the Day Web Part using the CEWP   No Coding required sharepoint 2007

You can add the CEWP to any Web Part zone but in most instances your “quote of the day” web part will reside on the portal’s front page visible to all users.

I will begin my navigating to Site Actions / Edit Page and click on Add a Web Part on the desired zone on your web part page.

Capture2 thumb Create your own SharePoint Quote of the Day Web Part using the CEWP   No Coding required sharepoint 2007

The Add Web Parts dialog window will then open and I will scroll down and select the “Content Editor Web Part” located under the Miscellaneous section.

Capture3 thumb Create your own SharePoint Quote of the Day Web Part using the CEWP   No Coding required sharepoint 2007

Click Add.  The Content Editor Web Part will now appear in the web part zone as per the below screen capture.

Capture4 thumb Create your own SharePoint Quote of the Day Web Part using the CEWP   No Coding required sharepoint 2007

We will now click on “open the tool pane” which will open the modify web part window.

Capture5 thumb Create your own SharePoint Quote of the Day Web Part using the CEWP   No Coding required sharepoint 2007

I am utilising a 3rd party service from “Brainy Quote” which will provide us with a direct feed into their quotes which will update automatically on a daily basis.  Copy the below code into the Content Editor Web Part “Source Editor” as per the below screen capture.  More information and advanced instructions on customising the text can be found here.

<script type="text/javascript" sc="http://www.brainyquote.com/link/quotebr.js"></script>

Capture6 thumb Create your own SharePoint Quote of the Day Web Part using the CEWP   No Coding required sharepoint 2007

After adding the code, click OK.  I will now proceed and make some cosmetic changes to the Content Editor Web Part, such as changing the Title and Chrome Type as per the below screen capture.  Note that I have specifically specified a Chrome Type of None as the Title is already included as part of the javascript provided by brainy quote.

Capture7 thumb Create your own SharePoint Quote of the Day Web Part using the CEWP   No Coding required sharepoint 2007

After making the changes, I will click Apply and OK.  The Quote of the day by default will look like the below;

Capture8 thumb Create your own SharePoint Quote of the Day Web Part using the CEWP   No Coding required sharepoint 2007

However, because we are utilising the Content Editor Web Part, we can spruce it up a little by adding an image beside our text using code similar to the below.  In the below example I am inserting an image called quote.png which I have sourced from the world wide web.

<P><IMG style="BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid" border=0 align=left src="/PublishingImages/quote.png"></P><SCRIPT type=text/javascript src="http://www.brainyquote.com/link/quotebr.js"></SCRIPT>

The end result will look as follows;

Capture1 thumb1 Create your own SharePoint Quote of the Day Web Part using the CEWP   No Coding required sharepoint 2007

As you can see, we have easily utilised the Content Editor Web Part to insert html code which pulls information from a 3rd party quoting service in a matter of minutes.  I have been using brainy quote on our SharePoint Intranet Portal for over 12 months without any hiccups and the quotes which are updated daily are enjoyed by all.

If you have come across other methods or services for creating your Quote of the Day web part please let me know using the comments below.

  • SuperDale

    Great article…is there a way I can pull quotes from a SP List?

  • RR

    Have you tried this with SharePoint 2010? After refreshing source is being removed, what I receive is src=”about:blank”… Any idea how to solve that one?

  • Emily

    Hi RR, I’m wondering if you were ever able to do this?