Domain Hosting Sale: June 2011

Thursday 30 June 2011

Putting a Facebook "like", "send" or "share" button on your blog

There is an official Facebook button that your readers can use to share your blog, your current post, or any website, on their own Facebook account. This article describes how to get the code from Facebook and install it into Blogger - but most of the information applies to other blogging tools (Wordpress, TypePad, etc) and many other web-site tools also.

Previously I've described the different ways that you can link your blog and the social-networking sites.

Facebook badges can be used to send your blog's readers to your personal Facebook profile, or to your page. These are an example of the "follow me" approach.

But often blog authors want to give their readers a tool to share the blog that they are reading on their own (ie the readers own) Facebook account - that is to use the "Look what s/he said" approach.

Your readers could just copy-and-paste a hyperlink to your page into their own Facebook account, but it's clunky, and means that they have to start up Facebook themselves.

Various people have written 3rd-party widgets to put a Facebook icon on your blog, set up so that when a reader clicks it the current page it is automatically shared on the reader's Facebook account. Some even count how many times the button has been clicked.

But I don't like, or trust, 3rd party gadgets:

There's no guarantee that they don't have nasty side effects on your blog.
Some of them ask you to type your Facebook id and password onto a page owned by a 3rd party. They promise that the won't do nasty things with the data - and some of them mean it. But you just don't know who to trust.
If Facebook change how they do things, there's no guarantee that 3rd party tools will also be changed: you could easily be left with a button that doesn't work any more.

I'm not saying that all the 3rd party gadgets are bad: I've used some on my sites with no ill-effects. But I've never been happy about it. And the day that I used the AddThis button on a newspaper website to share an article to my personal travel-blog, I had a mini panic-attack 1/2 an hour later when I realised that I'd just given my email and AdSense password to a third-party.

One approach - Blogger's social-sharing buttons:

Google have introduced social-media buttons whichcan be shown at the bottom of each post. They only work on blogs with Designer Templates (ref Types of Blogger Templates)

They're an improvement on the 3rd party gadgets, but I still don't like the way they look, and the lack of options to customize them, so I usually have them turned off.

A better approach - Facebook's official gadgets:

The Share Button:

The first "look what s/he said" option that Facebook offered was the Share button, officially called the the Post To Profile gadget.

This let you customise a few features, and also had a preview function

You can still see this gadget on many web-pages. But you cannot get the code for this from Facebook any more: they now recommend using the social plugins (more about them below) instead.

The Share button still works though, and can be added to your site using this code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='float:left;padding:3px 3px 3px 3px;'>
<a expr:share_url='data:post.url'

href='http://www.facebook.com/sharer.php'

name='fb_share'

type='box_count'>

Share

</a>

<script

src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'

type='text/javascript'>

</script>
</div>

</b:if>

(I've spaced the code out a bit so it can be understoond more easily - the extra line-breaks can be removed when you use it.)

You can configure the code by changing the value of type: other options are

button_count (shows a counter beside a smaller button)
button (shows a smaller button, still with the word "share"
icon (shows the small "f" only)

See Sharing from your blog to the Social Networking Sites for more information about where to put the code, including general and post-specific options.

Notice that because the code above includes expr:share_url='data:post.url' you need to put it in a post-specific place in your blog. Another option would be to replace data:post.url with the URL for your blog, and put the code into a gadget etc.

Be aware that sometime in the future, the Share button may stop working, because Facebook stop supporting it. I don't expect that to happen soon though, because it's now installed on so many web-sites worldwide.

The Like and Send buttons:

Facebook's official gadgets for saying "look what s/he said" are now the Like and Send buttons.

Officially, you can get the code for them on the Developers > Social Plugins > Core concepts page: don't be put off because the page is labelled "develoeprs" - it really is quite simple to install the buttons into your blog.

However the last few times I tried to get the code from Facebook, it's refused to give it to me, saying:

"The href entered is not recognized as a valid URL.".

So this is the code I got from them before, modified to be used in a post-specific place - see below - and to not use the width that was suggested:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like action='like' colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='false' show_faces='false'/>

This picture shows the options that were available when I got that code:

It's fairly easy to look at these options, and work out changes you might like to make, eg

like action='recommend' colorscheme='dark' font=''Arial layout='box_count' send='true' show_faces='true'

When you have chosen the options you want:

Click the Get Code button at the bottom of the page,
Copy the code that is provided, and
Install it into your blog (see below for more info about this).

Sharing a Post vs Sharing the whole blog:

If you put a a Like, Send or Share button into your own blog as a gadget, then what is shared is your whole blog, not the particular Post that is being read, for example

http://blogger-hints-and-tips.blogspot.com (this blog)

instead of

http://blogger-hints-and-tips.blogspot.com/2010/04/tools-for-linking-blogger-and-social.html (a post)

If this is what you want your readers to do, then just put your blog's URL into the "URL to Like" field (or the expr-statement if you're using the Share button code), and add the code as a gadget.

But if you want your readers to share individual posts, then you need the Facebook-button to appear with every post, in either the post-header or post footer This is a little harder than adding it as a gadget. To get the code to use for the Like/Send buttons

Put some dummy text into the URL to share field
Get the code
Replace the dummy text with instructions to use the URL of the current post, ie change it from

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=173511999379139&xfbml=1"></script><fb:like href="DUMMY-TEXT" send="false" width="450" show_faces="true" font=""></fb:like>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=173511999379139&xfbml=1"></script><fb:like
expr:share_url='data:post.url' send="false" width="450" show_faces="true" font=""></fb:like>

The way to add the code to your blog is described fully in Putting Share this on XXX buttons into your blog (it's done the same way, no matter what social network's share button you are adding).

Enhance the sharing using Open Graph tags

Facebook was one of the first sites to use Open Graph (OG) markup, which is a way to label parts of your blog so that social websites know what to use in each of their features.

Unfortunately Blogger templates don't automatically contain Open Graph code. But you can add it yourself. This isn't essential - people can still share your posts without the tags being present - but it does generally make shared of your pages look better.

What your readers see

When a reader clicks your Facebook button, they'll be asked to log in to Facebook (unless they're already logged in).

