Tankar om webbutveckling » JavaScript http://www.wedholm.net Sökmotoroptimering och webbutveckling Thu, 02 Feb 2012 21:31:39 +0000 sv-se hourly 1 http://wordpress.org/?v=3.3 Google+1 funkar inte på IDN-domäner http://www.wedholm.net/google1-funkar-inte-pa-idn-domaner/ http://www.wedholm.net/google1-funkar-inte-pa-idn-domaner/#comments Sun, 07 Aug 2011 23:04:27 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=3576 google+1Google+1 är en intressant social funktion från Google. Med en enkel knapp kan man låta sina besökare ”gilla” de olika sidorna man har på en sajt. Det här inlägget kommer dock inte handla om Google+1 och dess för- respektive nackdelar. Det kommer handla om att Google+1 inte funkar bra på IDN-domäner.

Bilsemester.net var den första av mina sajter som fick +1-knappar. Där funkade det utan problem, men när jag skulle lägga in samma funktion på Lübeck.nu gick det inte lika bra. Detta trots att de båda sajterna har exakt samma design.

Detta problem uppstår endast på IDN-domäner i Opera, FireFox och Internet Explorer. I Google Chrome visas +1-knappen som den ska.

Efter lite googlande hittade jag denna tråd på Google Webmaster Central. Där skriver en viss Jenny Murphy, Googleanställd, att detta är ett problem som gäller IDN-domäner. Googles tekniker ska tydligen vara informerade om problemet. Hoppas de löser det snart, och att detta inlägg kan hjälpa några som slitit sitt hår över att Google+1-knappen inte funkar.

]]> http://www.wedholm.net/google1-funkar-inte-pa-idn-domaner/feed/ 3 Adsense och Google Maps API http://www.wedholm.net/adsense-och-google-maps-api/ http://www.wedholm.net/adsense-och-google-maps-api/#comments Wed, 02 Mar 2011 02:53:18 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=3204 Här kommer ett smidigt sätt att visa Adsense på Google-kartan på din sajt. Lägg bara till följande kodsnutt i Javascript-funktionen – function load() -som laddar kartan.

var publisher_id = "pub-0XXXXXXXXXXXXXX8";
var adPos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(7, 20));
	adsManagerOptions = {
	maxAdsOnMap : 1,
	style: 'adunit',
	channel: '0XXXXXXXX1',
	position: adPos};

	adsManager = new GAdsManager(map, publisher_id, adsManagerOptions);
	adsManager.enable();

En positiv sak med denna Adsense-enhet är att den inte räknas. Då menar jag att Google har ett maxantal på tre enheter per sida, men denna kan alltså bli den fjärde.

Ändra maxAdsOnMap för att ställa in hur många annonser du vill visa. Kom också ihåg att lägga in ditt publicist-ID och ID:t för kanalen du vill koppla till annonsenheten.

Kolla in min europakarta på Bilsemester.net för att se hur det blir.

UPPDATERING 3/3-11: Lade till lite i koden som gör att man kan positionera annonsenheten på kartan.

]]> http://www.wedholm.net/adsense-och-google-maps-api/feed/ 7 Markörer och Google Maps API http://www.wedholm.net/markorer-och-google-maps-api/ http://www.wedholm.net/markorer-och-google-maps-api/#comments Thu, 25 Nov 2010 23:28:36 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=2709 Efter gårdagens trixande med Google Maps API har nu den nya kartan över Lübeck gått live. Ändringarna bestod i att skapa markörer i olika färger, samt hämta alla uppgifter från en XML-fil istället för att skriva in dem direkt i Javascript-koden. Beroende på vilken kategori en plats som en markör märker ut visas de i en viss färg. Smidigt för att göra det tydligt för besökaren var t.ex. de flesta hotellen är belägna. Det går nu också att välja vilka markörer som ska visas genom att man markerar en checkbox framför varje kategori. På så sätt kan man låta besökaren rensa bort de markörer som de tycker är ointressanta.

Så här gör man markörer i olika färger

Vi börjar med den sida som kartan ska visas på. Där ska du lägga till följande mellan head-taggarna:

<script type="text/javascript" src="/includes/googlemaps.js"></script>

Sidans body-tagg ska se ut så här:

<body onload="load()" onunload="GUnload()">

Sedan skapar du en div som ska visa kartan:

<div id="map_canvas" style="width: 560px; height: 460px;"></div>

