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.

Background

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 really 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 now introduced social-media buttons which can 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

1. Put some dummy text into the URL to share field
2. Get the code
3. 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&amp;xfbml=1"></script><fb:like href="DUMMY-TEXT" send="false" width="450" show_faces="true" font=""></fb:like>

to

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=173511999379139&amp;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).


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.

---

Related Articles: 



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

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.)

---

Related Articles: 



Understanding Google accounts

Understand google-apps accounts

Transferring blog ownership

Setting up your custom domain

Auto-renewing your blog's custom domain

Amazon Associates and Blogger

Linking Blogs and Websites.

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.

---

Related Articles: 



Understanding Google accounts

Resolving conflicting Google and Google Apps accounts

Setting up your custom domain

Auto-renewing your blog's custom domain

AdSense and AdWords - understanding the difference

File hosting options

Using a "foreign" custom domain for your blog

Transferring blog ownership

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:

1. The place (gadget or page or post) where the search-box goes. and
2. 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:

1. There is no search-query bar at the top of the place (post, page, gadet) where the results are displayed, and
2. 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

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.

---

Related Articles:



Get your posts right before you publish them for all to see

What is RSS and why it matters for your blog

Getting the HTML to put a picture into your blog

Putting text and pictures alongside each other

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.

---

Related Articles:

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
.

Adding an RSS feed icon to your blog, using Feedburner

Feedburner's chicklets are used to add the standard "orange radar" button to your blog.  This lets readers to subscribe the RSS feed of your choice.   The information is targeted to Blogger users, but most of it applies to anyone who uses Feedburner.

What is a Chicklet, and why you need one:

Previously I've explained how to remove the (ugly and confusing) "Subscribe to Posts (atom)" link from your blog, and why RSS / Subscribe to Posts is important to your blog and how to create a Feedburner feed for it.

But an RSS feed is useless unless people subscribe to it.  So as well as making the feed, you also need to put something in your blog that lets your readers sign up for it.

A standard option for this is the orange square with "radar" markings on it, which many people call a "chicklet" (since it lets your viewer - the chicken? - have access to the feed you are providing).

Feedburner also has options for:

• Using a custom icon from popular web aggregators
  I'm not sure that this is a great idea, because you don't know what feed-reader software your readers actually use, and the whole point of a feed is that you don't dictate how people see your blog.

• Using an icon that promotes Feedburner.  This cute, but I've never seen anyone use it.

How to add a chicklet to you blog:

Log in to Feedburner, using the Google account that owns the feed.

Click on the name of the feed you want to provide a subscription tool for.

Choose the Publicize tab.

Choose the Chicklet Chooser option, from the left navigation bar.

Choose one of the options shown:  the default one is the standard-size RSS-radar-button.

Scroll to the bottom of the screen and either

• Copy the HTML that is shown, and add it to your blog in the same way that you would add any other 3rd party HTML,
  
  OR

• Choose Blogger from the drop down list beside "use as a widget in", and click Go. 
  
  This takes you to a Blogger screen where you can choose which blog you want to add the gadget to (if your current login has more than one), and what title to use for it. 
  
  When this is done, click Add Widget. 
  
  This takes you to the Design > Page Elements tab, where you can drag-and-drop the widget to wherever you want it.  
  (When I tried it just now, instead of the layout screen I got a "bad request" message.  However pressing Save and then View Blog brought up the blog with the gadget showing, and I was able to go back and edit the layout later on).

What your readers see:

Your readers will see an item, wherever you put it, that looks like this:

Subscribe in a reader

or this:

or

or something similar, depending on what option you chose from the Chicklet Chooser screen.

When someone clicks on one of these items, they are taken to either a screen where they choose which feed-reader software to add your site to (if you've used the first option), or to the specific feed-reader software.

Customising the widget code:

If you use the generic RSS button, then you may want to customise the widget code slightly:  It looks ugly not to have a space between the picture and the word "Subscribe" - and it's good to have the phrase "RSS" on the screen because that is what feed-reader-savvy people generally search for when they're looking at a site and want to find the subscribe option.  I also prefer if the subscribe action opens in a new tab/window, rather than taking the reader away from my blog.

This is quite easy to do, if you put a few line breaks in so you can see that

• the code is actually two separate link statements
• the first one has an image (the orange "radar bars" that it takes from Feedburner)
• the second is a text link
• both of them link to the RSS feed address

So it's quite easy to add a couple of extra spaces (shown as &nbsp; ), change the text as I've done below, and add   target="_blank"   to both of the links

<a href="http://feeds.feedburner.com/Blogger-hints-and-tips" rel="alternate" type="application/rss+xml" target="_blank">
<img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="vertical-align:middle;border:0"/>
</a>

&nbsp; &nbsp; &nbsp;

<a href="http://feeds.feedburner.com/Blogger-hints-and-tips" rel="alternate" type="application/rss+xml" target="_blank">

Subscribe via RSS

</a>

I generally also put the option to subscribe to my blog by email and the Feedburner FeedCount item (which shows the number of subscribers) in the same area, to give people options, and to encourage them to subscribe.

---

Related Articles:

Using Feedburner to give your blog a Subscribe by Email option

Adding 3rd party HTML to your blog

Why RSS / Subscribe to Posts is important to your blog

How to create a Feedburner feed for your blog

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.

---

Related Articles: 




Components in your blog

Types of blog template.

Adding a new CSS rule to your blog's template

Setting up Google Analytics for your blog

Adding a line between your posts

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:

<!-- Facebook Badge START --><a href="http://en-gb.facebook.com/WHOEVER" target="_TOP" style="font-family: &quot;lucida grande&quot;,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: &quot;lucida grande&quot;,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;">&nbsp;|&nbsp;</span>

<a href="http://en-gb.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,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><!-- Facebook Badge END -->

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.

---

Related Articles: 



Putting HTML from a third-party into your blog

Adding a Facebook "Page" badge to your website

Tools for linking Blogger and the Social Networking sites

Putting a Facebook "share this" button on your blog

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&amp;width=160&amp;colorscheme=light&amp;show_faces=false&amp;border_color=purple&amp;stream=true&amp;header=false&amp;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.

---

Related Articles: 



Putting HTML from a third-party into your blog

How the data in Blogger blogs is organised

Linking Blogs and Websites

Tools for linking Blogger and the Social Networking sites

Putting a Facebook "share this" button on your blog

Copyright, Blogs and Bloggers

Why RSS / Subscribe to Posts is important for bloggers