Archive for the 'Tech' Category

Multiple Google +1 buttons on one page

June 02 2011 Published by Hillar Saare under Tech

Adding many +1 buttons on one page is super-easy, compared to adding many Facebook Like buttons on one page. It’s a matter of inserting one script tag in head section and a little bit of special markup to where ever you want the +1 buttons to appear. For you, who’d much rather see proof right away, here’s the demo page for multiple +1 buttons. If you prefer an example or tutorial of sorts, then … Continue Reading »

4 responses so far

Estonian domains are unreasonably expensive

June 03 2010 Published by Hillar Saare under Tech

I’ve been pondering to register hillarsaare.* domain since January. I’ve always wanted to have hillarsaare.ee (for aesthetic reasons, because I am an Estonian), but registration was available only to companies and non-profits. The rules were about to change though, since Estonian Internet Foundation was working to allow anyone to register domains. Similar to .com registering. So I had to wait.

In late April 2010 they finally uncovered the new prices. 285 EEK for registrars. To be honest, that’s just way too expensive. For the end-user it would mean twice the price of a .com domain + taxes + registrars profit. Seriosly? What are they thinking? So I registered hillarsaare.com for my blog, because there’s no point in paying thrice the money for an Estonian domain.

2 responses so far

Multiple Facebook Like buttons on one page

May 06 2010 Published by Hillar Saare under Tech

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.

65 responses so far

Google kalendri SMS teenus Elisa võrgus

December 11 2008 Published by Hillar Saare under Tech

Google’i kalendril (Google Calendar) on SMS teadete saatmise teenus. Google ise ei võta selle eest raha. Selle nimekirja järgi saab Eestis antud teenust kasutada Elisa võrgus. (Tele2-s saab ka, EMT kohta ei tea). Uurisin igaksjuhuks järgi – Elisal puudub hind sisenevatele sõnumitele!

Seega Google SMS teenus on vähemalt Elisa võrgus täiesti tasuta. Olen 99 % kindel, et teistes võrkudes (EMT, Tele2, Bravocom) on samuti tasuta.

Täna tuli GMailis laboratooriumisse uuesti tagasi SMS sõnumite teenus. Hetkel saab sõnumeid saata ainult USA numbritele, kuid arvan, et varsti on oodata üleilmset toetust. Tõenäoliselt ei maksa see ka siis Elisa klientidele midagi! =) Jään ootama.

No responses yet

Sebe KÕU

April 26 2008 Published by Hillar Saare under Tech

Sõidan preagu Sebe ekspressiga Tallinnast Tartusse ja kirjutan seda postitust. Sebe kasutab Eesti Energia KÕU’d ja pean ütlema, et see töötab suurepäraselt. Siiani on ühendus olnud 100%. Hetkel Vaida juures.

Allalaadimiskiirus ~0.5Mbit/s. Üleslaadimist ei viitsi testida.

4 responses so far

Elektriraudtee WiFi

March 20 2008 Published by Hillar Saare under Tech

Istun Elektriraudtee rongis numbriga 2501 ja sain tööle WiFi. Istun Tallinna poole sõitvas rongis kõige Tallinna poolsemas vagunis ehk esimeses vagunis. Istun kõige esimese pingi peal ehk kõige Tallinna poolsema pingi peal kui rongijuhi oma välja arvata. Vasakul pool kui sõidusuunas näoga olla. Olen varem kahel korral proovinud erinevates elektrirongides WiFi ühendust saada, aga siis ma istusin vaguni tagumises osas ja ühendust ei saanud.

Signaali tugevus varieerub 60 – 70 % lähistel. Hetkel on 72%.
Allalaadimise kiirus www.ruuter.ee järgi on 2744 Kbit/s.
Üleslaadimise kiirus www.ruuter.ee järgi on 264.8 Kbit/s.

Aitäh, Elektriraudtee AS.

No responses yet