Därefter fortsätter vi med filen som jag väljer att kalla googlemaps.js som ska importeras. Detta är den kod som laddar kartan och här bestämmer du t.ex. var den ska fokusera och hur långt inzoomad den ska vara.

<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA5_z27XiV9IUwFjySmL26Twi6fo-Ki2hRGzIEzOIGoH2zKVDNT8MNja1mdng"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon();
    iconBlue.image = 'images/graphics/mm_20_blue.png';
    iconBlue.shadow = 'images/graphics/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();
    iconRed.image = 'images/graphics/mm_20_red.png';
    iconRed.shadow = 'images/graphics/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["restaurang"] = iconBlue;
    customIcons["hotell"] = iconRed;
	var markerGroups = { "restaurang": [], "hotell": []};

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(53.86892, 10.67165), 13);
		map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        GDownloadUrl("includes/markerdata.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
			var link = markers[i].getAttribute("link");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type, link);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, address, type, link) {
      var marker = new GMarker(point, customIcons[type]);
      markerGroups[type].push(marker);
      var html = "<p class='maptitle'>" + name + "</p><p class='mapadress'>" + address +"</p><p class='maptext'><a href='"+ link +"' class='intmap'>Läs mer om " + name + "</a></p>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    function toggleGroup(type) {
      for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {
          marker.show();
        } else {
          marker.hide();
        }
      }
    }
    //]]>
  </script>

Slutligen kommer vi till XML-filen (markerdata.xml) som innehåller information om alla markörer.

<markers>
 <marker name="Hotel Alter Speicher" address="Beckergrube 77" lat="53.869598" lng="10.680524" type="hotell"/>
 <marker name="Historischer Weinkeller" address="Koberg 8" lat="53.87097" lng="10.69079" type="restaurang"/>
</markers>

Det ska vara det hela. Nu ska du ha en karta som visar markörer i olika färger beroende på vad du skrivit in i attributet ”type” i XML-filen.

Visa eller dölj markörer

För att visa eller dölja markörer använder vi oss av checkboxar. Denna kod placerar du förslagsvis under diven som visar kartan.

<input style="background-color: #ff0000; border: 1px solid #ffffff;" onclick="toggleGroup('hotell')" checked="checked" type="checkbox" /> Hotell <br />
<input style="background-color: #ffff00; border: 1px solid #ffffff;" onclick="toggleGroup('restaurang')" checked="checked" type="checkbox" /> Restauranger
]]> http://www.wedholm.net/markorer-och-google-maps-api/feed/ 5 Jävla skitfel! http://www.wedholm.net/javla-skitfel/ http://www.wedholm.net/javla-skitfel/#comments Thu, 25 Nov 2010 00:51:08 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=2707 Ursäkta rubriken men jag är aningen upprörd nu. Det är helt och hållet mitt fel, vilket spär på upprördheten. Jag har suttit och felsökt ett stycke kod till Google Maps i lite över en timma utan att fatta vad som var problemet.

Det visade sig dock vara otroligt simpelt! Jag hade helt enkelt missat att göra om & till &amp; i XML-filen. Var bara tvungen att skriva av mig lite irritation.

]]> http://www.wedholm.net/javla-skitfel/feed/ 6 Markörer i Google Maps API http://www.wedholm.net/markorer-i-google-maps-api/ http://www.wedholm.net/markorer-i-google-maps-api/#comments Sun, 28 Feb 2010 20:54:59 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1784 Google Maps är en väldigt bra tjänst som kan användas på vilken sajt man vill. Det kan vara extra användbart på resesajter (för t.ex. markera ut hotell och sevärdheter) eller företagwebbplatser (för att visa besökarna var butiker m.m. är belägna). I detta inlägg beskrivs hur man visar kartan samt placerar ut klickbara markörer med inforutor (pratbubblor).

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=DIN_API_NYCKEL”
type=”text/javascript”></script>

<script type=”text/javascript”>
//<![CDATA[if (GBrowserIsCompatible()) {

// Funktionen för att skapa markören och inforutan
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

// Visa kartan med några kontroller samt ställ in kriing vilka koordinater kartan ska centreras som standard
var map = new GMap2(document.getElementById("map_canvas"))
map.setCenter(new GLatLng(53.55805, 9.97421), 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

//Markörinformation
var point = new GLatLng(53.55125, 9.95770);
var marker = createMarker(point,'<div style="width:150px: height: 25px;"><p>Text i inforutan för denna markör<\/p><\/div>')
map.addOverlay(marker);
}

