Office 365 Public Site Video Pop Ups

The problem.
090413_0203_office365pu1You’d expect the “embed code” tool to allow you to add a simple javascript pop up code to a public site page so you can have a video or other content pop up on demand. But it doesn’t and should really be renamed the “embed some code” tool. Anything other than the simplest html gets filtered out so javascripts won’t execute.
The obvious answer is to wrap the javascript in

/form> …. code here….. form>

tags which disables the filters that strip code. This effectively “closes” the opening page form tag and defeats whatever MSFT has added to eliminate certain code tags – but it only works in competent browsers like Firefox. Unfortunately people still use IE and if you do use that method, you’ll find that IE drops the last
tag which breaks the whole page.
Because I like finding ways to do things MSFT says I can’t, I fiddled with this and found an (admittedly) clumsy workaround. Basically you put the video embed code in one file, call that file with the javascript code in another file and then iframe that file on your page…..like this:
Paste your video embed code in notepad, save as an aspx file and upload to the site assets library (or create the file directly in Sharepoint Designer).
Paste the javascript pop up code calling the first aspx file in notepad and upload that aspx file to site assets.
Insert an embed code snippet on your public page iframing the 2nd aspx file
When the link is clicked, the javascript executes and opens up the first file containing the video in a pop up. The script is enclosed in an iframe so is unaffected by the MSFT page filters that would normally strip it out.
The code.
Aspx file 1: embed code from video source
Aspx file 2: Javascript pop up code
a href=” YOURFILE1URLHERE “>Click here to see video /a>
Embed code on page:
The result.
Try this example page in Firefox or IE to see it in action.

Questions?

Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!

Adding Custom Styling To The Office 365 Sharepoint 2013 Public Website