Once they're logged in, then:

If they used the Like button:

The "like" is recorded on their wall, and they are shown a small message in your site, giving then the opportunity to un-do the like, or to add a comment which is also shown on their wall along with the like.

If they used the Send button:

They are shown a small pop-up window where they can type in names (from their existing Facebook friends) or email addresses. A message about the item is send to the selected people using either Facebook Messages or regular email for people who aren't on Facebook.

If they used the Share button:

They see a window where they can enter a message, and see the link and description that they're going to be sharing.

The link is either the page that they were viewing when they clicked the button, or another URL (if you chose the Custom URL option when you were setting up the gadget). The description is an advertisement for Blogger. However both of these these can be changed if your reader clicks on them.

Lastly there's a captcha window, where they have to enter some security test.

Linking your Blog and the Social Media

Adding a Facebook personal account badge to your blog.

Adding a Facebook Page badge to your blog.

Types of Blogger Templates

Putting 3rd party HTML code into your blog

Adding the "Find us on Facebook" plug-in box to your blog

Tuesday 21 June 2011

Conflicting Google and Google Apps accounts

This article is about resolving conflicting Google and Google-Apps accounts: an issue that is is going to start for people who set up a blog using an email address that is being moved to Google Apps.

Google accounts vs Google Apps accounts

Previously, I've described Google accounts and Google-apps accounts

As at October 2010 the two types of account were not the same, even though they looked similar. Therefore it was easy for one person to have :

