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

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

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.

---

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

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

Renault Sandero Privilège Automático

Aproveitando o recente face-lift, o Sandero logo depois já ganhou outra novidade: o câmbio automático que a marca sempre teve no país. Isso é um bom diferencial das marcas francesas; até agora todas preferem usar estes em vez de criar um automatizado.  No Sandero ele chega exclusivo para a topo-de-linha, Privilège 1.6 16v, que passa a sair por R$ 43.490 enquanto a manual 1.6 8v teve redução para R$ 40.400, mantendo as listas de itens.

Moderno, o equipamento tem quatro marchas com opção de trocas sequenciais, e foi projetado para durar longas quilometragens com baixo custo de manutenção. E ainda é adaptativo, dispondo de nove programas de condução para escolher o que mais se adequa ao perfil do motorista, detectando por exemplo uma tocada mais esportiva, e respondendo a isso permitindo trocas de marchas em regime de rotações mais altas. Seu motor é a versão flexível do mesmo de sempre desde que a Renault chegou no país, com até 112 cv.

Read more > Renault Sandero Privilège Automático

Kia Carnival

Alguém se lembra da Carnival? Ela chegou ao país no final de 2008, antes de a Kia meio que conquistar o mundo com a nova identidade visual que vem adotando nos modelos mais recentes. Com isso, a midivan acabou sofrendo do mesmo mal que a grande maioria dos carros orientais no Brasil até meados dos anos 2000: o visual equipado com a completa falta de capacidade de chamar a atenção, seja nas ruas ou até mesmo nas próprias propagandas.

E por mais que isso pareça subjetivo demais para definir a compra de um carro, na verdade é tão importante que outros “conterrâneos”, como Nissan Sentra e Tiida, nunca chegassem a deslanchar em vendas no país. Porém, ainda não é dessa vez que a carnivalesca traz um desenho arrebatador – só ganhou nova grade dianteira para sintonizá-la com o resto da linha sem custos muito grandes. Mas a parte técnica merece destaque: ganhou um motor 3.5 V6 mais eficiente, com 276 cv e 34,2 kgfm, e câmbio automático sequencial de seis marchas.

Mas o lado bom é que ganhou outra versão, também muito bem equipada. Sempre levando oito pessoas, a básica sai por R$ 124.900 e traz airbag duplo, freios com ABS e EBD, sistema de som multimídia, retrovisores externos antiembaçantes e direção hidráulica. Já a topo-de-linha agrega interior revestido em couro, computador de bordo, ar-condicionado digital, rodas de 17’’, câmera para a ré com tela de LCD e airbags laterais e de cortina, por R$ 154.900.

Read more > Kia Carnival

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.

Read more > Conflicting Google and Google Apps accounts

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

Read more > Google Apps, Google Accounts and Blogger

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

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

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

Read more > Saving a post if the Publish button doesn't work

Acer Aspire One Happy N55C

Specifications Acer Aspire One Happy N55C

• Processor: Intel ® ™ processor Atom N550 (1.5 GHz, 1 MB Cache)

• Chipset: Intel NM10

• Memory: 1GB DDR3 PC-8500 SODIMM, Max. Memory 1 GB (1 DIMM)

• Video: Intel ® Graphics Media Accelerator 3150 256 MB (shared)

• Display:. 10.1 "WSVGA LED, Max Resolution 1024 x 600, LED CrystalBrite

• Hard Drive: 160 GB 5400 RPM

• Networking Integrated, Speed ​​10/100 Mbps

• Wifi, Protocol IEEE 802.11b, IEEE 802.11g

• Keyboard: QWERTY 84 keys

• Card Reader: SD, MMC

• Interface: 3x USB 2.0, VGA, LAN, Audio

• Webcam

• Battery: 6-cell Lithium-ion Rechargeable Battery

• Dimensions (WHD): 258.5 x 24 x 185 mm

• Weight: 1.25 kg

Read more > Acer Aspire One Happy N55C

VAIO P Series 8-inch Notebook

Sony some time ago finally confirmed the rumors that have circulated since a long time by launching a 'notebook' VAIO P Series 8-inch design that has been updated. Notebooks will continue to focus on aspect of ultra-portability, but has some additional features like accelerometer touchpad, mouse buttons, and GPS.

Vaio notebook series that has been refurbished it only weighs 632 grams and of course give an 8-inch display with a native resolution of 1600 × 768. The full specification is to use an Intel Atom Z540 1.86 GHz, 2GB RAM, GMA 500 integrated graphics, 64GB of flash storage, digital compass, Motion Eye webcam, 802.11b/g/n WiFi, 3G, Bluetooth 2.1, and battery which can be used in long time of 5 hours of usage.

Sony Vaio P series of new 8-inch cursory look like a bag lady is going to use the OS Windows 7 Home Premium (32bit) and available in various colors (black, white, orange, green and pink). For the territory of the United States has opened the orders, while for the new global will be available next month.

Read more > VAIO P Series 8-inch Notebook

Fiat Bravo T-Jet

Depois de desembarcar no país em versões de base e luxuosa, o novo hatchback médio da Fiat ganha a estilosa T-Jet como topo-de-linha. Partindo de R$ 68.950, ela honra a marca ao manter a tradição iniciada por Uno e Tempra Turbo, de ter versões com motores turbinados para fazer a linha esportiva da casa. Apesar de que já se sabe que esses modelos não vão ter volumes de venda gigantes, seu maior propósito de existência é outro.

