Navin Poeran - SEO Zoekmachine Optimalisatie » Coderen

Eenvoudige truc om je eigen traffic te excluden

Navin Poeran — Tue, 20 Dec 2011 22:16:24 +0000

Een simpele manier om je eigen traffic te excluden van je Google Analytics rapportages of van je GetClicky rapportages, is niet door een of ander ingewikkeld filter aan te maken in Google Analytics of zo. Nee, gewoon simpel je tracking code plaatsen in een tag, waarbij het onzichtbaar wordt als je bent ingelogd als admin. Natuurlijk gaan we ervan uit dat je constant bent ingelogd als admin op je website.

Hierdoor worden admins dan niet opgenomen als bezoeker of bezoeken. Als je vaker nieuwe content plaatst op je website, ben je sowieso constant ingelogd als admin, hierdoor kunnen jou eigen bezoeken, de totale bezoeken van je website wel beïnvloeden… en dat willen we niet, right?

Gebruik de onderstaande code voor je eigen website en plaatst dit in de footer of in de header, afhangend van wat voor analytics jij gebruikt.

             if (current_user_can('administrator')){ ?>
            
             } else { ?>
            
             }?>

Relevante items:

Windows media player in html5

Navin Poeran — Wed, 02 Nov 2011 00:43:18 +0000

Een vriend vroeg mij vanavond of een online radio dienst bij mij afspeelde. Toen ik die website bekeek, zag ik dat de player zodanig was gebouwd dat je een Windows media player plugin nodig had in je browser om het op je machine af te spelen. En aangezien die vriend van mij niet op een Windows machine zat… werkte de player niet.

Ik vroeg me gelijk af waarom dat ding niet was geschreven in html5. Maar natuurlijk kon het ook komen doordat de website eeuwen terug was gemaakt.

Ben toen gaan kijken in de broncode van de website, en dit is dus de standaard code voor een Windows media player vanuit een webpagina:

Ik pakte daaruit het adres:

http://38.96.175.21:5600

En zette dit tussen audio tags op een pagina, maar toch speelde het niet.

Ben toen gaan lezen en ontdekte dat html5 geen mp3 formaat ondersteunt. Het ondersteunt wel andere formaten w.o. .ogg.

Je kunt dus doen alsof het een .ogg bestand is, en dan speelt ie wel.

Uiteindelijk heb ik dus dit gepakt:

http://38.96.175.21:5600/sccn.ogg

De uiteindelijke code werd dus:

En toen speelde het wel

Bekijk de player in action:

http://www.navinpoeran.com/sccn.html

Relevante items:

Aangepaste error 503 pagina voor WordPress

Navin Poeran — Thu, 27 Jan 2011 12:43:28 +0000

Onlangs kwam op het Google webmaster central blog, een artikel over hoe je moet omgaan met gepland onderhoud aan je website.

Boodschap was dus, gebruik een 503 pagina als melding i.p.v. een 404 of een 200 (OK), ook staat er dat misbruik van een 503 melding als resultaat kan hebben dat de website toch uit de index van Google wordt gehaald.

Gelukkig voor ons, WordPress lovers, is zo een pagina bouwen met eigen layout in WordPress, gewoon koek en ei. (dit heb ik zelf ook toegepast op mijn werken in suriname website)

Volg de stappen voor het bouwen van een eigen unieke 503 error pagina:

Creëer een pagina en noem het db-error.php

Kopieer en plak daarin:

 // custom WordPress database error page tutorial @ digwp.com
 
	header('HTTP/1.1 503 Service Temporarily Unavailable');
	header('Status: 503 Service Temporarily Unavailable');
	header('Retry-After: 3600'); // 1 hour = 3600 seconds
	mail("spamless@domain.tld", "Database Error", "There is a problem with teh database!", "From: Montgomery Scott");
 
?>


	
		503 Service Temporarily Unavailable
		
	
	
		BRB
		Er wordt momenteel wat onderhoud gepleegd.

Opslaan en uploaden naar je wp-content map!

Dat waren al de stappen

Doordat de pagina gewoon puur php is, kun je zowel css als tekst, aanpassen naar eigen inzicht.

Zie ook:

custom database error page

Veel plezier.

Relevante items:

Margin: 0 auto; in IE7 werkt niet

Navin Poeran — Sat, 11 Dec 2010 04:18:35 +0000

Als je vaak websites ontwikkelt, dan zal je zeker het probleem om gedeeltes in je website te centreren in IE7 zijn tegen gekomen. En ik ook dus.

