Youtube embed/insluiten als gratis mp3 player

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.

  1. Kopieer en plak deze code waar je de player wilt:

    <object width="320" height="25"><param value="http://www.youtube.com/v/QHx40M4_e78&amp;hl=en&amp;fs=1&amp;&amp;ap=%2526fmt%3D18" name="movie"/><param value="true" name="allowFullScreen"/><param value="always" name="allowscriptaccess"/><embed width="320" height="25" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/QHx40M4_e78&amp;hl=en&amp;fs=1&amp;&amp;ap=%2526fmt%3D18"/></object>
  2. 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=

  3. Dit gewoon opslaan en uploaden

Je zult nu zo een gratis mp3 player krijgen:

Website 220% sneller na onpage SEO optimalisatie

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.

  1. Dus als eerst theme veranderd
  2. Wat ik kon hardcoden heb ik gehardcoded, dit zodat de database minder wordt belast (hierdoor wordt de site ook sneller)
  3. Gebruik gemaakt van een cdn (content delivery network). Hierop gooide ik alle afbeeldingen
  4. 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 :(
  5. 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("|&lt;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:
pingdom

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.

CSS tip om footer aan bodem vast te plakken

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:
header css
container css
footer css

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:

  1. http://www.xs4all.nl/~peterned/examples/csslayout1.html
  2. http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Comment policy voor je website inrichten

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:

comment policy voor wordpress

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

  1. Ga naar je theme folder en maak open comments.php (dus /wp-content/themes/THEMA-NAAM)
  2. Zoek naar:
    <?php if ( have_comments() ) : ?>

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

    		<div id="comment_policy_display">
                    <h3>Regels voor het plaatsen van reacties:</h3>
                    <p></p>
                    <ul>
                        <li>Gebruik je eigen naam, geen keywords</li>
                        <li>Het plaatsen van reclame in je reactie is niet toegestaan</li>
                        <li>Reacties moeten te allen tijde fatsoenlijk blijven</li>
                    </ul>
                    <p></p>
                    <p></p>
                    <p>Reacties die hieraan niet voldoen worden of verwijderd of als spam aangevinkt. Hierover is er verder geen discussie mogelijk.</p>
    		</div>
  3. Maak nu open je css bestand, het bevindt zich ook in de theme folder.
  4. 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*/
  5. 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.