Entretanto, é justamente esse preço alto que acaba tornando estas versões tão desejadas. Por mais que o cliente comum ao longo dos tempos acabasse levando o Tempra Stile, Marea ELX e agora Linea Essence, ele sempre passa pelos momentos de forte desejo por ter a lendária versão esportiva, em especial quando vem equipada com o tão emblemático turbo, item que vem fazendo a fama de incontáveis esportivos ao redor do mundo.

Mas o passar dos anos só fez bem ao mais novo turbinado italiano vendido no Brasil. Por fora suas alterações mantiveram a discrição típica de um esportivo de classe, como saias laterais, ponteira dupla do escape, e as belíssimas rodas de 18 polegadas, opcionais. E ele aumenta o capricho do interior ao trazer volante, manopla do câmbio e bancos com costuras vermelhas, e detalhes na mesma cor para outras peças.

E esta cabine divide com o Linea T-Jet a honra de apresentar o máximo de sofisticação da Fiat brasileira. Seu pacote de série é interminável, contemplando controles de tração e estabilidade, Hill Holder, freios ABS, ar-condicionado bizona, airbag duplo e sistema de som multimídia com comandos satélite, entre outros. Já os opcionais são artigos de alto luxo, como sete airbags, teto solar panorâmico Sky Window, faróis de xenon e sistema de som com tela de 6,5 polegadas no painel.

Sob o capô está o mesmo 1.4 turbo que equipa Punto e Linea, de 152 cv e 21,1 kgfm de torque com câmbio manual de seis marchas. Mas no Bravo ele ganhou a função OverBooster, que temporariamente aumenta a pressão do turbo para dar ainda mais torque ao motor (23 kgfm). Tudo isso ajuda o modelo a esquecer seus 1370 kg e fazer 0 a 100 km/h em 8,7 segundos, com uma velocidade máxima de 206 km/h, segundo a fábrica.

Read more > Fiat Bravo T-Jet

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
.

Read more > Showing a PowerPoint file in 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

Read more > Adding an RSS feed icon to your blog, using Feedburner

Fiat Punto Itália

A linha 2012 chegou também para o compacto premium da Fiat. Se o face-lift que o faria virar Punto Evo ainda não chegou, a versão Attractive aderiu à iniciativa da minivan Idea e passa a oferecer também a Série Especial Itália para incentivar a interação entre os dois país.  Mas no caso do compacto ela vem como um pacote de equipamentos para a versão Attractive 1.4, apostando no ótimo custo/benefício, mas com um toque Fiat de patriotismo.

Os itens vêm por 3.500 reais, oferecendo uma diferença de 45,6% caso fossem adquiridos por separado. Com isso, o modelo vem com ar-condicionado, sistema de som com MP3, direção hidráulica, volante com regulagem de profundidade e altura, console central prateado, faróis de neblina, retrovisores elétricos echave canivete com comandos para portas e vidros, entre outros.

E como se não bastasse tudo isso, o Punto ainda tem o diferencial dos itens exclusivos do tal pacote: faróis com máscara negra, lanternas fumê, spoiler traseiro e bonitas rodas de 16 polegadas. O motor é o 1.4 Fire de 86 cv, e o preço da versão básica parte de R$ 40.380.

Read more > Fiat Punto Itália

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

Read more > Editing your Blog's template: advantanges and disadvantages

Kia Cadenza

Se existe um nome que nunca mais será esquecido pela Kia, com certeza é o de Peter Schreyer. Este designer foi para ela um divisor de águas, porque a fez passar por uma melhoria sem tamanho. Deixou de ser apenas mais uma marca oriental que não se distinguia das conterrâneas em nada interessante, para passar a desfrutar de  reconhecimento mundial graças à forte identidade visual que seus modelos vêm adquirindo.

Este processo tem um mérito extra porque a qualidade dos produtos também deu um salto gigantesco. É o caso do Optima na sucessão ao Magentis, e agora do Cadenza, que ficou no lugar do esquisito Opirus. Esta mudança trouxe motor mais eficiente, redução de peso e cabine mais espaçosa sem aumento de tamanho externo, tudo isso envolto por um novo desenho que não tem como comparar ao antigo.

É isso mesmo. As linhas do Cadenza seguem as tendências mundiais mais recentes, de traços mais imponentes e com uma fluidez que traz ideia de esportividade, e ainda mantêm sintonia com as tendências da própria Kia. Sob o capô agora se tem o moderno motor Lambda 3.5 V6, que se vale do comando de válvulas variável para gerar 290 cv e 34,5 kgfm com câmbio automático de seis marchas.

Como era de se esperar, o sedã busca competir com Chrysler 300C, Toyota Camry e Chevrolet Omega também com o pacote de equipamentos. E este é bem generoso, com ar-condicionado dual-zone, farois de xenônio, bancos de couro, freios com ABS e ESP, seis airbags e um sistema keyless com várias funções, por R$ 119.900 com o duplo teto solar elétrico como opcional. A versão mais completa traz o interior em branco, por R$ 127.900.

Read more > Kia Cadenza