De simpele oplossing die op bijna alle browsers werkt om een stuk content te centreren, werk niet op Internet Explorer 7, of de standaard quirks mode van je browser.

Als we ervan uit gaan, dat je een website hebt, met een inlog div in het midden. Je wilt dat je inlog div altijd in het midden van je scherm moet staan, ongeacht de browser of de resolutie van het scherm.

In een normale situatie kon je dit schrijven in je CSS bestand:

#container { }
#inlog { margin: 0 auto;}

En dit dus in je HTML:


      
      Hier plaats je inlog content

Het probleem is dat dit niet werkt voor IE7, hoewel je dit toch via CSS kunt oplossen.

Het HTML gedeelte kun je precies zo laten, maar voor het CSS gedeelte, schrijf dit liever:

#container { text-align: center; }
#inlog { margin-left: auto; margin-right:auto;}

Hier heb je ook een demo:
margin ie7

Een beetje old skool, maar dit heeft bij mij wel gewerkt en hopelijk bij jou ook.

Relevante items:

Youtube embed/insluiten als gratis mp3 player

Navin Poeran — Tue, 19 Oct 2010 22:10:52 +0000

Ooit een Youtube video, om de audio muziek alleen, al willen insluiten op een webpagina als een mp3 speler? Zodat daarvan alleen de audio kan worden afgespeeld? Nou, zo ingewikkeld is dat alweer niet, volg de instructies hieronder om het te doen voor je eigen website.

Kopieer en plak deze code waar je de player wilt:

 width="320" height="25"> value="http://www.youtube.com/v/QHx40M4_e78&hl=en&fs=1&&ap=%2526fmt%3D18" name="movie"/> value="true" name="allowFullScreen"/> value="always" name="allowscriptaccess"/> width="320" height="25" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/QHx40M4_e78&hl=en&fs=1&&ap=%2526fmt%3D18"/>>

De id van je video moet je wel even aanpassen, dit is het laatste gedeelte van de URL. Dus als de URL dit is:
```
http://www.youtube.com/watch?v=4G3scpq5ay8
```
Pak je het gedeelte achter v=
Dit gewoon opslaan en uploaden

Je zult nu zo een gratis mp3 player krijgen:

Relevante items:

Vertoon op alle pagina’s behalve de voorpagina

Navin Poeran — Mon, 11 Oct 2010 04:57:44 +0000

Handige stuk code, die je kunt gebruiken voor het geval je een gedeelte van je website, zichtbaar wilt hebben op alle pagina’s, maar behalve op de voorpagina.

             if (!is_home()) {?>
	    hier komt je inhoud/code
	     }?>

Relevante items:

Website 220% sneller na onpage SEO optimalisatie

Navin Poeran — Thu, 30 Sep 2010 05:24:05 +0000

Geheel bedoeld eigenlijk, om te zien, of dit een impact gaat hebben op mijn organic verkeer. Als eerste wat ik deed, was de template die ik gebruikte, weg gooien.

Ik gebruikte de Thesis theme, een goede theme, maar vond het gewoon te zwaar draaien, en zou het teveel moeten gaan hacken, om het sneller te maken. Besloot toen te gaan werken met de default Twentyten theme, deze komt standaard mee in een WordPress installatie.

Dus als eerst theme veranderd
Wat ik kon hardcoden heb ik gehardcoded, dit zodat de database minder wordt belast (hierdoor wordt de site ook sneller)
Gebruik gemaakt van een cdn (content delivery network). Hierop gooide ik alle afbeeldingen
Ook ben ik gaan spelen met de w3c Total Cache om de site sneller te maken, alhoewel ik dit vaker zie als een goede plugin op andere blogs, voor site speed, heb ik er geen goede ervaringen mee
Verder gaan kijken naar de plugins die allemaal voor belast zorgen in de header. Zo zag ik dat een syntax mark-up plugin heel wat bestanden steeds opriep, dit wou ik dus gaan beperken tot alleen de pagina’s waarop ik daadwerkelijk broncode had geplakt. Toevallig werd ik de dag daarvoor geattendeerd door Anne Jan Roeleveld op een bug, die veroorzaakt werd door de beloved w3c Total Cache plugin. Ik vertelde hem over mijn idee om de syntax mark-up plugin alleen te loaden voor pagina’s waarin ik broncode had geplakt.