071213_2035_addingcusto1 A few people have asked me recently why custom code added to the stylesheet in the public site editor isn’t working. For example, when they add code to make the logo bigger, nothing happens.If you look at the stylesheet you’ll see that MSFT has added “commenting tags” (/*) to the examples they provide. The purpose of those tags is to show notes or other information that browsers will ignore. They are helpful to developers for example to remind them what a piece of code is supposed to do.That’s all well and good, but the problem here is if users follow the examples given , their code is going to be “commented out” and won’t get rendered.
Here’s a code snippet example:
/* SITE TITLE
.ms-core-pageTitle a{
color:white;
font-size:40px;
font-family:Tahoma;
}
Browsers will ignore anything after the /* and I guess MSFT assumes users know that. The examples SHOULD be ignored but doing it this way seems to be causing confusion.
The bottom line is DON’T paste your code after a /* tag. In fact I’d delete everything in the stylesheet before adding your code. That way you can be sure whatever you add will get rendered by a browser. Or at least, add your code AT THE VERY TOP OF THE STYLESHEET!!

Get More Web Parts For The Office 365 Sharepoint Online Public Site

It’s great that you can add web parts to the public site – but in one of those pointless moves seemingly designed to needlessly frustrate users – MSFT decided to limit the web parts made available. So here’s how to overcome that restriction. I’ve used this technique to add a lot of different web parts to the public site – in this example I’m going to use the “Picture Library Slideshow Web Part” which was suggested by markgi_MSFT in the 365 forum.Export the web part.First you have to locate the web part. It’s probably going to be in your team site web part library:
Click the “cog” in the top right corner and navigate to Site settings»Web designer galleries»Web parts.
Locate MSPictureLibrarySlideshow.webpart and click it to download.
TIP: If you can’t find it, you can download it here: https://wb2-web.sharepoint.com/Docs/MSPictureLibrarySlideshow.webpart
Import the web part.
In another brilliant move, MSFT hid the public site web part gallery, so you’ll have to enter this url to open it: yourpublicsitedomain.com/_catalogs/wp/Forms/AllItems.aspx. Import the web part by navigating to where you saved it.
Now it should be available to add to a public page. Here’s an example:
http://365new.webbrewers.com/Pages/Slideshow-web-part.aspx Here’s how it should look:

062113_0205_getmorewebp1

Download Web Parts Here!
There are 72 web parts in a 2010 Enterprise account. If you can’t find a web part in your Small Business team site, open up a trial Enterprise account and you’ll find all 72!. You can drag and drop all of them over to your public site if you open the public and team site web part galleries in either windows explorer or Sharepoint Designer. Or you can download a couple of popular ones here:
Chart Web Part | RSS Feed Viewer Web Part
Picture Library Slideshow | Content Query Web Part

Add a WORKING Paypal button to a 2013 365 public site

101313_1928_addaworking1It’s well known that Paypal buttons don’t work on 2013 public sites. A basic html rule doesn’t allow forms to be nested so you can’t add the required PP form tag within the aspnetForm page tag. If you wrap the PP code in
/form> …. your code here…. form>

tags they will work in Firefox/Chrome but not in IE.Oy vay! So here’s yet another “no code” workaround or 2 to compensate for the sloppy coding behind the public site editor.
Method 1: Buy Now Buttons.
If you only need a Buy Now (or simple Add To Cart) button you can use the email link Paypal provides.
Create your button at Paypal
In the last step, click the email tab and copy the link
Add some text or an image to a site page. You can grab the Paypal image url from another button.
Highlight the text/image and insert a link
Select “from address” and paste in the PP link copied earlier.
There’s an example at the top of this page »

Method 2: Add To Cart And Buttons With Options

First, paste your Paypal code into notepad (as many button codes as you need).
Save the file as an .aspx file
Upload it to the SITE ASSETS library in the public site (TIP:or create file directly in Sharepoint Designer).
Insert a Page Viewer web part on your page
Open the page viewer’s web part properties
Enter the url of your uploaded file as the target link

101313_1928_addaworking2The page viewer web part includes a space for the title even if you leave the title box blank. If you want to eliminate the “gap”, simply open the web part properties box and select “none” under appearance » chrome type.
You can see examples of this procedure here »
Why do I have to use a page viewer web part?
The page viewer wp iframes the paypal aspx “page” on your public site page. The iframe isolates the paypal code from the form tags that wrap all content on the public site page and allows it to work correctly.
Questions?
This issue existed in Office Live Small Business and it’s bizarre that such a simple thing to fix hasn’t been addressed in O365. I can’t explain that, but if you have any questions about this workaround, please ask them in my forum ». For development work, you can contact me here ». Click a social button up top to share this post if you found it useful!

Change logo size – Office 365 Sharepoint 2013 public site

Your logo represents your brand and is arguably the most important single element on your site. Most competent web site platforms recognize that and provide tools to ensure your logo looks as good as it can. Because Office 365 isn’t really designed with public sites in mind, it only gives you one sizing option. If your logo doesn’t fit, there’s no editing tool to change that. To resize your logo – or any image – normally you could just add some custom css to the image. The containing element should then expand to accommodate the image. Due to poor coding practices in 365 though, only the width can be changed this way. MSFT has restricted the height of the containing element which may throw off your logo’s proportions.To override that , use the”min-height” attribute in your css (add this to your custom stylesheet – changing the dimensions to suit):.ms-siteicon-img, #DeltaSiteLogo{width:200px;min-height:150px !important}
OR try:
.ms-siteicon-img{min-height:150px} /*the logo image*/
div#siteIcon{height:150px !important}/*the containing element*/
The latter will also make the header area larger and resposition the tilte and nav, which may not be desirable. If so, try this:
.ms-siteicon-img{min-height:150px;z-index:100;position:relative;top:-50px !important}
That will enlarge the logo AND keep it layered above the header without repositioning the title/nav elements.

If the width is an issue try “min-width” too. This works in all browsers that support the min- attribute (so won’t work in IE6 and IE7)

Questions?

Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!

Change your public site’s home page (2010/2013)

For some unknown reason, the ability to change a Sharepoint site’s home page is available in the site settings for team sites (Look and feel»Welcome), but hidden forpublic sites. If you don’t want to fire up Sharepoint Designer to do it, here’s an easier way using the ui:Appendthis to your public site’s domain:
2010:/_layouts/AreaWelcomePage.aspx
2013:/_layouts/15/AreaWelcomePage.aspx
So, in my case it would be:
365.webbrewers.com/_layouts/AreaWelcomePage.aspx

Once there, simply change the url to your desired page.

This seems to work for both 2010 and 2013 Small Business and Enterprise accounts.

UPDATE:Hmmm, it seems this has now been changed and both Ent and Sm Bus public site settings now include the ability to change the “Welcome” (ie home) page. Go to site settings»Look and feel»Welcome page.

Edit An Office 365 Sharepoint Online 2013 Public Site Master Page: Change The Favicon

060813_1920_edita2013pu1Here’s one way to change the favicon for your 2013 public site by editing a master page. The same technique can also be used to edit other elements.Create A Favicon.
First upload a favicon image to an anonymously accessible library (the 2010 image lib or 2013 site assets lib should work).
A favicon can be any image but should be square: 16 x 16 or 32 x 32 would be ideal. It should also be saved as favicon.ico – rename it if you use a jpg or png.
TIP: Some browsers (notably IE) may not show the image if it isn’t converted to an ico file at a site like: http://www.favicon.cc/

Adjust the Master Page.

Open the public site’s settings: domain.com/_layouts/15/settings.aspx
Download the desired master page from web designer galleries»master page and page layouts

060813_1934_edita2013pu2

 

 

RENAME the file to say”oslo1.master” (important!)
Open it in notepad or other text editor and change the image url in this line to your favicon’s url – it’s somewhere around line 21 in the Oslo master page: SharePoint:SPShortcutIcon runat=”server” IconUrl=”domain.com/siteimages/favicon.ico”

060813_1946_edita2013pu3

 

Deploy The Master Page.

Upload it back to the gallery and publish it
In settings go to Look and feel»master page
Select your new master from the 2 drop downs.

060813_1935_edita2013pu4

Using Sharepoint Designer
If you’re comfortable with SPD, you can avoid the download routine and edit the html master page directly. Just open the site in SPd and go to all files » catalogs » master pages and look for the correct html master to edit.

An example of the effect can be seen here: http://365new.webbrewers.com/

Questions?
Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!

Use separate sub domains (or domains) for BOTH your 365 public sites!

When your 2010 Office 365 account is converted to 2013, you end up with 2 public web sites. Officially, you can only assign a personal domain to one of the sites but in reality it’s quite easy with an Enterprise account to use a different personal domain for each site. I specifically cover adding sub domains here, but the same process applies to domains with a few adjustments.As noted, this only works with Enterprise accounts and would be different – if even possible at all – for a P account. For small business accounts the workaround would be to url forward one of the domains to the least important site.”Look Ma, 2 web sites with 2 separate domains!”

062213_0249_useseparate1

To see what I mean click here:http://365.webbrewers.com/Pages/webbrewerstest2.aspx
For a 2013 site see: http://365new.webbrewers.com
Both sites are in the same 365 account, but use different sub domains.

Instructions – set up in Sharepoint
If the parent domain is already verified, a sub domain will automatically verify. To verify a new sub domain, in 365 go to: Admin»Domains»Add a domain.
Step 1:
Enter your full sub domain (eg 365.domain.com)
Get the TXT record
Enter it at your domain host in the dns zone record section
Wait a few minutes and then click”Verify”
NOTE:If you have 2 public sites, apparently you have to enter the prefix for the sub domain as the host for the 2nd site, not the normal @ symbol.

Step2:
Once it’s verified, add any users you need

Step 3:
Select”Sharepoint” as the domain intent.

Go to the Sharepoint admin center, select the desired site and choose the sub domain from the drop down. When I did that I got a strange “Deleted” note by the default site name, but nothing was deleted and the site still worked under either the sub domain or the original default domain. MSFT couldn’t tell me what the “deleted” referred to!

Instructions – connect your domain
Next, you’ll point the sub domain at your 365 public site by adding an A record at your domain host.

Open a cmd screen and type in”ping your365domain-web.sharepoint.com” (without the quote marks and use the default domain, normally domain-web.sharepoint.com for 2010 sites, domain-public.sharepoint.com for 2013 sites).
Copy or note the ip address – it will be something like 157.55.62.110.
Go back to your domain host’s dns zone record application.
Add an A record and enter the sub part of the sub domain as the host and the ip address as the target. For a domain, use @ in the host field.:
HOST POINTS TO TTL
365 157.55.62.110 600 seconds (or 1 hr etc) For sub domains
@ 157.55.62.110 600 seconds (or 1 hr etc) For domains

Save the zone file and within 15 minutes or so, your site should start coming up under the sub domain.
Example:http://365.webbrewers.com
Why does MSFT tell me to use a CNAME instead of an A Record?
MSFT’s instructions tell you to use a CNAME entry with the host set at “www”. A CNAME is like an alias, so requests for www.domain.com are going to be sent to the server hosting domain.com to look for a site called “www.domain.com”. That works if you only want the site to be found with a www request, or if all your sites are on the same host. If you use an A record, the request will be sent to whatever server the ip address entered represents. In other words, your site will be found with or without the www and you can use your domain with a site hosted in one place, and sub domains with your O365 site or vice versa. In my case, webbrewers.com is a WordPress site hosted outside of 365, and the 2 sub domains point to the 2 365 public sites.
Personally, I think it’s a better arrangement.

Create a custom form on your Office 365 2010/2013 public site

Allowing your site visitors to leave feedback, register for an event or interact in other ways via forms is an essential component of any web site. This was easy in OLSB but unfortunately the Sharepoint form building and data capture features have been removed from the Office 365 public web site offering. There are many 3rd party options available to embed a form but the closest equivalent to a Sharepoint form is probably Google Docs because it offers a very simple and effective way to capture visitor submissions in a convenient spreadsheet in the same way SP populates a list.If you want to see if this fits your needs, click here to see a working example.1: Create the form
First, in your Google Docs account click “Create new” – “Form”

365forms1

Configure your questions. You can choose from a variety of field formats including multiple choice and checkbox.

365forms2

This will create a corresponding spreadsheet with each question forming the column header.
Go to the list of your docs and open the form you created which will open the spreadsheet version
Click”Share” up top and change the settings to “Public on the web”

365forms4

Under “Form”, click “Embed form in a web page”
Copy the code.

365forms5

2: Embed on a page
2010 style site: Paste the copied code into an html module on your O365 public site page. If you find Google’s code and the html module don’t mesh well together and throw errors like “url not found” or “this content can’t be shown in an iframe”, click here to use our generator which will configure the code for you.
2013 style site: Either insert a “page viewer web part” and enter JUST THE FORM URL. Or copy the Google “embed code” and enter the whole thing in an embed code web part.

Advanced features
You can also:
Add an alert and get emailed when a submission is made
Choose a template background
Add a validation field to deter spam

How it looks
The basic form should look like this on an O365 page. You can of course style the form anyway you want with the provided tools or add your own css. You can see a working example of a form (and published submission spreadsheet) on a 365 site by clicking here.

365forms6

Any submissions you get will be stored in the spreadsheet so you can sort, filter, and manipulate the data as you choose. If you want to publish submissions back to your site-for instance customer feedback, you can do that easily too. Please click here to see a how to article.

It’s a bit troubling that we have to resort to a 3rd party solution for such a basic functionality as adding a form (especially from Google!) Hopefully, MSFT finds it troubling too and will restore the list publishing and form building capabilities to O365 so we no longer have to.

Publish Form Submissions On An Office 365 Sharepoint Online 2010/2013 Public Site

In our article: “Create a custom form on your public site ” we covered how to get a Google Docs form onto your O365 site to collect data. If you’re looking to publish visitor comments, feedback or any other data submitted through the form back to the site, here’s how:
Since Google stores submitted data in a spreadsheet, what you need to do is simply embed that spreadsheet on your page.

Open the spreadsheet version of the form in Google Docs.
Click the”Share” button up top and select “Publish as a web page”.
Click the”start publishing button”.
Copy the url that opens in the box.
Enter this code in an html module:

Adjust the url, height and width as necessary.

Click here to see a working example.

A note on spam

We’ve never had much of a problem with Google forms, but if you start getting spurious submissions, you can add a validation field to filter out non human submissions (in Google Docs, go to ‘Data / Validate’). If you still get spam, the best defense is to change the url your form is under so the spammers submit to a url that doesn’t exist.
To do that, save your iframe code in notepad as an .aspx file, upload it to documents and iframe that document on your page instead of the Google code. If you periodically change the file name and reupload it you will foil the spam bots who can only post to a url-which of course you’ve changed.