Tips and Trick

This article is about the types of template that apply to your Blogger blog, and how you can work out what type of template you have.  What types of template does Blogger have: Blogger users templates to know how to structure your blog:   all template-types except the new Dynamic-view templates allow you a lot of freedom to customise how your blog looks. Ttemplates are the "framework" that Blogger uses to let us do this, but still offer the features that a blogging platform provides. Currently, each blog made with Blogger has: One post template: There is only one type of post template, adn it is edited from Layout > Blog Posts - and not customisable apart from this One design template:   This template may be one of four different types:  Dynamic, Designer, Layout and Custom.   Also, each template may have a mobile template, which is used only when someone views the blog using a mobile device (eg smartphone).   A blog only has a mobile template if this has been enabled for it (on the Template screen). When you have looked at a few blogger options, you will begin to recognise the different types of templates, just from the way blogs made with them look on screen.    The following sections describe the types of design templates (which include Designer templates, just to be confusing), and show you how to tell if your blog is using them. There is also a very quick way to find out the name of your template - often knowing the name will let a Blogger Helper understand what the problem is, and so make suggestions about how to fix it. The Custom Template: The first design template that Blogger had was a custom template - and there are still some blogs with these today. With a custom template, the only way to change the layout of your blog is to edit the HTML;  there are no widgets, and no drag-and-drop editor for positioning things. How to work out if you have a Custom template: Post-Sept 2011 Blogger (aka the new interface):   If you go into the Template tab, and the first thing you see is "Give your blog a whole new look!", and at the bottom of the screen there is an area called "Edit Template HTML", then your blog is using a Classic template. Pre-Sept 2011 Blogger (aka the old interface):   If your menu options include "Template", but don't include "Layout", then you have a Custom template. Layout Template: The Layout template was the next to be introduced.   It includes the Page Elements editor and the idea of Gadgets (previously called Widgets and Page Items).  This was a great improvement because it let blogger users move items around their design by drag-and-drop, instead of by editing HTML. These templates (Minima, Rounders, ....) were a great step forward in the early 21st century, but web-technology has moved on.     They are no longer available to choose in the new Blogger interface, but  can still be selected in the old interface. How to work out if you have a Layout template: Post-Sept 2011 Blogger (aka the new interface):   Go to the Templates tab, and choose Customize.   If there is no template name given underneath "Live on Blog", and no template selected in the area to the right, then you have a Layout template. Pre-Sept 2011 Blogger (aka the old interface):   Go to the Design tab and choose Template Designer. If the Background and Layout tabs (down the left hand side) have message like "Not applicale for this template", then you have a Layout template.

This article looks at how to place AdSense ad units right inside Posts or Pages on a Blogspot blog.



Background:

Once you have signed up for AdSense, you can easily put Adsense ads into blogs.  Blogger has options that let you place ads gadgets in the page template, without seeing any HTML code.  Ads may be placed in the sidebar(s) and in the footer of each post.

But there are limitations to this, and sometimes ads in your sidebar aren't the best approach, because readers easily become "ad-blind" and ignore them.


A Better Approach?

To make it more likely that readers will see your ads, you may want to put them into the body of your posts, as I have done underneath this paragraph.



This won't always be better than having ads in your sidebars or immediately above or below your posts - it all depends on what your blog is about, and how people read it.   But it may be worth doing to test to see which placement is better for your blog.


How to put Adsense Ads into Posts or Pages:

Blogger doesn't have any tools to support this.  So you need to put the AdSense code into your posts yourself.   While this is a bit fiddly, it does mean that you have a lot of control over where the ads go, and how they look, including the option to show image-only ads.

Follow these steps:

1. Get the ad-code, and copy into your clipboard.  (The AdSense help page for this is here.)
2. In the Blogger editor, write the contents of the post.
3. In  Options (under Post Settings in the bar on the right of the Post Editor), check that "Use <br /> tags" is chosen for the Line Breaks setting.
4. Go to the place where you want to put the ad.  Put in some "marker text" (a word that isn't used the post, eg "XXX" ).
5. Align the marker text  the way you want the ad aligned (eg centered).
6. Choose the "HTML" tab, and go to the marker-text.
7. Replace the marker-text with the ad-text from step 1 (ie paste it in)
8. If necessary, put line-breaks (<br />) before or after the ad.
9. Publish the post, and check that it looks the way you meant it to.

Things to be aware of:

Google will only display a certain number of ad-units per page.   Even if you try to show more than this by putting the code into posts, ads will not be shown.

Also, having ads inside your posts does not mean that they will show up inside the RSS feed of your posts, or inside emailed posts created with the follow-by-email gadget or some other way:   If you use these tools, then you may want to enable AdSense for Feeds.

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

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.

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

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.