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.

Show file type in a library view (2010 and 2013)

The default “Name” column added to a library view is a link and drops the file extension. The icons under “Type” indicate the file extension but show a default image except for a few file types. To retain and display the extension for all files add the “Name (for use in forms)” column to the view. Open the libraryOpen the library settings
Under”Views” click the view you use
In the”Columns” options, check “Name (for use in forms)”
Change the”Position from left” number to reorder the columns as needed
Save the view.
Don’t forget, you’ll have to reselect the view in the web part’s properties for the changes to be seen.

Add the ECB (edit control block) menu to an additional field in a Sharepoint 2010 library

ecb3The “ECB” menu is the contextual menu that provides quick access to functions in libraries and lists via a drop down. By default it’s only attached to the “title” field but it’s fairly easy to add to another field in a Sharepoint 2010 library. I don’t see a way to do it using the browser so you will need Sharepoint Designer 2010.Open the site and your desired library view in “design view” in SPDSelect “advanced mode” from the ribbon.
Click an item in the column you want to add the menu to.
When the little arrow and “Common xsl….” dialog box shows up, check the boxes for “Show list item menu” and “Show link to item”.

ecb1

Save the view page and check your library:

ecb2

?

Adding video to a Sharepoint Online blog post (SharePoint 2010)

wmpWhen you create a new blog site in SPO, the default blog post promises it will: “….help you share information related to a particular subject area in the form of text, images, links, and other media such as video”. Unfortunately, Sharepoint strips out any embed tags like iframe or object from any list, so video can’t be directly added to a post – which is actually a list item in a standard list.This article will show you how to workaround that restriction and insert any embedded content into any list – in 3 easy steps.

Add an empty div to a post (or rich text field in any list).
Insert a content editor web part linked to a file
Create a file with a little javascript that injects your embed code into the empty div in the list
By locating the embed code outside the list, the “illegal” embed tags are rendered after the list and aren’t detected by the list filters. Javascript insertsyour embedded content inside the blog post wherever you inserted the empty div. And, yes, you’ll finally be able to add video content – beloved by search engines everywhere – to your blog. (I’m using a blog as an example here, but this can be adapted to insert any kind of coding into a rich text field in any type of list).
What you’ll end up with is a really easy way to manage embedded content. By simply adding or adjusting the embed code in one “central” text file, you can add a new video, change dimensions, change videos, insert a powerpoint slideshow etc. And since this technique only uses standard web parts and javascript, it should work the same no matter which version of Sharepoint you’re using – 2010 or 2013.

Here’s how:
Since we’re talking about adding a video to a Sharepoint list, here’s an example – an embedded video that will show you how to do just that. Text instructions and the code snippets needed come after the video!

untitled2

1/ Insert an empty div
Open the post for editing and click the “edit html source” button. Add an empty div where you want the video to appear.
Give it an id you will use later in the javascript: in this example –

div id=”test”></div

untitled2

2/ Add a content editor web part
All the posts use the post.aspx page so to open it for editing enter //Lists/Posts/Post.aspx?ToolPaneView=2&PageView=shared
Click “add a web part”, select a content editor web part and then click “edit web part”
In the properties box, enter /Documents/test.txt in the “content link” pane
The code MUST be rendered after the empty div so select the right zone under “layout” to make sure it is.
Select “None” for the chrome type so a web part title doesn’t show in your blog.
Save the web part and the page

3/ The code
You can either create a text file with the code below and upload it to the Documents library, or even easier create it right in Sharepoint Designer. Just make sure the id (in this example: “test”) corresponds to the id of the div you added to the list in the first step.
Open the site in SPD – navigate to the Documents library – click the new file tool and select text file – change the file name* – paste in the code below.
*The only requirement for the file name is that its url correspond to what you entered in the content editor.

Video inserted in post–>
script type=”text/javascript”>
vartest=document.getElementById(“test”);if(document.getElementById(“test”)){document.getElementById(“test”).innerHTML=’YOUR EMBED CODE GOES HERE-YOU CAN PASTE IT FROM YOU TUBE OR OTHER HOST’} /script>

Once you save the file, the content editor will run the code and bypass Sharepoint’s restriction on embedded content.

Multiple videos on a page
Since all posts use the posts.aspx page and the text file is already being referenced, you can add more instances of the inner html javascript to the text file. Each instance must have a unique div id which must be referenced in the file. In other words, you can add an empty div with an id of “test2” to the same or another post, and repeat the javascript in your file using “test2” in place of “test”.
One more trick: once you’ve inserted the content editor web part on one page, you can save it in your web part gallery and make it available for use on other sites or pages. To do that, select the web part in Sharepoint Designer. Click “Web Part Tools – Format” in the ribbon. Click “To Site Gallery” under the “Save Web Part” section. To add it to another page or site, select where you want it in design view (in SPD), open the web part tool and insert it.

 

Open links in a new window in Sharepoint Online lists / libraries

?If you want your links in an SP list to open up in a new window, you can change the behavior with this simple update to the list view’s xsl code. All that’s needed is to add “target=”_blank” to the line in the xsl that creates the link. I’m using a “links” list here but this works for any list with links in it.Assuming you already have a list added to a page, open that page in Sharepoint Designer 2010 in advanced mode. Select SPLIT view.The links in the list will display in the “design” view at bottom.
Click a link and you’ll see the corresponding bit of xsl highlighted in the code portion of your screen.
It will look like this:

a href=”{$url}”>
Add target=”_blank” so it looks like this:
/a> , a href=”{$url}” target=”_blank”>
Since the xsl loops through your list, every link will get updated when the page is rendered in a browser. So save the page and test it out.
NOTE: if you’re not able to find the line referenced above and don’t see 1700+ lines of code for the web part, try this:
Click the top of web part in design view where it says “webpartpages:xsltlistviewebpart”
In the ribbon click design under list view tools
Click customize xslt and then select “entire view”.
Then try to locate the code for the links in the list.

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.