//Visa meddelande för besökare med webblösare som saknar stöd för Google Maps
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}

//]]>
</script>

För att smidigt hitta koordinater rekommenderar jag denna sida, där man kan  flytta en markör och därefter få de aktuella koordinaterna.

]]> http://www.wedholm.net/markorer-i-google-maps-api/feed/ 5 Popup-fönster på sajten http://www.wedholm.net/popup-fonster-pa-sajten/ http://www.wedholm.net/popup-fonster-pa-sajten/#comments Mon, 07 Dec 2009 21:48:22 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1439 Det var länge sedan jag använde mig av popup-fönster på mina webbplatser. Anledningarna till att jag övergett dem är flera. Det är dels ur SEO-synpunkt, men även av användarvänlighetsskäl.

Popup och SEO

Jag börjar med att förklara på vilket sätt sökmotoroptimeringen blir lidande av popup-fönster. Detta gäller under förutsättning att det är viktigt innehåll i popup:en som måste indexeras av Google. Jag tar ett exempel från WN där det handlade om en receptsajt som visar alla recept i ett popup-fönster. I det fallet kommer en väldigt stor del av sajtens innehåll att ligga i olika popup-fönster.

Popup-fönstren använder sig oftast av JavaScript för att öppna det aktuella innehållet i ett nytt fönster. Google kan inte följa JavaScript (osäker på hur  det funkar nu för tiden, men det är helt klart bättre med rena HTML-länkar) på samma sätt som om fönstren skulle länkas med <a href=”"> som vanligt. Måste du använda JavaScript så bör länken se ut så här:

<a href="recept.asp?id=123" onclick="window.open(this.href,'recept_window');re turn false;">Spaghetti och köttfärssås</a>

Då följer Google href-länken till innehållet och kan indexera det.

Problemet är dock inte löst i och med detta. Google har innehållet men kan få  problem när de ska länka direkt till recepten från sökresultatet. Ofta dyker samma problem upp som för i stort sett alla frame-baserade webbplatser. Sajten i sin helhet visas inte, utan besökaren ser bara innehållet på  recept.asp?id=123. Menyer, rubrik och kolumner försvinner och man tvingas ofta göra en länk under varje recept, något i stil med ”Ser du inte hela sajten? Klicka här!”.

Pop-up och användarvänlighet

Ur ett användarvänlighetsperspektiv kan popup-fönster vara både en bra och dålig lösning. Saker som jag tycker popup-fönster kan lämpa sig bra för är små korta notiser eller bekräftelser. Detta är innehåll som sökmotorer inte nödvändigtvis måste indexera. Meddelandena kan handla om att uppmuntra besökarna att bli medlem, eller bekräfta att ett meddelande har skickats.

Åter till receptexemplet. Om en så stor och viktig del av innehållet på sajten ligger i en popup finns risken att många besökare inte kommer åt innehållet. Många webbläsare nu för tiden har s.k. ”popup blockers” som hindrar dessa att automatiskt poppa upp på skärmen. Istället visas (t.ex. i Opera) ett litet meddelande i nederkant att ett pop-up har blockerats, och att man måste klicka på det meddelandet för att visa popup-fönstret. Många besökare har inte stenkoll på tekniken och upplever det som att sajten inte fungerar korrekt. Risken är då stor att du förlorar dessa besökare som inte hittar det de söker.

Ytterligare ett problem, som är både en SEO- och användarvänlighetsfråga handlar om djuplänkar till din sajt. Om ditt viktiga innehåll, recepten i detta fall, ligger i en pop-up så blir det svårare för andra att länka direkt till innehållet (s.k. djuplänkning). Användare som samtidigt driver bloggar kan uppleva det svårt att tipsa andra om intressanta recept. Dessutom förlorar du länkkraft i och med de uteblivna länkarna till din sajt.

Alternativ till JavaScript-popup

Lightbox är ett alternativ till de klassiska popup:erna i JavaScript. Det bygger istället på HTML/CSS och skapar ett lager ovanför sajten där nytt innehåll visas. Jag har dock inte satt mig in hur detta påverkar sökmotoroptimeringen, men spontant känns det som en mycket bättre lösning.

huddletogether.com/projects/lightbox

]]> http://www.wedholm.net/popup-fonster-pa-sajten/feed/ 0