A Google account called Joe.Bloggs@AnyCompany.com (because that's just any old email address)
A Google Apps account also called Joe.Bloggs@AnyCompany.com

The Google Apps account can only been set up when a new custom-domain was registered or purchased for AnyCompany.com - or when the existing AnyCompany.com domain moves to Google Apps.

Joe should know about the Google account (assuming he's still actively using it).   But if he isn't aware of all the things being done in the IT department of AnyCompany, he might not even know that the Google Apps account was created when the IT manager was quietly testing options for a move to Google Apps.

Merging Google and Google Apps

In recent months the number of programs included in Google Apps has grown massively.

But to include the "older" tools like Blogger, Picasa-web-albums etc, they had to move to a new infrastructure. To do this, they needed to fix up situations like the one described above, where there are two different accounts called Joe.Bloggs@AnyCompany.com

The work to enable this has been done.  Organisations that use Google apps have been moved to a new infrastructure, which needs the apparently duplicate accounts to have been fixed.

So, when this happens for AnyCompany, cleaning up the conflicting Joe.Bloggs@AnyCompany.com accounts needs to be done.

Google decided (I believe wisely - more about that later) that the two accounts will not be merged: they aren't, and never will be, the same account.

Google have written about the conflicting accounts issue.  They say that the first time that Joe Bloggs logs into Blogger (or Gmail, or various other Google tools outside of Apps) after AnyCompany has moved to the new infrastructure, he willl be shown a special screen where he must rename the Google account.

[Even though Google' account transition process is now complete, it's likely that Blogger users will continue to see this request as the log into to infrequently used Blogger accounts in the future.   This is why I have updated this article now (June 2011), rather than deleted it.]

What to rename the Google account to

It looks like you can rename the existing Google account to any other text string that looks like an email address - and of course isn't already taken.   (Again, I haven't tested this yet, but it would be consistent with how Blogger works now).

Personally, I suggest renaming it to some other real email address that you control - ideally a new address that is just for the purpose.

I don't think it will be possible to rename it to a gmail address, since creating the gmail address will create a Google Account, but in this case the Google account already exists.

Scenario 1: Google account relates to the company:
If the blog(s) etc owned by the original Google account are related to AnyCompany, then one option is to rename it to Joe.bloggs2@AnyCompany.com.   This will work, provided there's not already an account with the same name.   But it may create issues (for the companies domain administrator) if another person called Joe Bloggs comes to work for AnyCompany in the future.

In general, if the Google account relates to company business, it would be a good idea to consult with the IT department to see how it shoudl be treated.   It's often a good idea to use a generic account name (eg blog.Editor@AnyCompany), and to simply hand on the details for this account when you leave the organisation. That way, at very least the administrators of the domain will be able to get access to them because they'll control the email address that matches the Google-account name.

Scenario 2: Google account not related to the company:
If the blog(s) etc owned by the Google account are personal, or related to something other than AnyCompany (which could be AnySchool or AnyNonProfit, etc), then I would strongly recommend that the account is renamed to some valid address which is outside the control of AnyCompany, for example Joe.Bloggs@yahoo.com.

You need to make sure you keep control of and access to the email address, so that you will continue to have access to the Google account even after you've left the company (or school, etc).

Aside: this is why I think it's a wise decison not just to merge the Google and Google-Apps accounts: there is far too much chance that people will have used their work (or college etc) email address to set up a Google account that has nothing to do with work etc.

Combining the Google and Google-Apps accounts

Currently, Google don't provide any tools (that I know of) to let you combine accounts.

Some Google-products (eg Feedburner) have tools to let you transfer ownership of items in them to another Google account. But some products don't have any features like this.

Blogger lets you transfer blog ownership by giving another account administrator access and then removing yourself. But unless you are certain that you can successfully transfer all the items in the blog (remember, Picasa-web-albums currently has no way to transfer album ownership, ditto videos, calendars, etc) you still need the original Google account to exist. (You might choose to log into it with gmail and set message-forwarding and then never use it again. That's fine ... just so long as you don't delete it.)

Monday 20 June 2011

Google Apps, Google Accounts and Blogger

This article is about Google Apps: what it is, how to access it, and what the account-names look like. It discusses the great similarity between Google and Google Apps accounts, and looks at some of the small differences between them and how these relate to Blogger.

What is Google Apps?

Google Apps is a group of on-line applications and services that Google package together. They are sold as a service to companies and other organisations, and people (individuals and companies/organisations) can use services on Apps for free, for up to 10 users.

You can sign up for Google Apps, using either a custom-domain that you purchased from another domain registrar, or by purchasing a domain-name (ie URL) through Google.

Also, people who purchase a custom-domain through Google / Blogger or Sites are strongly recommended to set up one Google Apps account to administer their domain with, and may create up to 10 user-accounts in the domain.

Google Apps account-names are groups of letters and numbers that look like an email address, for example, Joe.bloggs@ACompany.com.

Initially Google Apps included things like:

Docs (to replace MS Word etc)
Spreadsheets (to replace Excel etc)
Presentations (to replace PowerPoint),
Google-mail which looked and worked very much like Gmail in regular Google accounts - but was still different (to replace Outlook / Exchange) etc.
Google Sites (for point-and-click website creation)

Today, many other software-as-a-service applications have been added to this list.

Google accounts vs Google Apps account

Initially, and until late 2010 / early 2011, a Google Apps account was NOT the same as a Google account, even though they appeared similar in many ways. If an Apps user (even the domain Administration) wanted to use AdSense, Blogger, Picasa-web-albums, Google Maps, and some other applications from Google, then s/he needed to set up a separate Google account.

However since sometime in early 2011, Google Apps has been extended to include almost all the services that were previously available to Google accounts. Effectively this means that now a Google Apps account is almost totally the same thing as a Google account.

To make this happen, Google had to resolve conflicting Google and Google Apps accounts. This included asking owners of Google accounts with the same name as Google Apps accounts to choose a new name for their account. They have also transitioned existing Google Apps accounts to Google, which has seen domain administrators get a flurry of warning emails.

Using Blogger with a Google Apps account

Today, if you have a Google Apps account, you can use it to log in to Blogger, Picasa, etc just like you did with a Google account, and you can do things like transfer blog ownership to Google Apps accounts.

The only exception is if your domain administrator has restricted your access to certain services. For example, if your domain administrator has turned Blogger off for users in your domain, and you try to use Blogger with that account, you get a message like this:

It reads:

This service is not available
Blogger is not available for YOURDOMAIN.XXX. Learn more about Google products that you can use with YOUR-LOGIN@YOURDOMAIN.XXX.
If you are the Google Apps administrator, please read these articles to learn more about controling user access to Google Apps services and turning services on/off for certain users.
Did you use this product with a different Google Account? Sign out of your current Google Account and then sign in to the account that you want.

The only way around this is to ask your domain administrator to give access to Blogger (which they may be unwilling to do because it means giving access to all users in the domain, not just you) or to use another, different, Google account for Blogger.

Apps Security vs Blogger Security
Security restrictions that your domain administrator has set in Google Apps don't currently apply in Blogger. For example, Google Docs may be set up so that only people in your domain (eg company) can see your documents. But this if you create a blog in Blogger, this uses the Blogger security setting that you impose (under Settings > Permissions) - and by default it will be visible to the whole world. This is why some domain administrators are not keen to enable Blogger for users in their domains.

(I haven't investigated, but it's likely that the same thing applies to other apps that were previously accessed via Google accounts not Google Apps accounts - eg Picasa.)

Other Google-account tools:
There are a few Google products that currently are not available using Google Apps accounts:

Buzz
Health
Powermeter
Google Profiles
(NB Blogger Profiles are available in the usual way via the Blogger Dashboard > Edit Profile link)

(ref: http://www.google.com/support/accounts/bin/answer.py?answer=182213&hl=en&ctx=ch_b%2F0%2FServiceNotAllowed&p=blogger)

Again, if you want to use these applications, you need to use another, different, Google account.

Google Sites:
Some Bloggers use Google Sites, accessed with their Google account, to host files.

Currently, the Google Sites login screen that gives a choice between logging in with a Google Account, or with a Google Apps account, like this:

Despite this, if the Sites service is enabled for your domain, you can use your Google Appts account details to log in via the top, Google Account, part of the screen. And if you choose the "Sign in with a Google Apps Account" link, the screen now asks for your email address (ie your account name), and simply puts it in the top part of the screen and asks for your password there.

Sunday 19 June 2011

Custom Search Elements won't support iframe for much longer - change to new options now

This article is about changes made to Google's custom search engines made in June 2011, and the implications for Blogger users who have been using the iframe option to show search results inside their blogs.

Previously I've explained how to make a Google custom-search engine for your blog, This is particularly useful for AdSense publihsers, because it lets them have a share of the revenue from the advertising displayed inside Google search results.

In June 2011, Google's Custom Search team announced some new options for displaying search results. Overall these are a step forward, but they do include removing the "iframe" option which, until now, has been the only way that Blogger users who implemented a custom-search could display the search-results inside their blog.

As a result, Blogger users who used the CSE i-frame display option need to upgrade to one of the new displays. This can be done now - it's not clear how much longer the iframe-based code will work for.

Also, Blogger users who don't currently have a custom-search in their blog but want to install one have some new options to choose from, as described in the New CSE Display Options.

What's happened for existing Custom Search Engines

If you already have a Custom Search Engine (CSE), you manage it by logging in to the CSE control panel. If you have been using the iframe option and you go to the look-and-feel tab now, there is a new message like this:

It says:

Deprecation warning: The Iframe option is deprecated. We recommend the "Two page" or "Results only" layouts in the Search element as the new options. Please refer to our developer guide for a complete list of layout options.

"Depreciated" is web-developer speak for "we don't like this, and one day we will stop supporting it and wll do some new feature that makes it break". In short, "we don't apprecaite this any more".

In short, the new message is saying that the iframe option will work for now, but you will need to change to use something else sooner or later.

New CSE results display options

Instead of the iframe option, Blogger users need to choose one of the options that are based on Google web-elements. Choose Search-element under Hosting Options and you will be shown the new display options, which are:

Full-width - The search box and search results take up the whole width of the place(post, page or gadget) where you put the Search element.

Compact - Like the full-width option, this takes up the the entire width of the page or column, but the results section shows fewer results, so it takes up less vertical space. Google say that "this option is optimized for mobile devices, so it works well on Android, iPhone, or Palm webOS devices."

Two Column - The search box and the search results section are in places in your webpage, and to leave the search results section, a user must click on the X icon next to the search box.

Two Page - The search box and the search results are placed in two different places (posts, pages or gadgets). In this option, the search results section also has search box, so visitors can submit further queries directly in the search results page.

Results Only - Search results are shown in the place (post or gadget) where you put them - but Google CSE doesn't give you a search box, you need to make your own.

Google-Hosted - CSE gives you the code for a search-box, and you put this into a post or gadget. But then someone clicks search, they are taken to a Google-hosted webpage outside fo your blog, which can be opened either in the same window or in a new window.

Google have provided examples of each layout option.

How to install these into blogger

Follow these steps to choose one of the new display options, for either a new or existing Google Custom Search Element that is used in Blogger:

1) From the Custom-Search-Elements, choose Control Panel, and then choose Look and Feel.

2) Choose a layout option, by clicking on it. The one you have selected is shown in a frame.