Voor hen die het niet weten wat een syntax mark-up plugin doet. Daarmee kun je broncode (html, css, php etc) in een blog post, zonder dat de code wordt geparst. Daarnaast komt het in verschillende kleuren, zodat het aflezen ook lekkerder is.

Niet lang daarna mailde hij me een stukje php code en wat instructies, na wat gemail/gechat en getest, hadden we dus de onderstaande code. De onderstaande code plaats je in je header.php bestand.

 
/*code geschreven door Anne Jan Roeleveld en getest/geimplementeerd door navin poeran*/
global $wp_query;
$thePostID = $wp_query-&gt;post-&gt;ID;
$postsyntax = get_post($thePostID, ARRAY_A);
$contentsyntax = $postsyntax['post_content'];
$syntax = 1;
if(!preg_match("|<pre|", $contentsyntax)) {
$syntax = 0;
}
if($syntax == 1) {
if ( function_exists('highlighter_header') ) {
highlighter_header();
}
}

Mocht je deze code gaan gebruiken, maak dan even je syntax-highlighter.php bestand open en verwijder daarin de regel: add_action(‘wp_head etc

De snelheid van de site heb ik steeds zitten monitoren met pingdom.

Van 5,44 s, meet ik nu een snelheid van 2,45 s. Dit is dus een verschil van +220%.

Hier ook een screenshot:

Doel is gewoon dichtbij 2 s, uiteraard zijn er nog genoeg zaken aan deze site, die kunnen worden geoptimaliseerd… it is a work in progress

Gebruik ook de WP Hide Post plugin, om “zware” posts van je homepage af te sluiten. Zodat de laad tijd op je homepage altijd minimaal blijft.

Relevante items:

CSS tip om footer aan bodem vast te plakken

Navin Poeran — Tue, 21 Sep 2010 03:57:30 +0000

Stel je bouwt een website van scratch en je bouwt ‘m vanuit een .psd bestand. Je verdeeld de website in drie delen, qua layout, een header, een container en een footer. Nu wil je dat de footer constant helemaal onderaan van de pagina staat.

Dus zoiets:

Je kan het volgende proberen, om dit effect te krijgen, it worked for me

#container { position: relative;}
 
#footer { position: absolute; bottom: 0;}

Dit, natuurlijk, samen met de rest van je CSS code.

Succes.

Zie ook:

Relevante items:

Comment policy voor je website inrichten

Navin Poeran — Fri, 03 Sep 2010 14:55:12 +0000

Ook moe van het feit, dat gebruikers die een reactie achterlaten op je website nooit hun eigen naam, maar altijd keywords/zoekwoorden zetten in het naamveld?

Plaats een comment policy warning, zoals deze hier, op je website:

Volg de onderstaande stappen om een comment policy op je website in te richten.

Ga naar je theme folder en maak open comments.php (dus /wp-content/themes/THEMA-NAAM)

Zoek naar:

 if ( have_comments() ) : ?>

Plak daarboven (de tekst kan je uiteraard naar eigen believen aanpassen):

		="comment_policy_display">
                >Regels voor het plaatsen van reacties:>
                >>
                >
                    >Gebruik je eigen naam, geen keywords>
                    >Het plaatsen van reclame in je reactie is niet toegestaan>
                    >Reacties moeten te allen tijde fatsoenlijk blijven>
                >
                >>
                >>
                >Reacties die hieraan niet voldoen worden of verwijderd of als spam aangevinkt. Hierover is er verder geen discussie mogelijk.>
		>

Maak nu open je css bestand, het bevindt zich ook in de theme folder.

Plak daarin deze code:

/* comment policy css start hier */
#comment_policy_display {
    color:#40454B;
	font-size: 10pt;
	background-color: #f2f2f2;
	border: thin dotted #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 12pt;
	margin: 0px;
	padding: 8px;
}
#comment_policy_display p {
	margin: 3px;
    font-size: 10pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 12pt;
    background-color: #f2f2f2;
    color:#40454B;
    font-weight:normal;
    padding:0px;
}
#comment_policy_display h3 {
	font-family: Trebuchet MS;
	font-size: 13pt;
	line-height: 13pt;
	color: #333333;
	font-weight: bold;
	padding: 3px 0px 3px 0px;
	margin: 0px 3px 3px 3px;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
    background:none;
}
#comment_policy_display ul{
    list-style-type:disc;
    padding:0px;
    padding-left:50px;
    font-size: 10pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight:normal;
    color:#40454B;
}
#comment_policy_display ul li{
    list-style-type:disc;
    font-size: 10pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight:normal;
    color:#40454B;
}
#comment_policy_credits {
	font-size: 7pt;
	color: #999999;
	line-height: 8pt;
    width:100%;
    height:10px;
 
}
#comment_policy_credits span{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #999999;
    font-weight:normal;
    float:right;
}
#comment_policy_credits a,#comment_policy_credits a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #999999;
    font-weight:normal;
    text-decoration:none;
}
/* comment policy css eindigt hier*/

