Pärnumaa neljapäevak – Rannametsa (mai 2010)

Pärnumaa Rannametsa orienteerumiskaart
Rannametsa orienteerumiskaart

Olen jälle Pärnu mail tagasi. Eelmisel nädalal käisin Tallinna päevakutel. Teisipäeval Hiiul ja neljapäeval Paldiskis. Seekord oli Pärnumaa päevak juba tuttavas piirkonnas – samas kandis, kus toimus mai alguses Luitejooks. Teadsin, et maastik on füüsiliselt raske ja päevak Pärnust 36 kilomeetrit eemal. Otsustasin oma füüsilised võimed proovile panna sinna maastikurattaga kohale sõites.

Distantsi ~36 km väntasin 1.5 tunniga. Rannametsas vahetasin kiirelt riided, võtsin kaardi, tankisin vett ja šokolaadi ning lõdvestasin/puhkasin kaarti uurides umbes 15 minutit. Start! Continue reading Pärnumaa neljapäevak – Rannametsa (mai 2010)

Kuidas siduda orienteerumiseks jalatsi paelu nii, et need lahti ei tule?

Integrator orienteering shoelaces tieing for wet conditions
Integrator orienteerumisjalats

Jooksmise ajal ja eriti metsas orienteerudes võib tihti juhtuda, et paelad tulevad lahti. Seda kõige enam märgades tingimustes või tihedat võsa läbides. Loomulikult on selline juhtum ääretult ebameeldiv, sest paelad tuleb uuesti kinni siduda. Lisaks tarbetule ajakulule häirib paelte lahtitulek jooksurütmi. Continue reading Kuidas siduda orienteerumiseks jalatsi paelu nii, et need lahti ei tule?

Pärnumaa neljapäevak Uulu-Metsaküla-Lepaküla

Pärnumaa, Uulu, Metsaküla, Lepaküla, orienteerumiskaart Hooaja esimene o-jooks, mille võib isegi õnnestunuks lugeda. Tegemist oli Uulu ja Metsaküla kandi metsaga ning sedakorda pakuti tavarada 8.20 km. See oli mul elus teine kord tavarada joosta. Esimene katse oli kolm nädalat tagasi Raekülas. Harjumaal olen jooksnud M21B klassi palju, aga see on tavaliselt paar kilomeetrit lühem. Tundub, et tavarada sobib mulle. Just seepärast, et ma ei pinguta jooksukiirusega kohe üle ja suudan orienteerumist rohkem kontrolli all hoida. Eelmisel nädalal oli lühirada ja peamiselt liigse kiirustamise tõttu oli see üks pikk ebaõnnestumiste jada Niidupargis. Continue reading Pärnumaa neljapäevak Uulu-Metsaküla-Lepaküla

Multiple Facebook Like buttons on one page

Today I played around with the new exiting Like button plugin. Got it working very easily by following a good tutorial on how to add XFBML Like button to a webpage.

Check out the demo! View a demo page in this blog with 20 posts and 20 like buttons

That’s great, but I needed to add multiple Like buttons to one page and every button had to be about a different object (product in my case). I had many ideas, ranging from dynamically changing the meta tags in DOM to using container iframes. Finally got it working with iframes. Meaning I used an iframe of my own, which encapsulated the XFBML code for a Like button. (Later I found even simpler method with no iframes, check the UPDATE)

Here’s the result on a shopping comparison site in Estonia. The feature is still experimental, hence the special ‘multilike’ parameter in the url. The iframes are added when page scrolling event occurs. Some sort of deferring is necessary, because loading of the buttons is very slow! Slowness is the main reason I haven’t published the feature yet.

UPDATE: (a faster non iframe method)

Update (26.09.2010) View a demo page in this blog with 20 posts and 20 like buttons

Update (19.05.2010): Russ asked in the comments, which method should be preferred? I’d recommend to use the method in this paragraph. The iframe method is slower, uses more resources and is a bit more complicated.

There’s a simpler way. Add the XFBML code to every object on the page with unique href parameter per one fb:like. That url must contain the opengraph meta tags. Scroll down to see what tags are necessary. Also add the javascript which initialized Like buttons. Look below next paragraph.

<div class="product">
  <fb:like href="YOUR_URL_WHICH_HAS_META_TAGS" layout="button_count"
  show_faces="false" width="240" height="40"
  action="like" colorscheme="light"></fb:like>
</div>

<div class="product">
  <fb:like href="ANOTHER_URL_WHICH_HAS_META_TAGS" layout="button_count"
  show_faces="false" width="240" height="40"
  action="like" colorscheme="light"></fb:like>
</div>

The product list page itself does not have any opengraph meta tags. All the info is pulled from those url’s you provided in fb:like href parameter. This approach can be seen here. Which meta tags to add to the product page? Scroll down to see them.

The iframe method (slower, not recommended):

First create content of your iframe. For example:

<!DOCTYPE HTML>
<html xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta property="og:url" content="URL_OF_THE_RESOURCE_PEOPLE_LIKE_(PRODUCT_PAGE_ETC)"/>
</head>
<body>
<fb:like layout="button_count" show_faces="false" width="240" height="40"
action="like" colorscheme="light"></fb:like>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APP_ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>

In the product list I added to every product the following html:

<iframe scrolling="no" frameborder="0" allowTransparency="true"
src="URL_OF_THE_IFRAME_RESOURCE"></iframe>

What of the special meta tags?

These should be added to the Likeable resource. The same url that was added inside the iframe meta og:url property, must contain those meta tags. Facebook will download those meta tags when someone clicks Like.

For example on this product’s page I added the following:

<meta property="og:title" content="TITLE"/>
<meta property="og:url" content="http://sopso.com/otsi/u-Z5Upj2sej"/>
<meta property="og:image" content="ABSOLUTE_IMAGE_URL"/>
<meta property="og:description" content="DESCRIPTION"/>
<meta property="og:site_name" content="YOUR_SITE'S_NAME"/>
<meta property="og:type" content="product"/>
<meta property="fb:app_id" content="APP_ID"/>

You can also add fb:admins property, but remember you should only have either fb:app_id or fb:admins.

Here’s how the Like buttons looks like when I click on the Like button:

Multiple Like buttons and comment box on Sopso.com
Multiple Like buttons and comment box on Sopso.com

And here’s how the result will look like on your Facebook Wall:

Like Button example post on Facebook Wall
Like Button example post on Facebook Wall

Hopefully this will give you some ideas on how to utilize the Like button. Let me know what you think by leaving your thoughts in the comment box below. And of course you can click Like and share this post.