3) Scroll to the bottom of the page, and click Save and Get Code

4) Install the code into your blog in the way specified by the option you chose: some options have code for place where you want the search box and where you want the resutls, while others only have code for one of these.

How well do each of the options work with Blogger:

Full-width and Compact:

These options both display their results well inside blogger. However the search-box is only shown on the same page as the results, so either

You need to put the search-element into a gadget that is visible the whole time, or
Searching your site becomes a two click process (on click to get to the search box, one to run the search), which will confuse some users.

But the search results look good - although the ads at the top blend very strongly into the results.

Two-column:
This option does not currently appear to work with Blogger (at least not when I tested it under Firefox 4 / MS Windows XP)

Two-page:
Inside Blogger, this appears very similar to the way that the iframe-results display worked: to install the code, you need to say what page or post the results will appear on, and then you are given specific code to put into each of:

The place (gadget or page or post) where the search-box goes. and
The place (gadget, post or page) where the results go.

I haven't fully decided, but it's likely that this is the option I will use for the Blogger-Helpers-Search Tool.

Results only:

Again, inside Blogger, the results-only option is very similar to the Two-page option, with some key differences:

There is no search-query bar at the top of the place (post, page, gadet) where the results are displayed, and
You need to make your own search query form and to call the search from it.

It's very likely that I will use this option for several of my other blog-sites, where the search is always called from a gadget: because the gadget will continue to be shown on the search results page, I don't need to put a search-form into the results.

NB Having to make your own search-query may seem difficult, but there is a very simple way to do this, by using CSE itself to build the search-box code for you:

Choose the two-page option
Enter the URL of the post or page where you want the results to appear
Click Save and get code
Copy the code that you are told to install into where you'd like the search box to appear.
Paste that code into the appropriate gadget, post or page
Go back to the Look and Feel tab in CSE
Choose the results-only option
Click Save and get code
Copy the code that you are told to install into where you'd like the results to appear.
Paste that code into the gadget, post or page where you want to put the search results

Google-hosted
I have not investigated this option, because I want to have the search-results right inside my blog.

Related Articles:

Putting a Google Search Engine into your blog

Setting up AdSense for your Blog

Blogger-Helpers-Search-Tool - a customised search of high-quality sites

Installing HTML into your blog

Saturday 18 June 2011

Saving a post if the Publish button doesn't work

This article is about how you can save a post even if Blogger's Publish button won't let you save your work.

Editing your posts

Imagine you've been working on a Blogger post for several hours. It's finally ready: you've got the wording exactly right, everything is formatted with bold, italics and bullet-points, your pictures and links are all correct, etc.

But then your internet connection stops working. Or you click the Publish button - and get a message like "Post cannot be saved due to HTML errors". You can't work out how fix the problem, and you need to stop working on it now!

This may seem like a disaster - hours of work wasted.

But luckily there's a very easy way to save your work, and tools to help you diagnose problems.

Saving your work and recovering it later:

How to save the post that you have written:

Switch to Edit HTML mode (this is a tab at the top right corner of the editing window - or the top left in the post-Sept-2011 new Blogger).

Select all the text in the window (Ctrl / A does this in most software)
Copy it.
Go to somewhere that you can save text:
Perhaps a text-editor like Notepad, or a plain-text formatted email message. Even a word processor like MS Word can work, provided you remember to save your file as text. Or you may want to use a source code editor - see the section below about fixing code errors.
Paste in the contents that you copied earlier.
Save the file.
Switch to Compost mode (this is optional - I usually recommend it so that you don't get confused the next time you come back to Blogger and see the "funny codes")
Exit the Blogger post-editor by closing the window - say "ok" if the system asks if you really want to leave the page without saving.

"Stop showing HTML Errors":

If the problem is with your code, not the internet connection, then there is an option to "Stop showing HTML errors for the body of this post", which lets you post anyway - and I guess tells Blogger to make the best guesses it can about what's wrong. I'm not sure it's a good option to use, because you cannot be sure of the quality of the post that is saved and whether Blogger will make the right guesses.

Recovering your work later on:

This is the reverse of what you did to save the work:   open the text file, copy the contents, go to Edit HTML mode in Blogger and paste them in.

You should then be able to go in to Compose mode, and see the post as it was when you stopped working on it.

At this point, if the HTML is ok and you have fixed the issues with your internet connection, you can Publish your post.

Fixing problems with your HTML

If there are problems with the HTML, then you need to find them, and fix them.    Usually, fixing them is easy, once you've found them - but the finding can be hard if you have a large and complicated post.

Sometimes Blogger will tell you what the problem with your HTML is, and show where it's happening by putting the "wrong" code into reverse text when you try to Publish it: this makes it easy to see if you scan through the HTML for the post.

However sometimes Blogger doesn't show you where the problem is - I've noticed this more often recently when using IE 9.0 on complex posts.   Instead you get an error message like

Your HTML cannot be accepted: Closing tag has no matching opening tag: SPAN

or whatever the specific problem is, but none of your code is highlighted. This can make it hard to track down and fix the problem.

A low-tech way to find the problem is to paste the code from the saved file into Blogger's Edit HTML window in smaller sections, and Publish to work out if the problem is in the code that you just pasted: if everything in the first section of code can be published, but there is an error message for the next part, then you know what section the error is in.

A major disadvantage of this approach is that you need to publish the post many times, and the first time it will definitely not be "finished". this is OK if you use a pre-publication blog to prepare your posts, but if you don't do that, it can cause your RSS subscribers to form a bad impression of the quality of your posts.

A better option is to use a source-code editor like Notepad++ (free, Windows only) or XMLSpy (30 day free trial, far more complex code editor), which has tools to help you find and fix problems with your code.

Tuesday 14 June 2011

Showing a PowerPoint file in your blog

This article is about options for showing the contents of a PowerPoint file inside your blog.

Overview

Previously I've described how to load content from MS Word to your blog.

But some people have material in PowerPoint (or other presentation software) files, that they want to show in their blog. So far, I've identified four options for doing this.

These approaches should work on any PowerPoint formatted presentation, no matter what tool it was prepared with - except of course if it was Google Docs in which case you go straight to option 2.

Option 1: Each slide as an image

Follow these steps:

In PowerPoint, choose Save-as, and choose an image format (eg .png).
When the system asks if you want all slides or just the current one, choose All.
Upload all the image files that were created to your blog - it's your choice whether you put them all in the same post, or one-per-post.
I usually upload them firstly to Picasa web albums or another picture-hosting service, and then just link from my blog to there)

At first, I thought that this was a backward approach. But recently I wrote an article based on a presentation that I gave several years ago. After trying various ways of displaying the presentation and the article, I realised that I was trying to find a way to include all the comments that I made when I used the presentation face-to-face. To do this, I needed to show each slide individually, so I used this option because it gives full control over what commentary goes with each picture.

Option 2: Convert to a Google Docs Presentation

This is described in detail in Using Google Docs's publish-and-embed option - I believe it's better than trying to use Google Web-elements, because it achieves much the same thing, and takes one piece (web-elements) out of the equation.

Option 3 Copy and Paste

As with MS Word, copy-and-paste from PowerPoint to Blogger is NOT recommended, because the PowerPoint content can have all sorts of extra HTML codes attached to it, and these can cause negative effects in your blog.

But you may want to copy-and-paste, either because you don't want the content as images, or because you want other things like presenter notes etc that are not stored in the presentation slides.

To do this, you need to:

Copy from PowerPoint,
Paste into a text-editor (eg Notepad in Microsoft Windows)
Copy again from the text-editor
Paste into your blog.

An alternative may be to export the presentation as an outline (ie rich-text or RTF format), and then convert it via Google Docs in the same way that you would for a Word document. You would need to test this to check if it brings in the items that are stored outside of the slides.

Showing a PowerPoint presentation as a slideshow in your blog

Converting from MS Word to Blogger, via Google Docs

File hosting options - places to keep your files on-line

Tools for applying copyright protection to your blog
.

Friday 10 June 2011

Editing your Blog's template: advantanges and disadvantages

This article is about the consequences of modifying your blog's template.

Overview

Previously I've explained that your blog is made up of a number of components: your content, and a number of other parts including the blog template.

Initially, every blog has a blog-templates chosen from the options supplied by Google when the blog was created. However it's possible to change to a different blog-template at any time, and there are lots of options both from Google (custom, layout and now designer templates), and from third parties.

You can edit your template, from the Layout / Edit HTML tab. And the recommended answer to many "how do I ..." questions in the Blogger Help Forum is to do just that.

However there are some consequences, and (at least) one of Blogger's software engineers recommends not editing your template [in the comments following from this post]- even though s/he also says that doing so is very much part of the supported features that Blogger offers.

This article explains these consequences, so that you can make an informed decision about whether to edit your template or not.

Google's blog-templates

Google / Blogger offers four different types of template: Custom, Layout, Designer and Dyamic. (Ref: types of blog template) - and there are mobile variations within the Designer options, too.

For Layout, Designer and Dynamic templates, they also offer a number of different styles, for example Minima, Minima Stretch, Denim, Rounders, Thisaway Rose, Simple, Awesome, etc).

For each style of template, Google has a current version. But there are also earlier versions that used to be current but have been superseded as problems with them have been found and fixed:

When Google make a change to their "master copy" of a particular template, they also look at all the blogs that already use that template: if a blog's copy of the template has not been editied (by the owner), then it is updated to include the changes that Google made to the master copy.

But if a blog's template has been changed, Google cannot update it with the improvements that they've made to the master template, because doing so would over-write the change that the blog-owner made.

Advantages and Disadvantages

The major disadvantage of editing your blog template is that you may not get the benefits of improvements that Google make to the master template.

There are some other disadvantages too:

You might make a mistake, and corrupt your template (possibly in subtle ways that you don't notice at first).
You need to take back-ups, just in case you make a really horrible mistake - and it can get confusing managing all the versions of the backup file.
It's more difficult to get support from the Blogger Help Forum is your template is non-standard (because the helpers there don't know how you've changed things
When it's time to update your blog to use a new template, there is no way to make a list of all the changes that you have applied to your current template (unless you've got a copy of the un-changed template as it was when you applied it to your blog for the first time).

But there are some pretty major advantages:

You can make changes to your blog that you cannot make in any other way
It's easy to back up any changes that you make: while there are some changes that could be put into HTML/Javascript gadgets on your blog, there is no easy way to back these up. If you accidentally delete a gadget, the only way to get it back is to re-create it manually.

Final thoughts:

The Add CSS function in the Template Designer is at attempt to let us change our templates in a way that is known, and gets around these issues. But I'm not convinced that it always shows all the template changes I've makde, and there are some changes I want to make that don't relate to the CSS.

Personally, I'm going to continue editing the HTML in my blog-template.

You need to make the own decisions about whether to do so or not. Hopefully this article will help you to understand the consequences, either way.

Sunday 5 June 2011

Adding a Facebook personal account badge to your blog

This article describes making a Facebook badge to promote your personal Facebook account, and putting it onto your blog.

Facebook, Profiles and Pages:

As I've previously explained, Facebook has Profiles for people, Groups for collections of people who want to approve individual members who join, and Pages for everything else.

Many people called their Profile their Facebook "account" - and lots are confused about the differece between personal profile, and pages. But there is a big difference - and it starts to become obvious when you look at how to promote your facebook presence inside your blog.

I've already described how to make a badge for a Facebook Page. Now I'm going to look at how to make a different kind of page, to promote yourself, ie your Profile.

This is an example of the "follow me" approach to linking your blog and the social networks, although for Facebook pages your reader becomes a Fan rather than a Friend.

Making a badge for your Facebook profile:

Log into Facebook with the personal account that you want to promote.
.
Choose Profile (currently on the top right menu, just next to Home).

Scroll down the left hand panel,until you see Share a Badge (usually at the bottom) - click it.   This takes you to Facebook's badges page, with Profile badgets automatically selected.

Click Edit this Badge,

Choose the format and contents that you want to show.
Remember, what's shown is the information from your personal Facebook account, and if you put it onto your blog the usual Facebook security rules won't be used to control who sees the information.   Only use these badges if you're very sure that you want your information to be shared.

When you are happy with the selections, choose, Save the badge.

Facebook has options to step you through the process of adding the badge (as a gadget) to Blogger.   But I always prefer to choose Other and then Copy the code provided (put the mouse into the field, press Ctrl/a to select it all, then Ctrl/c to copy).

Install the code into your blog: as always there several options for installing 3rd party HTML, depending on where you want to put the badge.

What your visitors will see

People who visit your blog through a web-browser will see a badge showing the information that you have chosen to show.

When they click on it, they will be taken to Facebook and as much of your profile as your current privacy settings let them see.

As always, people who read your blog via a feed reader (Bloglines, Google Reader, etc), or by email subscription (eg having used follow-by-email) may not see the Facebook item, depending on where is places and what options their email program has.

Customizing the code:

Unlike other Facebook badges, the profile badge has very few options for being customized by editing the code, which looks like this:

<a href="http://en-gb.facebook.com/WHOEVER" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="WHOEVER">WHOEVER</a><span style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;"> | </span>
<a href="http://en-gb.facebook.com/badges/" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create your badge</a><br/>
<a href="http://en-gb.facebook.com/WHOEVER" target="_TOP" title="WHOEVER"><img src="http://badge.facebook.com/badge/WHOEVER.WHOEVER.png" width="177" height="84" style="border: 0px;" /></a>

An important note: if you create a badge like this and put it into a website, and then go back and edit the badge in Facebook - the website will show the updated badge.

Putting a badge for a Facebook Page into your Blog

This article describes making a Facebook badge to promote your page, and putting it onto your blog.

How Facebook is organised:

This article is about how to make a badge to promote a Facebook Page.

This is an example of the "follow me" approach to linking your blog and the social networks, although for Facebook pages your reader becomes a Fan rather than a Friend.

Many people are confused about when they should use each of the types of "thing" in Facebook - so it's worth remembering that:

Facebook has

Profiles - accounts for flesh-and-blood, living, breathing, individual people
Pages - for websites, brands, and organisations that don't want to approve all their Facebook members
Groups - for organisations that want to approve individual members who join (and in return, group-owners can send private messages to individual members.

The tools that Facebook provides for promoting the each of these are slightly different.

Making a badge to promote a Facebook Page:

Log into Facebook with a profile (ie personal account) that has administrator rights for the page you want to promote.

View all your Pages from the Pages link in the left sidebar

Select the Page you want to promote, by clicking on its name.

Click Edit Info: this shows you the basic information stored in Facebook about the thing that the page is for (you may like to edit it while you're here).

Click the Edit button (on the right side of the screen)

Choose the Resources tab from the left-hand menu bar

Choose Social Plugins, from the Connect with People category.
(This takes you to the Developers / Documentation page - I could have just linked directly to it - but Facebook change things around sometimes, so I think it's helpful to understand how to get things based on their thinking.)

Choose Like Box.

Set the options for the item

Facebook Page URL - this needs to be changed to the URL of your page.
You may need to open Facebook again in another tab to see this
If you have less than 25 Fans already, then your page's URL will be something like http://www.facebook.com/pages/Blogger-Hints-and-Tips/144194435594821 and you can get it by copying the link from the list of Pages for your account.
Once you have more than 25 fans, you can choose a page-url on the Edit Info > Username screen.
Width - choose a value that suits the space on your template where you want to put the box.
Show faces, show header: choose options that suit your purpose and blog template
Show stream: this controls whether you show posting from the Page inside your blog

As you choose options, the preview on the right updates to show what the button will look like:

When you are happy with the selections, choose Get Code.

Currently, there are options for an iframe based button, or XFBML which uses Javascript - only use it if you are sure that all your visitors will have it enabled.

Copy the code provided

Install the code into your blog - there several options for installing the HTML, depending on where you want to put the badge or button.

What your visitors will see

People who visit your blog through a web-browser will see a Facebook area, including a Like button and whatever other options you have chosen.

This can be quite a powerful tool: you can easily use two or three different combinations on different parts of your blog: one that has no border, no faces and no header but does show a Stream can effectively look like a "live" feed from your Facebook page to your blog, while another one with different options can show off the size of your fan-base.

Be aware that the Like button shown in this button gives people the option to Like your Page in facebook - not your blog directly, and not the current post that they are reading. If you want them to be able to Like your blog or blog-posts, you need to provide this option separately (and many of your visitors are likely to be confused by the different).

As always, people who read your blog via a feed reader (Bloglines, Google Reader, etc), or by email subscription (eg having used follow-by-email) may not see the Facebook item, depending on where is places and what options their email program has.

Customizing the code:

You can change the characteristics of the box without having to generate the code from Facebook again. For example you can later the width and/or height - just remember to do it in both of the places required if you are using the iframe option:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Hints-and-Tips%2F144194435594821&width=160&colorscheme=light&show_faces=false&border_color=purple&stream=true&header=false&height=395" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:160px; height:395px;" allowTransparency="true"></iframe>

fyi, I could have just quoted this code, and said to use it on your blog. But I don't usually do this when I'm describing how to link Blogger and any third party product, because it's likely that Facebook (or whoever) will change their code in the future: it's always safest to get the most up-to-date copy of the code from the source-site when you need it.

The facebook page where you get the code from also has more information about controls you can set in the code, too. Check it out for more information.

Friday 3 June 2011

Showing a PowerPoint presentation in your blog as an embedded slideshow

You can show content from a PowerPoint presentation inside your blog, by converting it to a Google Docs document and then using the "embed" code that Docs provide.

Overview:

This article shows you how to put a PowerPoint file into Google Docs, and then use the "Publish" feature from Docs to show the presentation right inside your blog - in slideshow mode.

For many presentations, this is currently my favourite way of displaying them, because it gives a very nice-looking display.   Here's an example of a presentation displayed like this:

Follow these steps to embed a presentation in your blog:

1 Upload the PowerPoint file to Google Docs, making sure that the "Convert documents, presentations, and spreadsheets to the corresponding Google Docs formats"... option is ticked.

2 Once it's uploaded, choose Return to Google Docs

3 Open the presentation (by clicking on it)

4 Click on the Share button in the top RIGHT corner of the Presentation Editor, and choose Publish / Embed.
(Note: for this option, you must be inside the Presentation Editor. You know you are in the correct place if the Share button is on the far right of the screen.   If it's on the left, then you are possibly going to share the document, but this won't get you the embedding code).

5 Click the Publish Document button.

6 Choose your options.   These include:

a player size (I like Medium for presentations that are going inside posts),
how fast to advance slides,
whether to start the presentation as soon as the player loads (I don't like this - readers may want time to take in the rest of the article first)
what to do when the last slide is reached.

7 Copy the HTML that is provided.

8 Return to Blogger, and paste in the HTML code, in any of the ways that 3rd party HTML can be added.

What your visitors see:

People who read your blog directly through a web-browser see the first slide of the presentation, with controls (play, back, forward) in the bottom left corner. When they click the Play icon, the slideshow plays, and at the end it shows a summary slide and gives the code that your reader can use to embed the same slideshow themselves.

I'm still investigating what people who see your blog in a feed reader (eg Google Reader) or via an email subscription see: it's possible that the embedded slideshow won't actually display in these tools.

Are you reading this in a feed-reader (other than Google Reader)?
I'd be very grateful if you could leave a comment about how the slideshow looks for you.

Wednesday 1 June 2011

Taking action when someone has copied your blog without permission

This article is about the steps you can take when someone has made an unauthorized copy of something that is published on your blog.

Finding out that your blog has been copied

Previously, I've described how copyright applies to blogs in very general terms, and the steps you can take to apply copyright protection to your blog.

Even if you follow these these steps, if you put material onto the internet it is quite likely that someone will copy it.

This maybe done out of naivety, or as a deliberate attempt to rip you off, or as part of an organised spam-blogging ("splogging") operation.

There are several way you might find out that someone has copied your work:

You, or your friends, notice it
Maybe you or one of you readers searched for a certain phrase and you found your content elsewhere. Or maybe you found a link to an identical post on a help-forum or discussion board. If you use a lot of in-post linking (ie you link to another article in your content), and notice you are getting a lot of visits from somewhere unusual, then you might visit that site and find your post copied word-for-word, including the unchanged links.

Google's spam bots notice it:
If you get an email or a notice saying that your blog has been identified as potential spam, then one of the possibilities is that a real spammer has chosen your content.

If you found out that someone has copied you work because Google's spam-bots detected the problem, then you simply need to follow the instructions in the email that Google sent you, or consult the Blogger Help Forums. In short, you will be advised about a four step process that you need to follow. This is tedious, but the nice part is that Google is dealing with the copy-cat for you, and (if you're not a spammer) you'll get your blog back.

If you find out some other way, then you need to decide what do to about the problem (if indeed you believe is is a problem). This is closely linked to what you want to achieve - this could be any of:

Do nothing - if you don't mind being copied, and you're willing to risk being incorrectly identified as a spammer
Getting the copied work taken down
Leaving the copy in place, with your name or URL added beside it
Being paid compensation
Receiving a public apology

and I'm sure there are other possible remedies, too.

Once you know what you want to achieve, you can plan what steps you need to take, based on the notes in the next section.

Reality check: There is nothing wrong with being ambitious and wanting to receive $10M compensation. But unless you can afford really good lawyers, it might be a good idea to have a backup plan which involves a realistic goal too, eg having your name added to the copyright materials, or having them taken down.

Steps for resolving copyright problems

Start the easy way

Unless you're certain that the copying was deliberate and malicious, the first step is most cases is to send a nice email to the person who made the copy, telling them that it's yours and what you want done about it. (You might need to just leave a comment on their blog, if no email address is provided.)

Report them to their internet service provider

The obvious first step if politeness doesn't work is to complain to their web-host:

If they use Blogger (ie their URL is WHATEVER.blogspot.com, or they have a custom domain but the source-code on their site looks like Blogger code),
then you should contact Google through this page: http://www.google.com/blogger_dmca.html
Google have a very thorough process for dealing with claims of content stealing - and if the other site that you say has stolen your work is also published in Blogger, they can look at the dates in their database to see who actually published it first.
Make sure that you read all the details of Blogger's policies before you submit a complaint: they don't like malicious complaints, and you could be fined quite heavily if you claim that you own something which you don't really own.

If the person who has copied your work isn't using Blogger, you may need to do some detective work with whois (use Google-search it to find a whois service for the domain you're looking for) to see who the host is, and what process this host uses to resolve copy-right complaints.
This could be particularly difficult to do if they're not located in the same country that you are (so their laws will be different), or if they use a different language.

If the person who has copied your work has put it into YouTube, you can use information and tools on YouTube's opyright page.

Complain to other services:

If their web-service-provider can't or won't help, then you could try reporting them to other services that the use.

For instance many websites are also on Facebook: if the contents includes your material, or links to a website that's distributing your copyright material, you may be able to use Facebook's intellectual property violation reporting process. (I haven't tried it myself, but have been told that this can be particularly effective.)

If they show advertising on their site, then complaining to either the advertisers, or to the company that organises the advertising programme, may be effective. AdSense is quite sensitive to not having it's ads shown along with copyright violations, and provides a policy violation reporting form that you can let them know about the problem.

Charge them

Some people have had success from sending the offender a bill for use of your work. This takes a bit of thought: if they pay the invoice, then legally you may have licensed them to use your work for far less than it is worth. On the other hand, if the amount that you ask them for is ridiculously high, they will probably just laugh and ignore you.

Threaten legal action

This can be fun: write a very formal-sounding letter demanding that they cease-and-desist from using your work (name it very specifically) by a certain date, and advising that failure to do so may incur penalties including but not limited to commencement of legal proceedings for in which you will be looking for legal expenses as well as damaged incurred.

If you would actually be willing to sue the person (see the section below), then consult a lawyer, and get them to send the letter. But if there's no chance that you actually will sue (and most bloggers simply don't have the time, resources or levels of proof to do so), just make the letter sound good. If necessary, get a friend who can write pompous-sounding letters to draft it for you. Send it by regular mail - emails are too easily ignored - and make it look official.

Finding the address to send a letter to can be a challenge - one option is to scour your copy-cat's work, and see if you can find their company or personal details on LinkedIn (most are smart enough to hide themselves on Facebook). And if you can, then complaining to their boss may be an option, too, depending on your niche and whether their action might be harming their company's reputation.

Legal action

If all else fails, another option is to sue the person or organisation that copied your work. If you or the copy-cat are in the USA, then the Digital Millennium Copyright Act (DMCA) provides an approach for this. But if you and they are in different countries, then different laws and processes may apply. But no matter where you are, two things are likely:

You will need to hire a lawyer - so it may be expensive and take a lot of time, and

You may need to prove that you really did create the work, and when it was made.

The second point is where copyright registration services come in to play: they provide evidence that you really had created the work as at a certain date. Unfortunately this is one of the ironies of copyright: listing your material with a copyright service does nothing to stop anyone using it. But if you don't list it shortly after it's created, you probably won't have any evidence if you ever get to the point of wanting to sue (or even formally complain about) someone who has copied your work.

There are some other issues with copyright services too:

It can be difficult to list a blog, which by its nature has different material being loaded very frequently.
You won't necessarily know which services(s) to register with - because you don't know where someone who copies your work is located, so you won't know what services a court in your country will accept evidence from.

So, while I'm not advising you to avoid the registration services altogether, it's important carefully to choose when and how to use them.

Peer pressure / Name-and-shame

If the legal approach doesn't work, or would be too expensive, then another option is to use social pressure to convince your copy-cat that they need to stop copying your work etc. This can take a range of formats - eg, if a local small business has copied your photograph and isn't willing to compensate you, you might get all your friends to contact the business and threaten not to buy there again. Or you might start a Facebook campaign, or put a video on YouTube telling your side of a story. Whatever you do, make sure you that you:

Really know what you want to achieve: fame, a pay-off to stop the campaign etc
Consider the risks (ie what could go wrong) and whether they're worth it
Don't break the law yourself (it's not worth it, especially if you're the small guy), and
Think strategically about what you might do, and how this could affect the relationships in your area or niche: some people are just too much trouble to have an enemies.

DISCLAIMER

This article contains general advice about the copyright issues faced by people who use Blogger. It cannot cover every possible case or specific legal systems.

If you need legal advice about a particular situation, consult a lawyer, ideally one who is familiar with copyright law in your country.

I do not, under any circumstances, suggest using illegal approaches - threats of violence, sabotage, etc.

Copyright, Blogs and Bloggers, an Introduction

Tools for applying copyright protection to your blog

Putting 3rd party HTML (eg a Creative Commons licence) into your Blog

Removing the Attribution Gadget from your Blog