Opslaan en uploaden beide bestanden!

Nu zal vlak boven elk comment veld een comment policy verschijnen.

Vreemd genoeg maak ik mee, dat er toch mensen zijn die dat niet verstaan. Ouderen comments ga ik onaangetast laten, alleen bij nieuwere comments modereer ik nu wel.

De code gebruikt is trouwens afkomstig uit een bestaande WordPress comment policy plugin. Aangezien ik zelf geen fan ben van plugins, heb ik de code gewoon gehardcoded op deze website. Voor de actuele plugin, zie deze pagina.

Relevante items:

Facebook Vind ik leuk / Like knop voor je WordPress website

Navin Poeran — Sun, 20 Jun 2010 23:33:52 +0000

Wil je ook graag een Facebook Vind ik leuk/Like – knop voor je WordPress website? Volg de stappen hieronder om het te implementeren.

Ga naar je theme folder en maak open je header.php en plak daarin vlak onder de body tag:

 id="fb-root">>
>
  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);
  }());
>

Maak vervolgens open je single.php
Kijk in de broncode waar je dit knopje wilt hebben en plak daarzo:
```
 href="" action="like">>
```
Opslaan en uploaden!

Je zult nu zoiets moeten zien bij elk artikel:

Je kan deze code op any pagina van je website plaatsen, zodat je het like/Vind ik leuk-knopje kan krijgen.

Hierboven heb ik uitgelegd hoe je een eenvoudige Vind ik leuk knop kun zetten voor je website.

Dit artikel wil ik verder uitbreiden met hoe je een Facebook fan badge kunt zetten op je website van je Facebook fan page, waar je vb. 10 fans kunt vertonen, met daarboven/daaronder een Vind ik leuk / Like knopje, geheel met je eigen css. Zoals hieronder in het voorbeeld:

Volg de stappen om dit zelf te doen:

Als eerste heb je een Facebook Application ID nodig, daarvoor ga je naar deze pagina, vul je daar je Website naam en Website URL in, en laat je het genereren.

Als twee, plak je de onderstaande code in je website, vlak voordat je de body afsluit


 id="fb-root">>
 src="http://connect.facebook.net/en_US/all.js">>
>
  FB.init({appId: 'JOUW-EIGEN-APP-ID', status: true, cookie: true, xfbml: true});
  FB.Event.subscribe('auth.sessionChange', function(response) {
    if (response.session) {
      // A user has logged in, and a new cookie has been saved
    } else {
      // The user has logged out, and the cookie has been cleared
    }
  });
>

Plaats nu de onderstaande code, waar je de badge wilt laten verschijnen, dit kan je ook in een div gooien, en dat vervolgens positioneren.

 type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US">>
 type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");>
 profile_id="ID-VAN-JE-FANPAGE" stream="false" connections="6" logobar="0" width="178" height="286" css="URL-NAAR-JE-CSS">>

De onderstaande code kan je gebruiken voor je css, en zelf aanpassen/opleuken. Let wel dat elke keer je het aanpast, je de naam van je css bestand ook moet aanpassen, vanwege dat Facebook je css bestand steeds cachet. Dus als je bestand vb. Facebook.css heette, veranderd het dan naar Facebook1.css enz. Dit ook steeds veranderen in de code van stap 3.

@charset "utf-8";
/* CSS Document */
 
body {}
 
.fan_box .connect_widget{
position: absolute;
bottom: 0;
right: 10px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
 
.fan_box .connections { background-color:#000000; border:1px solid #3E3D4E; color:#bbb;}
 
.fan_box .full_widget { border:none;}
 
.fan_box .full_widget .connect_top { background-color:#0A0910; border-bottom:none; border-left:1px solid #3E3D4E; border-right:1px solid #3E3D4E; border-top:1px solid #3E3D4E;}
 
.fan_box .full_widget .connect_top a { color:#FFFFFF;}
.fan_box .full_widget .connect_top a:hover { color:#EEBB00;}

Mocht het niet duidelijk zijn, kan je dat gerust laten weten in de reacties.

NavinPoeran.com

Relevante items: