Der erste Tag der Google Developer Conference ist rum und es wurden schon einige interessante Dinge vorgestellt:

• GoogleWave ist nun für alle offene und benötigt keine Invites mehr
• GoogleBuzz erhält eigene API, woraufhin Seesmic-Desktop mit einer ersten Beta freigegeben wurde. Tweetdeck und Meebo scheinen wohl auch entsprechende Integration zu planen. Auf kurz oder lang werden sicher alle einschlägigen Multiplattform Social Media Marketing Tools Buzz mit an Board holen. Ob das den Dienst “retten” kann ist die Frage.
• Google Font API, ganz feine Nummer! Mit Hilfe von ein paar Zeilen Code lassen sich Fonts, welche nicht auf dem Lokalen Rechner des Users installiert sind verwenden. Aktuell stehen noch nicht wirklich viele zur Verfügung, dass wird sich aber sicher ändern.
• Google gibt WebM-Video-Codec basierend auf VP8 frei. Mozilla, Opera und sogar Microsoft, mit dem IE9, werden diesen für HTML5-Video unterstützen. Wir sind gespannt ob sich Apple mit dem Safari auch noch einreiht.
• GoogleMaps API V3 wird veröffentlicht. Mehr Möglichkeiten und ein Facelift lassen Entwickl z.B .auf StreetView zugreifen.
• Die FeedAPI V2 unterstützt das PubSubHubbub Protokoll was den Push von RSS-Feeds ermöglicht. Aktuell muss man sich noch bewerben um die eigene Seite mit diesem Feature zu bereichern.

Ab 17:30 Uhr, also genau jetzt, kann man sich wieder in den Live-Stream der Keynote hängen.

UPDATE 18:08 Uhr

Tweetdeck hat die Version 0.34.1 mit Buzz und Foursquare-Support veröffentlicht.

Ich habe schon in einem älteren Artikel zum Thema Social Media Buttons beschrieben warum ich der Meinung bin man sollte nicht alles via Plugin einbinden. Seit dem hat sich einiges getan. Twitter hat @anywhere und Facebook Open Graph veröffentlicht. Beides dient der einfacheren und umfangreicheren Integration des jeweiligen Dienstes in die eigene Seite. Heute soll es um die Einbindung des Facebook-Like-Buttons gehen.

Facebook Like Button ohne Plugin einbinden

Den Facebook Like Button kann man auf 2 Arten einbinden, via iFrame und via Facebook Javascript SDK. Ich bin selber nicht so der iFrame-Fan deshalb zeige ich euch hier die andere Variante.

Den Quelltext für das SDK bekommt Ihr von der Entsprechenden Developer-Seite, dass ganze sieht dann folgendermaßen aus:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your 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>

Der Teil sollte am besten ganz nach unten in der footer.php eures WordPress-Templates. Eine Zeile über >/body< Den eigentlichen Button könnt Ihr euch auch direkt von der Facebook-Developer-Seite erzeugen lassen.

<fb:like href="http://www.homepagebewertung.de" show_faces="false"></fb:like>

Damit Ihr immer auf den aktuellen Post von WordPress verweist, sollte der Button in die single.php des Templates und folgendermaßen abgeändert werden. (geändertes href)

<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="150"></fb:like>

Vor kurzem habe ich ein neues Projekt fertiggestellt (http://www.sae-alumni.org) welches anfangs nur für Deutschland, Österreich und die Schweiz ausgeliefert werden soll. Alle anderen Länder bekommen ein Overlay, wie bei den Lightboxes, zu sehen und können dann auf Ihre lokalisierte Version wechseln.

Das ganze ging mit jQuery und Googles Location API sehr schnell und einfach!

Für das Overlay habe ich das jQuery-Plugin Simplemodal verwendet, mit diesem kann man einfach Overlays erzeugen.
Sollte noch kein jQuery eingebunden sein empfehle ich den Weg über Googles “Contend Delivery Service” und die jsapi. Außerdem binde ich gleich Simplemodal mit ein, den Pfad muss man natürlich anpassen.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<script type="text/javascript" src="jquery.simplemodal-1.3.3.min.js"></script>

Zum testen könnt Ihr folgendes CSS von SimpleModal verwenden und dann anpassen:

 /* Overlay */
#overlay {background-color:#000; cursor:wait;}
 
/* Container */
#container {width:580px; height:400px; font-family:Verdana, Arial; font-size:16px; text-align:left;background: #000;text-align:center;}
#container .contact-content {background-color:#333; color:#ddd; height:40px;}
#container a:link,
#container a:active,
#container a:visited,
#container a:hover{color:#fff;}
#container a.modal-close,
#container a.modal-close:link,
#container a.modal-close:active,
#container a.modal-close:visited {text-decoration:none; font-weight:bold; font-size:1.2em; position:absolute; top:-4px; right:6px; color:#999;}
#container a.modal-close:hover {color:#9bb3b3;}

Jetzt noch das Javascript mit Googles Location-API einbinden. In meinem Fall habe ich geprüft, ob der Client nicht aus DE, AT oder CH kommt. Zur Abfrage können alle ISO-3166-1 Codes verwendet werden.

$(document).ready(function() {
   if (google.loader.ClientLocation) {
     var loc = google.loader.ClientLocation;
     var countryCode = loc.address.country_code;
     if(countryCode != "DE" && countryCode != "AT" && countryCode != "CH"){
        $('body').append("<div id="overlay">Visible for other Countries</div>");
        $("#overlay").modal({
            closeHTML: "<a class="modal-close" title="Close" href="#">x</a>",
            position: ["15%",],
            opacity:80,
            overlayId: 'overlay',
            containerId: 'container',
            onClose: container.close
        });
     }
   }
 });
 
var container = {
	close: function(dialog){
		$("#overlay").remove();
		$("#container").remove();
	}
}

Jetzt noch das div#overlay aus obigen JavaScript mit dem entsprechenden Inhalt füllen, fertig.