Blogger Followers now Integrated with Google Friend Connect

When Google Friend Connect was introduced a few months ago, it seemed inevitable that eventually this service would be closely integrated with Blogger to enable more social interaction around our blogs and social communities.



Today the Blogger Buzz blog announced that Friend Connect has been integrated with the Followers feature, enabling readers to log in and become a follower of your blog using their preferred login details (rather than using only their Google account).



As explained in the introductory post:

[...] Your readers come from across the web, from Yahoo, AOL, WordPress, Typepad... not just Blogger. That's why we're excited to announce that we've integrated Blogger Following with Google Friend Connect.



Friend Connect encourages readers to use one account (whether it's a Google account, a Yahoo, AIM or OpenID account) to follow any site - a Blogger blog, a WordPress blog, or any other site that has incorporated Friend Connect.

This integration promises more exposure for our blogs as those from other social networks can follow our posts, be updated of new articles and share their followings with friends from other social sites.

For those who have already set up "Following" on their Blogger blogs, the integration has already been set up for you. Your Followers widget will have already changed to reflect the new Friend Connect features and enable those using other login details to follow your site.



Here is what the Blogger Buster followers widget looks like now:

I did need to alter some of the colors to ensure it matched the overall design of my blog, but otherwise this was integrated with my overall design. If you need to edit some of the font colors for your own Followers widget, simply click the edit icon or go to Layout>Page Elements in your Blogger dashboard and choose the "Edit" link. On the pop-up screen you will be able to change the colors for the different text sections of your widget.



Here also is a video which the Blogger team created to explain "How to follow" a blog:

As hinted in the introductory post for Friend Connect integration, we're likely to see even more new features based on Google's social integration features over the next few months!



Feel free to let us know what you think of Friend Connect and the updated Followers widget by leaving your comments below.

Bx-Errors When Uploading New Templates? The Problem and the Fix

For around a week now, many Blogger users have experienced Bx-error codes when attempting to upload a new template to their blogs when previously these templates had worked just fine.



I discovered the reason for this on the Blogger Help Group after reading this post from Gatsby, a Blogger Employee:

Recently we changed the way our template editor accepts certain third party code, so that it is now less tolerant of certain templates. We did this because we had seen a lot of data corruption due to 'bad templates,' and we are trying to stave off some of these issues pre-emptively.



Now we realize that this has caused some inconvenience to folks, so we are re-thinking our decision and will post an update on that shortly. 

At the time of writing this post, I have not found any notification that this issue has been fixed, and many of my own custom templates do not work in their initial state (I'll explain the fix later in this article). Since there are so many bloggers complaining in the Blogger Help Group, I would imagine the Blogger Team will resolve this issue shortly.



However, in the meantime, many of us are stuck wondering what to do about our templates:

• Those wishing to upload a new template will at present need to fix their template in order to be able to use it.


• Those of us who design and distribute Blogger templates are facing complaints from our readers (and in some cases, from buyers of our premium themes). Should we "fix" all of these templates or wait for the Blogger team to resolve the template editor issue?

Personally I would prefer to wait a few more days for the Blogger Team to fix the issue (and hopefully provide some clarification of what is expected from third-party templates!). In the meantime, there is a method which we can use to fix the templates which initially receive a Bx-error code.

How to upload templates without receiving a bX-error code

Many Bloggers who have been unable to upload third party templates have received the following error codes:

• bx-bliced


• bX-ev85ll


• bX-39cc9q


• bX-y6cz0v 


• bX-982020

There are several other codes too, though the issue appears to be the same for all.



Thanks to joleneliow from the Blogger Help Group, many Blogger users have reported that the following fix resolves the issue, and they have been able to upload a new template successfully. Here are the steps you should take:

1. First of all, try to upload your new template in the Layout>Edit HTML section of your dashboard. Not all templates have been affected by this issue, so it is advisable to check before attempting to edit your template significantly. If you do receive a bX-error code when trying to upload your template, you should proceed to step 2.


2. If your new template is an XML file (with the .xml entension), browse to where this is located on your computer and right click the file. Choose to open with Notepad (or your favorite basic text editor). If your template is contained within a text file (for you to copy and paste into the template editor), simply open this with your text editor.


3. Search for every instance of b:widget id= in your template, for example:
   
   
   
   
   
   
   
   
   • b:widget id='Header1'
   
   
   • b:widget id='Blog1'
   
   
   • b:widget id='Label1'
   
   
   • b:widget id='HTML1'
   
   
   
   
   Replace each of these IDs with the next number up. For example, Header1 should become Header2; Blog1 should become Blog1, HTML3 should become HTML4 and so on.
   
   


4. Once you have changed each and every instance of widget id to a different number, you should save the template under a slightly different file name (to be aware of your altered file). If this is an XML file, be sure to save with the XML extension.


5. Now you have made these changes, attempt to upload your file again in the Layout>Edit HTML section of your Blogger dashboard. Now you should not receive the error code and will be able to upload your template.

If after following these steps you are still unable to upload your revised template, it is worthwhile to close your browser and delete all temporary internet files and cookies. Then restart your browser and try to upload again. Clearing all of these temporary files from your browser will ensure you receive a fresh page when editing your template. Previously when I have received error codes while editing Blogger templates, this technique has resolved the issue.



It may also be worthwhile using CCleaner to remove all such temporary files from your system. This is a free program which I use on a regular basis to clean up (and speed up) my computer.



I do hope that these techniques will enable you to upload a new template to your blog if you have previously received a bX-error code. If you know of any alternative solutions please do let us know about these by leaving a comment or sending me an email.

A message for the Blogger Team

I completely understand your concerns that certain third party templates may contain code which causes data corruption (and I'm sure most other Blogger users do too!). None of us enjoy experiencing issues with our blogs, and of course ensuring all templates contain no malicious code is of the utmost importance in maintaining a safe and enjoyable environment for Blogger users.



If it would be possible to post some guidelines for template developers, this would be truly appreciated! This way, those of us who design templates for Blogger can ensure we meet these guidelines in order for our templates to work correctly, without causing issues or bX-errors.



Another possible solution would be to provide a repository of "approved" third party templates, much like the one provided by Wordpress.com. I do understand that this would be a huge development and require much work, though I'm sure there would be many volunteers willing to help check templates before they become publicly available (myself included) and the Blogger community in general would be thrilled to have such a feature available!

How to easily add interactive Google Maps to your Blogger posts

Adding Google Maps integration to your web projects can offer visitors a more interactive experience of your website and assist the understanding of where events or business takes place.



In a recent project, I decided to utilize Blogger to create a website for a local business, and found that including Google Maps was of great benefit for visitors to understand where the business is located. However, of the many tutorials on the web which explain how to add Google Map functionality to our websites, I was unable to find clear instructions for how maps can be added to a Blogger powered blog.



Luckily I discovered two simple and highly useful techniques for adding Google Maps to blog posts with no editing of the template required.



In this post, I'll explain just how easy it is to add interactive Google Maps to your blog posts, which can offer your readers further insight into events, business or other local information which are relative to your site or blog posts.

An Overview of Google Maps and Blogger

Bloggers write for many different reasons: some to log their daily activities or keep in touch with friends and family; others to publicize their business, or earn an income online by providing useful and informative articles.



No matter what the genre of our subject matter, there may well be times when area maps relevant to our posts may enhance the experience for our readers. A family blogger for example could illustrate their holiday destination, while a business blog could demonstrate the location of their shops.



While Blogger's recent "Geotagging" feature proves useful to many Bloggers, there are times when nothing less than an actual map will do. And when you consider the interactivity offered by Google Maps (2d maps, sattelite views and even driving directions), the prospect of adding such a feature to our blogs becomes even more enticing!



Here, for example, is a map of Downing Street in London, England:





View Larger Map



Using this map, you can easily switch between the 2-dimensional map, a satellite view and even the terrain of the ares. You can move the map in any direction to see the surrounding area; zoom in and out for a closer/distant view, and incredibly you can link to driving directions too!



Such interactive elements can add a huge amount of interest to your posts, and can assist reader's interaction with your site, whether this be a deeper understanding of the locations you write about, or to help potential customers find out where your business is based.



There are two main methods you could use to add customizable Google Maps to your blog posts:

• Paste code for an Iframe generated by Google Maps


• Using the Google Maps creator from KabaWeb.com

Neither of these options requires you to edit your Blogger template in order to add these maps to your posts (or even your sidebar, if you prefer this location). Whats more, these can be added simply by copying and pasting a section of code to your posts.



Let's go through each of these methods in turn and explain the circumstances in which these would be most useful.

Adding an Iframe generated by Google Maps

I personally find this to be the easiest and most reliable method of adding Google Maps to Blogger posts.



To begin, simply visit the Google Maps website and type in the location you wish to display:

For example, if I wanted to display a map of The White House, I would type: "The White House, Washington DC, United States". The search results would then be displayed in a screen like this (click on the image for a larger preview):

If nescessary, we can narrow down the location by clicking one of the links on the left in order to get a more accurate map.



Once we have the map we would like to embed in our Blogger post, we need to retrieve the code required to display it.



To do this, click on the "Link"icon at the top right of the map:

In the pop-up, click "Customize and preview embedded map". This enables us to tweak the dimensions of the map to ensure it fits well within our blog post.



If you are using a default Blogger template, I would advise you to use the "Small" option which will measure 300px in width. This ensures the map will not overlap the space you have available for your blog posts which could mess up the overall layout of your blog.



In cases where you use a widened posts column, you could choose a larger map size or even specify your own dimensions. As a guide, the medium map size is 425px wide while the large embed is 640px. Your selection will automatically generate a new preview which gives a good idea of how well this will fit into your Blogger template design.

Finally, copy all of the code in the third section of this page to your clipboard. We will paste this into our Blogger post shortly.

How to embed the iframe code in your Blogger posts

To add your iframe code to a post, simply crewate a new post and paste the iframe code where you would like your map to appear within the post.



There are no hard and fast rules about how to embed the iframe code in your posts, though I do have some suggestions based on my own experiences:

• Using Blogger in Draft to write your posts makes the process easier! Just ensure the compose settings are set to "Interpret typed HTML", then you can use either the "Compose" or "Edit HTML" version depending on your personal preferences.


• If you prefer to use the regular Blogger post editor, ensure you paste the iframe code when using the "Edit HTML" tab, not the rich text composer. Unless you paste the iframe code in the Edit HTML page, your maps will not display properly.


• It can be easier to write your entire post, then paste the iframe code afterwards, where you would like your map to be displayed. This ensures you don't accidentally delete any of the code when editing, which would render your maps useless.

You should be able to preview how your post will appear after pasting the iframe code into your post, regardless of whether you use Blogger in Draft or the regular post editor, so be sure to check how everything looks before hitting the publish button!

When using Google's simple embedded maps may not be perfect for your needs

Using this simple embed code does not offer complete control over how your maps will appear. If you prefer to use a custom marker or more than one reference point on your maps, you would need a more advanced solution and extensive HTML code.



For a more customized option, I would advise you to check out KabaWeb's Google Maps creator which offers a simple interface for such advanced usage of Google Maps.

Using KabaWeb's Google Maps Creator

KabaWeb's Google Maps Creator allows greater control over how your maps and any information about the locations are displayed. Here for example is a map of 10 Downing Street in London with my choice of marker and a more personalized information bubble:

Using this version of an embedded Google Map is slightly more complicated that using the code generated by Google, though it is most useful to have greater control over the content of your maps.

Generating a Google Maps API key

In order to use the Google Maps Creator, you will need access to your own Google Maps API key, which you can generate from the API sign-up page.



To generate your key, you should accept the terms and conditions for use, then add your blog's URL where prompted. Your API key will be specific to your site, so you cannot use the same key elsewhere. This also means you cannot preview how the maps will appear within your posts (as the URL for preview pages will be different from that where your posts are published).



Once your API key has been generated, copy this long string of numbers and letters to Notepad or your favorite text editor. You will need to access this again soon.

Generating your maps

Once you have your API key saved, you can then generate your maps on the Google Maps Creator page.

Here you can set the following options depending on your requirements:

• Your map's name


• The location you wish to display. The preferred format for accuracy seems to be STREET-NAME, TOWN, COUNTRY.


• Map height and width: the default setting for width is 700px, too wide for most Blogger post sections. Be sure to reduce this to accomodate the settings for your own template


• Zoom size: unless you prefer to display a town or country view, you can leave the default setting of 14px


• Map Control: This chooses whether to display controls to the left of the map which visitors can use to zoom in and out


• Show map types bar: This chooses whether to display the switch to toggle between map, satellite and hybrid views.


• Show overview inset: This chooses whether to display the inset in the bottom right of the map, which offers a quick overview.


• Info Text: This is the text displayed in the balloon overlay. You can use plain text or HTML code to style how your informative text will appear.

Once you have changed the settings for your preferences, click the "Generate this map" button, which will update the map preview beneath to show how your embedded map will appear.

Embedding the map in your Blogger post

Once you have generated the map you wish to display, you can use the code provided to paste into your Blogger post (or an HTML/JavaScript widget in your sidebar).



To find the correct code, scroll right down the page until you see the section marked "Portable Code". This is the section of code which is best to use with Blogger powered blogs.



Copy the entire section of code in this box to your clipboard, then switch over to your Blogger post editor.



Be sure you have completely written your blog post before pasting the code for your map, especially if you are using the regular post editor (not Blogger in Draft). When attempting to use this version of an embedded Google Map, I have encountered errors when attempting to edit the post after embedding the code.



If you are using the regular post editor, switch to the Edit HTML tab and paste your code where you would like your map to appear. Then replace "YOURKEY" in the third line with the API key you obtained from the Google Maps developer pages. Then finally, publish your post.



Be sure not to switch back to the "Compose" tab after pasting the code for your map! If you do, the code will become corrupted and your maps will not display properly in the page.



When using Blogger in Draft to compose your posts, it is not necessary to switch to the "Edit HTML" tab. However, it is still advisable to paste the code only after you have finished writing your post, and do not switch between the different post editors.



Once you have published your post, you can take a look at your new maps in your blog posts!

Final thoughts

While Blogger's new Geotagging feature offers an interesting way to add locations to our posts, it is often the case where nothing less than a map will suffice in the understanding of our post content! Using the methods described above, you can easily add interesting and interactive Google Maps to your Blogger posts, ensuring your readers have a deeper understanding of the locations mentioned in your posts.



If you know of other simple methods to add maps to Blogger posts, please feel free to let us know by leaving your comments below.