Adding Javascript To An Office 365 Sharepoint 2013 Public Web Page

101613_2057_addingjavas1Adding javascript to a 2013 public site page isn’t as straightforward as it is in most properly designed content management systems. The choices presented by the page editor are the “embed code” tool, the “edit html source” tool and buried away under web parts – the script editor web part. As far as I can tell here’s how all 3 work:The Embed Code Tool:This is the strangest of the Microsoft script insertion concoctions – it detects if your insertion starts with a at the start of your code, but it makes more sense to avoid it and just use the script editor web part to begin with.
The Edit HTML Source Tool:
Detects script code and strips it out – so not much use at all in this context.
The Script Editor Web Part:
The best and only logically designed built in option because it accepts ANY code. Find it under web parts » media and content.
This is really a confusing way of doing things because the "embed code" tool isn't rationally designed and is a prominent button in the ribbon while the script editor web part is buried in the list of available web parts with no clear indication it's there. A better design would be to eliminate the redundant "embed code" tool and just have the script editor web part (which lets you add ANY code) available in the ribbon. There's no need for both.
The "Roll Your Own" Option For More Advanced Users
Another possibly more convenient way to add javascript, is to put the javascript in a text file saved to an anonymously accessible library and then insert it into the page with a content editor web part. Doing it this way, you can edit the code directly using Windows Explorer or Sharepoint Designer and not have to open the clunky page editor. This method also makes it easier to reuse scripts you want to deploy on multiple pages, like Adsense ads or other script widgets.
Steps:
1/. Paste your javascript into notepad - with script tags, so it looks like this example:


2/. Save as a .txt file and upload to the Site Assets library. Or even easier, create the file directly in Sharepoint Designer.
3/. Insert a content editor web part on your desired page. In the "content link" box, enter the url of your text file.

101613_2048_addingjavas1

5/. Save/publish the page and now your javascript should run.

Apply Sharepoint 2013 public site design to team site / web part pages

This technique covers restyling your internal, admin and public wiki/web part pages to look exactly like your public site. It involves either changing the master page selected pages use or creating a new css file and adding a link to it in a new master page. I’m going to use the css that styles the public site but the basic process can also be used to apply any design you dream up to your team site pages. Here’s an example – you can see from the url it’s a web part page in the site pages library: http://365new.webbrewers.com/Site%20Pages/Text%20filter.aspx
There are several benefits to doing this including:

Branding consistency between internal/external sites
Replacing the “vanilla” Sharepoint styling
Allows you to seamlessly integrate web part and wiki pages in your public site and take advantage of their additional features

101313_2228_applysharep1

Caution:

Due to a bug, it seems changing to a custom master page wreaks havoc on any Sharepoint store apps you have installed. You will have to remove the app and add it again to fix the problem, so if you have content you don’t want to lose – be warned!

Steps:

There are 2 ways to do this. One way is easier but involves UK web design companies and allows you to pick and choose which pages use the public site styling. The other way is more complex and will affect all your admin pages but all you need is notepad. The first option is the safer of the 2 because there may be some undesirable side effects to changing the admin master page. Whichever you choose, be aware that SP master pages are pretty unforgiving of errors so you should always start by making a copy of the default version!

Option 1:

Create a page in the Site Pages library. If there is no site pages library in your tenant, you’ll have to create one with all the desired page content types active.
Open the site in Sharepoint Designer.
Click “All Files” »” _catalogs” » “master page”.
Right click the master page used in the public site (Oslo etc) and click “set as custom master page”.

untitled

Navigate to the Site Pages library, right click any page and click “Edit in advanced mode”.

 

 

At the top of the code you’ll see the master page reference.
Change it from: <%@ Page language=”C#” MasterPageFile =”~masterurl/default.master”
To: <%@ Page language=”C#” MasterPageFile=”~masterurl/custom.master”

Now that page will start using the same master page (and therefore styling) as the public site pages.

Option 2:

Remember this will monkey with all your admin pages so if something breaks, see option 1!

Grab the files:

Go to site settings » look and feel » master page to identify which “system master page” you’re using
Web designer galleries » master page gallery – download a copy of that master page (Oslo, Seattle etc).
The css file used on the public site is not as easy to locate-
Option 1 (easy): open your public site and using the web developer add on in Firefox, go to the edit css tool, copy the contents of the css file that looks like “oslo-236877554-themedcss” and paste into notepad.
Option 2: look in the source code of a public site page for all the “link rel=”stylesheet” references. The file you want will be something like oslo-236A6B32.themedcss. So the full path would be /_catalogs/theme/Themed/3A9B902/oslo-236A6B32.themedcss. When you find it, click it, copy the code and paste into notepad.
Save the css in notepad as a .css file and upload to the master page gallery.

Adjust the master page:

SP is picky about how you add a link to a css file – so open the master page in a text editor and search for Right below that line add:

So the name part would reference the name o

101313_2228_applysharep2