Introdução

CodeIgniter é um Framework MVC (model-view-controller, ou modelo-visão-controlador) para PHP muito level. Isso significa que ele possui diversas funções que ajudam a organizar e acelerar o processo de desenvolvimento de aplicações web. Além disso ele é bem simples quando comparado com outros frameworks.

A comunidade envolvida com um framework também deve ser levada em consideração ao se escolher. CodeIgniter tem uma comunidade bem ativa (em inglês e em português) e um bom guia de usuário, então é fácil encontrar a informação que precisar. Vou explicar o que MVC significa.

Model-View-Controller

Traduzindo, ficaria Modelo-Visão-Controlador). É um design pattern que divide a aplicação em três partes:

• Modelo: interação com o banco de dados e lógica de negócio. Operações CRUD (create, read, update, delete).
• Visão: o que o usuário vê. Nosso HTML.
• Controlador: lógica da aplicação e tratamento de input. O controlador utiliza o modelo para buscar/registrar informações no banco de dados e chama as visões necessárias para exibir para o usuário.

Numa explicação simplória, é uma arquitetura ou modelo para estruturar sua aplicação. Para quem já trabalhou com aplicações em PHP puro que tratam inputs no mesmo arquivo que possui o HTML, incluem conexões com banco de dados e executam operações de banco, trabalhar com um framework MVC é extremamente bom. No início pode parecer complicado, mas com um pouquinho de tempo para entender a simplicidade e organização do código, você não vai mais trabalhar sem ele.

Estrutura e Arquivos

A instalação do CodeIgniter tem uma estrutura padrão. Isso pode ser alterado mudando alguns arquivos, mas para esse aplicativo vamos  manter os diretórios como estão. Então vá para http://www.codeigniter.com e baixe a última versão (atualmente 2.1.0). Descomprima o conteúdo na pasta que você escolher. Isso é o que você vai ver:

• application
• system
• user_guide
• index.php
• license.txt

O arquivo index.php indica o ambiente (desenvolvimento, produção, etc) e as pastas de sistema e aplicação. Então, se você quiser, você pode renomear essas pastas para outra coisa e modificar esses valores no arquivo index.php. Isso ajuda na segurança do seu aplicativo.

O arquivo license.txt contém o acordo de uso do CodeIgniter.

application

Nesta pasta ficam todas as informações específicas da aplicação. As subpastas mais importantes, onde você vai trabalhar mais, são:

• config: configuração do app. Dados de acesso ao banco de dados, auto carregamento de bibliotecas e helpers, rotas, etc.
• controllers: controladores do app. Cada controlador é uma classe PHP que estende a classe CI_Controller. Para acessar o controlador é só você acessar server/controller_name no seu navegador.
• models: modelos para acessar o banco de dados. Os modelos também são classes, mas elas estendem a classe CI_Model.
• views: todas as suas visões estarão aqui.

Existem várias outras subpastas, como libraries (bibliotecas) e helpers, onde você pode adicionar suas classes específicas e suas funções.

system

Este diretório contém a “engine” do CodeIgniter. Todas as bibliotecas do sistema estão aqui, então você não precisa se preocupar com o que está aqui..

user_guide

Como você deve estar imaginando, nesta pasta está o guia do usuário que acompanha o CodeIgniter. Você pode remover esta pasta ou manter ela em um local separa para referências futuras. Voce pode visitar este guia do usuário online também.

Fluxo Simplificado

Este é um fluxo simplificado para explicar como um cenário simples funciona.

Nesse exemplo nós estamos acessando um usuário para editar seus detalhes. O CodeIgniter trata as URLs de uma maneira simples, utilizando a primeira parte como o nome do controlador e a próxima como o método. Outras partes podem ser parâmetros do método. Se o controlador não for definido, o controlador padrão será executado (isso é definido no diretório config). Se o método não estiver definido, o método index será utilizado por padrão.

Eu vou explicar em detalhe como nós fazemos cada coisa nos próximos artigos. O meu objetivo é ir passo a passo, explicando como o CodeIgniter funciona em situações práticas. Agora deixe-me explicar o que será o aplicativo que estaremos desenvolvendo.

Simple Task Board

O aplicativo que estaremos criando é o Simple Task Board (traduzindo, Quadro de Tarefas Simples). Ele está disponível aqui neste blog e também no GitHub. Foi criado por mim mesmo, para me ajudar a organizar meus projetos pessoais. Eu decidi disponibilizá-lo aqui para poder fazer melhorias e, talvez, usar ele para gerenciar os projetos na minha empresa. Como eu não preciso e não quero perder muito tempo gerenciando os projetos, eu não preciso de muitas funcionalidades. Eu acabo usando um agile board ou simples planilhas. Por isso o Simple Task Board poderia ser customizado para compreender apenas as necessidades mais básicas, sendo ao mesmo tempo simples e útil.

Conclusão

Isso é tudo para a Introdução. Já fiz uma nova instalação do CodeIgniter na minha máquina local, então estou pronto para dar início no tutorial passo a passo. Na próxima semana vou preparar a parte 2 do tutorial. Tenha um bom resto de semana.

Introdução

Criado utilizando o CodeIgniter, a ideia é que este aplicativo permaneça simples, compreendendo apenas os requisitos mais básicos de um gerenciador de tarefas. Seu objetivo é auxilias no processo de gerenciamento de projetos.

Essa é a primeira versão “usável” deste aplicativo. Portanto utilize somente para testes e para aprender.

A versão atual é a 1.0. Mas ela ainda está em desenvolvimento e não está completamente testada. Deve ser utilizada para testes e se você quiser aprender um pouco mais sobre CodeIgniter. Nas próximas seções eu vou falar sobre os seguintes tópicos:

• Instalação
• Capturas de Tela
• Atualizações Futuras
• Download

Instalação

Crie o banco de dados utilizando db/create.sql, coloque os arquivos no seu servidor e atualize o seguinte:

• application/config/config.php: atualize $config['base_url'] com a sua URL.
• application/config/database.php: atualize as informações do seu banco de dados.

Execute <servidor>/install (onde <servidor> deve ser o seu localhost ou domínio/diretório).
Se você tiver algum problema é só avisar.

Capturas de Tela

Atualizações Futuras

Eu planejo continuar atualizando algumas partes desse aplicativo nos próximos meses. Atualmente, a lista de atualizações sé a seguinte:

• Comentário nas tarefas: adicionar comentários em cada tarefa.
• Nível de usuário: implementar a verificação do nível do usuário e permitir acesso somente as funcionalidades corretas.
• Perfil do usuário: criar um perfil de usuário com mais informações sobre o usuário.
• Histórico das tarefas: registrar oque acontece com cada tarefa e quanto tempo ela leva em cada fase.
• Estimativa das tarefas: adicionar um campo de estimativa para permitir comparar o estimado e o realizado.
• … se você tiver outras idéias, poste nos comentários …

Download

Se você quiser baixar este projeto, por favor vá para o repositório GitHub. Desta maneira você pode baixar a última versão.

Introdução

My Trip Emission é (ou era – o domínio não existe mais) uma aplicação que eu desenvolvi que permite ao usuário detectar a emissão de CO2 baseado numa viagem definida no Google Maps e na seleção de um automóvel. Foi desenvolvida em PHP, utilizando a API do Google Maps. Eu irei explicar a estrutura de diretórios e as partes mais importantes. Esse projeto é relativamente antigo para os padrões Web e não foi atualizado por um bom tempo, o que significa que o código pode estar utilizando versões antigas do PHP/jQuery/Google Maps API.

Você pode baixar o projeto completo aqui.

Estrutura de Diretórios

Este projeto é bem simples, com poucos arquivos, portanto vou mostrar a maioria deles aqui.

• css
• bkp_style.css
• style.css
• styleIE.css
• images
• include
• config.php
• js
• jquery_cookies.js
• scripts.js
• about.php
• contact.php
• contact_sent.php
• favicon.ico
• get_emission.php
• get_model.php
• get_version.php
• help.php
• index.php
• mytripemission.sql
• robots.txt
• sitemap.xml

Diretório CSS

Esse diretório incluí três arquivos. bkp_style.css e style.css são o mesmo arquivo, mas o style.css está “minificado”. styleIE.css tem estilos específicos para o IE. Eu não vou explicar os detalhes de estilo aqui. Se você quer mais informações, me avise nos comentários.

Diretório Images

Apenas imagens…

Diretório Include

O diretório include contém o arquivo config.php, que faz a conexão com o banco de dados. Você precisa atualizar esse arquivo com as informações do seu banco de dados. Além disso, esse arquivo define duas funções, chamadas cleanInput($input) e sanitize($input), que são responsáveis por limpar a varíavel GET e garantir que nenhuma string incorreta vá para o banco de dados.

// Database information
$db_user = 'root';
$db_pass = '';
$db_host = 'localhost';
$db_name = 'mytripemission';

// Database connection
$dbc = mysql_connect($db_host, $db_user, $db_pass) OR die('It was not possible to connect to MySQL: ' . mysql_error());
mysql_select_db ($db_name) OR die('It was not possible to select the database: ' . mysql_error());

define('BASE_URL', 'http://localhost/mytripemission/');

// Cleaning function
function cleanInput($input) {

    $search = array(
        '@<script[^>]*?>.*?</script>@si',   // Strip out javascript
        '@<[\/\!]*?[^<>]*?>@si',            // Strip out HTML tags
        '@<style[^>]*?>.*?</style>@siU',    // Strip style tags properly
        '@<![\s\S]*?--[ \t\n\r]*>@'         // Strip multi-line comments
    );

    $output = preg_replace($search, '', $input);
    return $output;
}
// Sanitizing function
function sanitize($input) {
    if (is_array($input)) {
        foreach($input as $var=>$val) {
            $output[$var] = sanitize($val);
        }
    }
    else {
        if (get_magic_quotes_gpc()) {
            $input = stripslashes($input);
        }
        $input  = cleanInput($input);
        $output = mysql_real_escape_string($input);
    }
    return $output;
}

Diretório JS

Contém arquivos JavaScript. jquery_cookies.js é um plugin para tratar cookies para jQuery desenvolvido por Klaus Hartl. Ele é utilizado em outro arquivo deste diretório, scripts.js. Esse arquivo trata diferentes eventos e é importante para o funcionamento do aplicativo, portanto vou explicar algumas coisas.
A primeira parte é baseada nos exemplos da API do Google Maps e é responsável por gerar o mapa e alguns eventos.

var map;
var gdir;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(geoip_latitude(), geoip_longitude()), 10);
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.enableScrollWheelZoom();
    gdir = new GDirections(map, document.getElementById("directions"));
    GEvent.addListener(gdir, "load", onGDirectionsLoad);
    GEvent.addListener(gdir, "error", handleErrors);
  }
}

function setDirections(fromAddress, toAddress, locale) {
  gdir.load("from: " + fromAddress + " to: " + toAddress,
            { "locale": locale });
}

function handleErrors(){
       if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
         alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);

       else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
         alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);

       else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
         alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

       else if (gdir.getStatus().code == G_GEO_BAD_KEY)
         alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

       else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
         alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);

       else alert("An unknown error occurred.");

}

function onGDirectionsLoad(){
    distance = gdir.getDistance().meters;

    // Get value for emission
    $.ajax({
        type: 'GET',
        url: 'get_emission.php',
        data: 'manufact=' + $('#manufact').val() + '&model=' + $('#model').val() +
              '&version=' + $('#version').val() + '&meters=' + distance +
              '&fuel_uom=' + $.cookie('fuel_uom'),
        success: function(result){
            $('#emissions').html(result);
        }
    });
}

A função setDirections(fromAddress, toAddress, locale) carrega a nova definição de viagem. A outra função interessante aqui é onGDirectionsLoad() porque ela chama o cálculo de emissões utilizando AJAX e exibe na barra lateral. A seguir mais algumas coisas nesse mesmo arquivo.

/*
 * jQuery
 */
function setError(field) {
    if($(field).val() == 0) {
        $(field).animate({
        backgroundColor: 'red'
            }, 1000, function() {
            $(field).animate({
            backgroundColor: '#FFD1D1'
            }, 1000);
        });

        return false;
    }
    else {
        $(field).css('background-color','white');
        return true;
    }
}

function executeForm() {
    var ok = true;

    ok = setError('#manufact');
    ok = setError('#model');
    ok = setError('#version');
    ok = setError('#fromAddress');
    ok = setError('#toAddress');

    if(!ok) return false;

    // Set cookies
    $.cookie('manufacturer',$('#manufact').val(), { expires: 30 });
    $.cookie('model',$('#model').val(), { expires: 30 });
    $.cookie('version',$('#version').val(), { expires: 30 });
    $.cookie('fromAddress',$('#fromAddress').val(), { expires: 30 });
    $.cookie('toAddress',$('#toAddress').val(), { expires: 30 });

    // Define directions according to language
    if($.cookie('language')){
        setDirections($('#fromAddress').val(), $('#toAddress').val(), $.cookie('language'));
    } else {
        setDirections($('#fromAddress').val(), $('#toAddress').val(), 'en_US');
    }

    return false;
}

function changeUom() {
    if ($.cookie('fuel_uom') == 'km/l') {
        $.cookie('fuel_uom','mpg_US', { expires: 180 });
    } else if ($.cookie('fuel_uom') == 'mpg_US') {
        $.cookie('fuel_uom','mpg_UK', { expires: 180 });
    } else if ($.cookie('fuel_uom') == 'mpg_UK') {
        $.cookie('fuel_uom','km/l', { expires: 180 });
    }

    $.ajax({
        type: 'GET',
        url: 'get_emission.php',
        data: 'manufact=' + $('#manufact').val() + '&model=' + $('#model').val() +
            '&version=' + $('#version').val() + '&meters=' + distance +
            '&fuel_uom=' + $.cookie('fuel_uom'),
        success: function(result){
            $('#emissions').html(result);
        }
    });
}

Essa seção mostra duas outras funções importantes. A função executeForm() vai verificar por erros no formulário, definir cookies (para que o usuário não precise definir as informações novamente na próxima vez que visitar o site) e executar a função setDirections(), que vai rodar a API do Google Maps.
A segunda função é changeUom(), que atualiza o cookie da unidade de medida e faz uma chamada AJAX para atualizar o HTML das emissões na barra lateral. O resto do código são eventos do jQuery.

// Change window and DIV's width and height on resize
$(window).resize(
    function(){
        $('#container').css('height',($(window).height()-26)+'px');
        if($(window).width() > 734){
            $('#container').css('width',($(window).width()-3)+'px');
        } else {
            $('#container').css('width','730px');
        }
        $('#sidebar').css('height',($('#container').height()-$('#header').height())+'px');
        $('#directions').css('height',($('#sidebar').height()-150)+'px');
        $('#map_canvas').css('height',($('#container').height()-$('#header').height())+'px');
        $('#map_canvas').css('width',($('#container').width()-310)+'px');
    }
);

Esta parte redimensiona o mapa, fazendo com que ele caiba na tela corretamente. Finalmente nós chegamos no evento quando o documento está pronto, que inicializa algumas coisas e adiciona alguns eventos.

$(document).ready(function(){
    // Hide scrollbars
    $("body").css("overflow", "hidden");

    // Initialize window and DIV's width and height
    $('#container').css('height',($(window).height()-26)+'px');
    if($(window).width() > 734){
        $('#container').css('width',($(window).width()-3)+'px');
    } else {
        $('#container').css('width','730px');
    }
    $('#sidebar').css('height',($('#container').height()-$('#header').height())+'px');
    $('#directions').css('height',($('#sidebar').height()-150)+'px');
    $('#map_canvas').css('height',($('#container').height()-$('#header').height())+'px');
    $('#map_canvas').css('width',($('#container').width()-310)+'px');

    // Settings dialog
    $("#settings").dialog({
      bgiframe: true, autoOpen: false, height: 60, width: 400, modal: false, closeOnEscape: true
    });

    // Initialize settings from cookies
    if($.cookie('fuel_uom')) {
        $('#fuel_uom').val($.cookie('fuel_uom'));
    } else {
        $.cookie('fuel_uom', 'mpg_US', { expires: 180 });
    }

    if($.cookie('language')) {
        $('#language').val($.cookie('language'));
    } else {
        $.cookie('language', 'en_US', { expires: 180 });
    }

    // Initialize values - get cookies
    if($.cookie('manufacturer')) {
        $('#manufact').val($.cookie('manufacturer'));

        $.ajax({
            type: 'GET',
            url: 'get_model.php',
            data: 'manufact=' + $('#manufact').val(),
            success: function(result){
                $('#model').children().remove();
                $('#model').append('- Select -')
                           .append(result)
                           .removeAttr('disabled');

                if($.cookie('model')) {
                    $('#model').val($.cookie('model'));

                    $.ajax({
                        type: 'GET',
                        url: 'get_version.php',
                        data: 'manufact=' + $('#manufact').val() + '&model=' + $('#model').val(),
                        success: function(result){
                            $('#version').children().remove();
                            $('#version').append('- Select -')
                                         .append(result)
                                         .removeAttr('disabled');

                            if($.cookie('version')) {
                                $('#version').val($.cookie('version'));
                            }
                        }
                    });
                }
            }
        });
    }

    // Vehicle selection ajax
    $('#manufact').change(
        function() {
            $.ajax({
                type: 'GET',
                url: 'get_model.php',
                data: 'manufact=' + $(this).val(),
                success: function(result){
                    $('#model').children().remove();
                    $('#model').append('- Select -')
                               .append(result)
                               .removeAttr('disabled');
                    $('#version').children().remove();
                    $('#version').append('- Select -')
                                 .attr('disabled', 'disabled');
                }
            });
        });

    $('#model').change(
        function() {
            $.ajax({
                type: 'GET',
                url: 'get_version.php',
                data: 'manufact=' + $('#manufact').val() + '&model=' + $(this).val(),
                success: function(result){
                    $('#version').children().remove();
                    $('#version').append('- Select -')
                                 .append(result)
                                 .removeAttr('disabled');
                }
            });
        });

    // Check my trip button
    $('#check_btn').click(
        function() {
            return executeForm();
        });

    // Fuel unit of measure Cookie
    $('#fuel_uom').change(
        function() {
            $.cookie('fuel_uom',$('#fuel_uom').val(), { expires: 180 });
        });

    // Language Cookie
    $('#language').change(
        function() {
            $.cookie('language',$('#language').val(), { expires: 180 });
        });
});

Primeiro, o código faz o seguinte:

• Esconder as barras de scroll;
• Inicializa o tamanho do mapa;
• Define a tela de diálogo de configurações;
• Inicializa tudo de acordo com os cookies.

Os cookies manufacturer, model e version são inicializados um após o outro, porque eles dependem um do outro. Então primeiro buscamos o fabricante (manufacturer). Depois verificamos o banco de dados e o cookie para buscar o modelo (model). Concluímos verificando o banco novamente e o cookies para buscar a versão (version).
A seguir, nós temos as chamadas AJAX para a seleção do veículo. Quando mudamos uma das dropdowns, nós verificamos o banco dedados para preencher as opções das outras dropdowns.
No final temos os eventos para o clique no botão “Check my Trip” e a tela de configurações, com a unidade de medida e a linguagem. Agora vamos para o diretório raiz e falar sobre o código PHP.

Diretório Raiz

O diretório raiz contém arquivos simples como o about.php (informações básicas sobre o site), contact.php e contact_sent.php (o formulário de contato e a resposta), favicon.ico (icone do site), help.php (informação sobre como usar o site), mytripemission.sql (script de criação do banco de dados), robots.txt (define onde os mecanismos de busca podem ir) e o sitemap.xml. Eu vou explicar apenas os outros arquivos, que são mais interessantes.

index.php

O arquivo index é o onde está o HTML da página principal. Além do formulário, que controla a busca, ele também define os DIVs utilizados pelo JavaScript. Nesse arquivo eu também utilizei a constante BASE_URL que é definida no arquivo config.php. Você precisa lembrar de atualizar isso para que o aplicativo funcione.

get_model.php e get_version.php

Ambos arquivos são chamados via AJAX e são simples buscas ao banco de dados, buscando informações para preencher as dropdowns do arquivo index.php.
get_model.php

require_once 'include/config.php';

$_GET = sanitize($_GET);

$sql = 'SELECT id, name FROM model WHERE manufacturer='.$_GET['manufact'];
$res = mysql_query($sql);
while($row = mysql_fetch_array($res)) {
    echo ''.$row['name'].'';
}

get_version.php

require_once 'include/config.php';

$_GET = sanitize($_GET);

$sql = 'SELECT id, name, trans_type FROM version
        WHERE manufacturer='.$_GET['manufact'].'
          AND model='.$_GET['model'];
$res = mysql_query($sql);
while($row = mysql_fetch_array($res)) {
    if($row['trans_type'] == 'M') {
        $transmission_type = 'Manual';
    } elseif($row['trans_type'] == 'A') {
        $transmission_type = 'Automatic';
    } else {
        $transmission_type = '';
    }

    echo ''.$row['name'].' '. $transmission_type.'';
}

get_emission.php

Esse é o arquivo onde o cálculo acontece. Vou explicar ele passo a passo.

require_once 'include/config.php';

// Get emisison logic
$_GET = sanitize($_GET);

$fuel_uom = $_GET['fuel_uom'];
$distance = $_GET['meters'];

$vehicle = explode('-', $_GET['version']);
$version = $vehicle[0];
$trans_type = $vehicle[1];

Primeiro, nós solicitamos o arquivo config, que faz a conexão com o banco de dados e define a função sanitize(). Então começamos a lógica limpando a variável $_GET e atribuindo a unidade de medida, a distância e o veículo, que incluí a versão e o tipo de transmissão.

// Get values for calulating vehicle green stars
$sql_stars = 'SELECT MAX( emission_co2 ) AS worse, MIN( emission_co2 ) AS best FROM version';
$res_stars = mysql_query($sql_stars) or die('Database error!');
$row_stars = mysql_fetch_array($res_stars);
$worse = $row_stars['worse'];
$best = $row_stars['best'];
$star_rate = ($worse - $best)/5; // Rate for each star

O código continua com a definição do que será uma emissão 5 estrelas. Para isso nós buscamos as emissões máxima e mínima do banco de dados e definimos um valor $star_rate baseados nesses valores.

$sql = 'SELECT kml_urban, kml_extra, kml_combined, emission_co2
        FROM version
        WHERE manufacturer='.$_GET['manufact'].'
          AND model='.$_GET['model'].'
          AND id='.$version.'
          AND trans_type=\''.$trans_type.'\'';

$res = mysql_query($sql) or die($version.'-'.$trans_type);

$change_link = '
';

if ($row = mysql_fetch_array($res)) {
// Esse código está no próximo bloco
}

Depois, nós buscamos a informação do veículo selecionado. Como vamos retornar um código HTML, criamos o código $change_link, responsável pela alteração da unidade de medida. O próximo pedaço de código é o que vai dentro do último IF.

    $litres = round(($distance/1000) / $row['kml_combined'], 2);
    $co2 = round((($distance/1000) * $row['emission_co2'])/1000, 2);
    $stars_num = round(($worse-$row['emission_co2'])/$star_rate, 0);
    if ($stars_num == 1) {
        $stars_txt = ' Star';
    } else {
        $stars_txt = ' Stars';
    }

    // Change unit of measure

    if ($fuel_uom == 'km/l') {
        echo '</pre>
<h1>Consumption</h1>
<pre> '.$litres.' litres ('.$row['kml_combined'].' km/l)';
        echo $change_link;
        echo '</pre>
<h1>CO2 Emission</h1>
<pre> '.$co2.' kg ('.$row['emission_co2'].' g/km)';
    } else if ($fuel_uom == 'mpg_US') {
        $gallons = round($litres * 0.264, 2);
        $mpg = round($row['kml_extra'] / 0.425, 2);
        echo '</pre>
<h1>Consumption</h1>
<pre> '.$gallons.' gallons ('.$mpg.' MPG (US))';
        echo $change_link;
        echo '</pre>
<h1>CO2 Emission</h1>
<pre> '.$co2.' kg ('.$row['emission_co2'].' g/km)';
    } else if ($fuel_uom == 'mpg_UK') {
        $gallons = round($litres * 0.220, 2);
        $mpg = round($row['kml_extra'] / 0.354, 2);
        echo '</pre>
<h1>Consumption</h1>
<pre> '.$gallons.' gallons ('.$mpg.' MPG (Imp))';
        echo $change_link;
        echo '</pre>
<h1>CO2 Emission</h1>
<pre> '.$co2.' kg ('.$row['emission_co2'].' g/km)';
    }

    echo '<span class="fltrt">';
 for ($i = 5; $i >= 1; $i--) {
 if ($i echo '<img title="'.$stars_num.$stars_txt.'" src="'.BASE_URL.'images/star.png" alt="'.$stars_num.$stars_txt.'" />';
 } else {
 echo '<img title="'.$stars_num.$stars_txt.'" src="'.BASE_URL.'images/star_black.png" alt="'.$stars_num.$stars_txt.'" />';
 }

 }
 echo '</span>';

Para finalizar, nesta parte nós começamos com o cálculo do consumo ($litres) e da emissão ($co2). Perceba que a distância foi dividida por 1000, para obtermos os km. Nós também calculamos o número de estrelas para a emissão atual, deste modo podemos fornecer uma pontuação para a emissão do veículo.
Continuando, depois do comentário “Change unit of measure”, nós verificamos qual unidade de medida foi selecionada e criamos o HTML de acordo. Para concluir o HTML, nós também colocamos uma tag SPAN, que contém a pontuação.

Conclusão

Era isso que eu queria mostrar nessa reativação do blog. Esse pequeno projeto estava online até o ano passado, e achei que seria uma boa disponibilizar, caso alguém tenha interesse. Quando eu fiz eu tinha a intenção de adicionar mais dados e fazer com que o aplicativo fosse realmente “utilizável”, mas eu acabei mudando minhas prioridades… Enfim, ele está disponível de forma gratuita e aberta, mas se você utilizar, não esqueça de referenciar este post.
Na próxima semana vou (tentar) escrever sobre um aplicativo de controle de tarefas que desenvolvi utilizando CodeIgniter. Ele já está disponível no GitHub, caso você esteja interessado.

Você pode baixar o projeto completo aqui.

Introdução

CodeIgniter é um framework PHP “enxuto” desenvolvido para auxiliar no desenvolvimento de aplicativos web customizados. É um framework MVC que fornece a estrutura principal na qual podemos criar nossa aplicação. Mas caso você já tenha um website em WordPress e você queira criar um sistema usando CodeIgniter, seria muito bom poder reutilizar algumas funcionalidades do WordPress. Dessa maneira não seria necessário “reinventar a roda”. Um funcionalidade interessante de ser reutilizada é a gestão de usuários. No WordPress temos os detalhes do usuário, autenticação, níveis, etc. Então neste artigo vou mostrar como fazer isso.

Para este artigo estarei usando CodeIgniter 2.0.2 e WordPress 3.2.

Preparando nossa Aplicação CodeIgniter

Se você ainda não fez o download do CodeIgniter, por favor vá para esse link. Extraia o conteúdo do arquivo na raiz do WordPress e renomeie a pasta CodeIgniter_2.0.2 para o nome que você quiser. Como o diretório vai estar dentro do WordPress, você acessará a aplicação em www.youdomain.com/wordpress/codeigniter. Você precisa tomar cuidado com o nome do diretório pois ele pode colidir com o nome das categorias do WordPress. Pode ser necessário customizar o arquivo .htaccess para poder acessar a aplicação.

Você poderia criar a aplicação CodeIgniter fora do diretório do WordPress. Mas seria necessário modificar o cookie path que o WordPress usa para autenticar os usuários.

Agora vamos para o código.

Biblioteca WP Integration

Existem diferentes maneiras de fazer a integração. Uma delas seria criar um Helper e definir as funções dentro dele. A outra opção é fazer orientado a objetos e criar uma biblioteca com a definição de uma classe. Essa foi a opção que eu escolhi e vou mostrar aqui. Vamos ver como a classe funciona passo a passo.

1° Passo – Arquivo e Declaração da Classe

Primeiro vamos criar um novo arquivo chamado Wpintegration.php dentro do diretório application/libraries. Depois precisamos definir nossa classe dentro desse arquivo:

<!--?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');<br /-->
/**
* Classe de Integração com o WordPress
*
* Essa classe possibilita o uso de funções do WordPress
*
* @author		Oscar Dias
* @link		http://oscardias.com/codeigniter/integrating-wordpress-with-codeigniter
*/
class Wpintegration {

    //
    // Nosso código vai aqui!!!
    //

}
/* Fim do arquivo Wpintegration.php */

2° Passo – Construtor da Classe

Vamos definir um método construtor para nossa classe. Esse construtor vai definir algumas variáveis globais (usadas pelas funções do WordPress) e incluir o arquivo wp-load.php. Esse arquivo faz a inicialização de todo o WordPress. Eu deixei algumas variáveis adicionais que encontrei durante meus testes comentadas dentro do método. Eu não tenho certeza, mas acho que dependendo das funções que forem utilizadas, outras variáveis possam ser necessárias.

    public function __construct() {
        global $table_prefix, $wp_embed, $wp_widget_factory, $_wp_deprecated_widgets_callbacks, $wp_locale, $wp_rewrite;
        // Variáveis adicionais do WordPress
        //$wpdb, $current_user, $auth_secure_cookie, $wp_roles, $wp_the_query, $wp_query, $wp, $_updated_user_settings,
        //$wp_taxonomies, $wp_filter, $wp_actions, $merged_filters, $wp_current_filter, $wp_registered_sidebars,
        //$wp_registered_widgets, $wp_registered_widget_controls, $wp_registered_widget_updates, $_wp_deprecated_widgets_callbacks,
        //$posts, $post, $wp_did_header, $wp_did_template_redirect, $wp_version, $id, $comment, $user_ID;

        require_once '../wp-load.php';
    }

3° Passo – Métodos para Gerenciamento de Usuários

Para finalizar nossa classe, nós vamos definir alguns métodos que vão retornar informações sobre o usuário. Algumas coisas que queremos do WordPress são saber se o usuário está logado, se ele é super admin e alguns links do blog: login, logout, blog e área de administração do WordPress.

• O primeiro método que vamos criar é isLoggedIn(). É um método bem simples que vai retornar o resultado da função do WordPress is_user_logged_in(). Como você pode imaginar, será true ou false.

      public function isLoggedIn()
      {
          return is_user_logged_in();
      }
  

• O próximo método que vamos criar é para saber quando o usuário é super admin. Vamos usar a função wp_ge_current_user() e retornar true quanto o nível do usuário for maior que 10. Você pode simplesmente retornar o nível do usuário e controlar esses níveis na sua aplicação CodeIgniter. No meu caso eu só estou interessado em saber se o usuário é super admin.

      public function isSuperAdmin()
      {
          if(wp_get_current_user()->user_level >= 10)
              return true;
          else
              return false;
      }
  

• Os métodos loginLink() e logoutLink() vão retornar os links para login e logout. Esses links vão levar para as páginas de login e logout do WordPress, mas eles vão utilizar o parâmetro redirect_to, que vai possuir o link para a nossa aplicação. Então, após efetuar o login (ou logou), você será redirecionado para o aplicativo CodeIgniter. Nesses dois métodos nós utilizamos a instância do CodeIgniter para carregar um helper. Esse helper é o ‘ci_url’, que é uma cópia do helper URL do CodeIgniter com algumas modificações que vou explicar depois. A função current_url() está definida dentro deste helper.

      public function loginLink()
      {
          $CI = & get_instance();
          $CI->load->helper('ci_url');
          $redirect = current_url();
  
          return wp_login_url()."?redirect_to=$redirect";
      }
  
      public function logoutLink()
      {
          $CI = & get_instance();
          $CI->load->helper('ci_url');
          $redirect = current_url();
  
          return wp_logout_url()."&redirect_to=$redirect";
      }
  

• Os próximos métodos são praticamente os mesmos. Eles retornam os links para o blog e para a área de administração. Isso é útil para poder adicionar o link para o blog diretamente do nosso aplicativo.

      public function blogLink()
      {
          return get_option('siteurl');
      }
  
      public function adminLink()
      {
          return get_option('siteurl') . "/wp-admin";
      }
  

Mudanças no CodeIgniter

No momento que incluímos o arquivo wp-load.php, diversas funções foram incluídas. Então precisamos tomar cuidado com os possíveis conflitos causados por redefinição de funções. Para mostrar um exemplo, estou utilizando o helper URL do CodeIgniter. Esse helper possui as funções site_url() e base_url(), que também existem dentro do WordPress. Então eu apenas copiei todo esse helper para o diretório de helpers dentro da nossa aplicação. Depois eu modifiquei as funções que estavam causando conflito, renomeando elas para ci_site_url() e ci_base_url(). Também foi necessário alterar onde ssas funções são chamadas, dentro da função anchor(), anchor_popup() e redirect(). Eu utilizei o helper URL como um exemplo. Mas dependendo do que você utilizar, pode ser necessário modificar outras funções.

Conclusão

Essa integração não é a mais “limpa” de todas, já que o WordPress e o CodeIgniter não foram criados para funcionar juntos. Mas é bem interessante poder criar uma aplicação web podendo utilizar componentes já desenvolvidos no WordPress. Espero que possa ser útil. Se você tiver idéias ou comentários, deixe sua mensagem.

Quando escrevi esse artigo em inglês, a versão do 3.2 do WordPress não estava disponível, por isso foi necessário fazer algumas alterações no WordPress. Mas com a versão 3.2 ficou mais fácil fazer a integração.

Introdução

Nesse artigo vamos criar um sistema de avaliação em quatro passos:

• Adicionar meta dados no comentário
• Atualizar modelo dos comentários
• Adicionar novos estilos CSS
• Adicionar novo JavaScript
• Como Exibir a Média das Avaliações (atualização)

Então vamos ao que interessa.

Meta Dados

A primeira coisa que precisamos fazer é abrir o arquivo functions.php do seu tema e adicionar o seguinte código:

add_action('comment_post','comment_ratings');

function comment_ratings($comment_id) {
    add_comment_meta($comment_id, 'rate', $_POST['rate']);
}

Como você pode ver é bem simples. Nós estamos adicionando a ação que será executada quando o comentário for postado. Dentro da função comment_ratings, nós estamos adicionando a nova informação aos meta dados do comentários. Nesse caso eu adicionei o campo rate com o valor que foi postado no campo com o mesmo nome.

Agora precisamos adicionar o campo rate no modelo dos comentários.

Modelo dos Comentários

Nós precisamos adicionar o campo em dois lugares: onde exibimos os comentários e onde o visitante digita seu comentário. Como já estamos no arquivo functions.php, vamos adicionar a seguinte função (é a mesma encontrada no WordPress Codex, mais o campo de avaliação):

function comment_template($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
        <div id="comment-<?php comment_ID(); ?>">
            <div class="comment-author vcard">
                <?php echo get_avatar($comment,$size='48'); ?>

                <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
            </div>

            <?php if ($comment->comment_approved == '0') : ?>
            <em><?php _e('Your comment is awaiting moderation.') ?></em>
            <br />
            <?php endif; ?>

            <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

            <?php
            $rate = get_comment_meta($comment->comment_ID, 'rate');
            if ($rate[0] <> '') {
                _e('Grade: ');
                echo movie_grade($rate[0]);
            }
            ?>

            <?php comment_text() ?>

            <div class="reply">
                <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
            </div>
        </div>
<?php
}

Essa função será usada para exibir a lista de comentários. Nós adicionamos a chamada para a função get_comment_meta que vai retornar um array com a informação. Se estiver vazia, não vamos mostrar nada. Caso contrário vamos usar a seguinte função para exibir a avaliação do visitante:

function movie_grade($grade) {
    switch ($grade) {
        case '0':
            $alt = 'Péssimo - 0 estrelas';
            break;
        case '1':
            $alt = 'Muito ruim - 1 estrela';
            break;
        case '2':
            $alt = 'Ruim - 2 estrelas';
            break;
        case '3':
            $alt = 'Bom - 3 estrelas';
            break;
        case '4':
            $alt = 'Muito bom - 4 estrelas';
            break;
        case '5':
            $alt = 'Excelente - 5 estrelas';
            break;
        default:
            $alt = 'Sem nota';
            break;
    }

    if (!isset($grade) || $grade == '')
        echo $alt;
    else {
        for ($i = 0; $i < 5; $i++) {
            if ($grade > $i)
                echo '<img src="'.get_stylesheet_directory_uri().'/images/star_on.png" alt="'.$alt.'" title="'.$alt.'" />';
            else
                echo '<img src="'.get_stylesheet_directory_uri().'/images/star_off.png" alt="'.$alt.'" title="'.$alt.'" />';
        }
    }
}

Nessa função estamos exibindo imagens de acordo com a avaliação. A última coisa que precisamos fazer para exibir a avaliação é utilizar nossa função na hora de exibir a lista de comentários no arquivo comments.php. Encontre a chamada para wp_list_comments e adicione o parâmetro ‘type=comment&callback=comment_template’. Deve ficar assim:

<?php wp_list_comments('type=comment&callback=comment_template'); ?>

Isso vai fazer com que a lista de comentários seja exibida usando a função comment_template que criamos anteriormente. Para completar com o modelo dos comentários precisamos atualizar a entrada dos comentários. Precisamos adicionar o campo para avaliação na entrada dos dados. Vamos adicionar alguns links e fazer um efeito usando CSS depois para deixar mais funcional.

<div>
    <div class="comment-rating">
        <ul class="star-rating">
            <li><a href="#" title="Péssimo - 0 estrelas" class="zero-star" onclick="rateClick(0); return false;">0</a></li>
            <li><a href="#" title="Muito ruim - 1 estrela" class="one-star" onclick="rateClick(1); return false;">1</a></li>
            <li><a href="#" title="Ruim - 2 estrelas" class="two-stars" onclick="rateClick(2); return false;">2</a></li>
            <li><a href="#" title="Bom - 3 estrelas" class="three-stars" onclick="rateClick(3); return false;">3</a></li>
            <li><a href="#" title="Muito bom - 4 estrelas" class="four-stars" onclick="rateClick(4); return false;">4</a></li>
            <li><a href="#" title="Excelente - 5 estrelas" class="five-stars" onclick="rateClick(5); return false;">5</a></li>
        </ul>
    </div>
    Sua avaliação
    <input type="hidden" name="rate" id="rate" value="<?php echo esc_attr($comment_author_rate); ?>" />
</div>

Agora vamos adicionar os estilos e o JavaScript para atualizar o input que criamos.

Novos Estilos CSS

Agora vamos criar os estilos usados no HTML. Esses estilos vão substituir os links por imagens e usar um efeito quando o mouse estiver sobre o link. Eu copie praticamente tudo do artigo Create a Star Rater using CSS. O CSS necessário é:

.comment-rating {float:left; width:180px;}
.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{background: url(images/star.png) left -1000px repeat-x;}
.star-rating{position:relative;width:108px;height:25px;overflow:hidden;list-style:none;margin:0;padding:0;
             background-position: left top;}
.star-rating li{display: inline;}
.star-rating a,
.star-rating .current-rating{position:absolute;top:0;left:0;text-indent:-1000em;height:25px;line-height:25px;
                             outline:none;overflow:hidden;border: none;}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{background-position: left bottom;}
.star-rating a.one-star{width:34%;z-index:6;}
.star-rating a.two-stars{width:51%;z-index:5;}
.star-rating a.three-stars{width:68%;z-index:4;}
.star-rating a.four-stars{width:85%;z-index:3;}
.star-rating a.five-stars{width:100%;z-index:2;}
.star-rating .current-rating{z-index:1;background-position: left center;}
.star-rating a.zero-star {width:17%;z-index:8;background: url(images/no_star.png) left top no-repeat;}
.star-rating a.zero-star:hover,
.star-rating a.zero-star:active,
.star-rating a.zero-star:focus {background-position: left center;}
.star-rating a.zero-selected {background-position: left center;}

Eu defini um tamanho de 180px para todo o DIV. É uma rápida tentativa de alinhar tudo. No Crhome fica OK, mas não no Firefos. Você pode utilizar alguma outra técnica para alinhar. De qualquer maneira, você precisar das seguintes imagens:

• star.png
• no_star.png
• star_on.png
• star_off.png

Era possível utilizar menos imagens, mas eu fiquei com preguiça para atualizar tudo… Então, depois de criarmos as funções, atualizar o modelo e criar o CSS, só nos resta criar o JavaScript.

Novo JavaScript

Nós vamos usar jQuery aqui, então você precisa verificar se já está utilizando ele ou se precisa adicionar a referência no seu blog. No nosso arquivo js temos duas funções. Talvez não esteja muito otimizadas, mas funcionam

function clearSelected() {
    $('.star-rating a.zero-star').removeClass('zero-selected');
    $('.star-rating a.one-star').removeClass('current-rating');
    $('.star-rating a.two-stars').removeClass('current-rating');
    $('.star-rating a.three-stars').removeClass('current-rating');
    $('.star-rating a.four-stars').removeClass('current-rating');
    $('.star-rating a.five-stars').removeClass('current-rating');
}

function rateClick(num) {
    switch (num) {
        case 0:
            clearSelected();
            $('.star-rating a.zero-star').addClass('zero-selected');
            $('#rate').val('0');
            break;
        case 1:
            clearSelected();
            $('.star-rating a.one-star').addClass('current-rating');
            $('#rate').val('1');
            break;
        case 2:
            clearSelected();
            $('.star-rating a.two-stars').addClass('current-rating');
            $('#rate').val('2');
            break;
        case 3:
            clearSelected();
            $('.star-rating a.three-stars').addClass('current-rating');
            $('#rate').val('3');
            break;
        case 4:
            clearSelected();
            $('.star-rating a.four-stars').addClass('current-rating');
            $('#rate').val('4');
            break;
        case 5:
            clearSelected();
            $('.star-rating a.five-stars').addClass('current-rating');
            $('#rate').val('5');
            break;
    }
}

Na primeira função nós limpamos as classes que indicam a seleção dos links. Na segunda nós adicionamos a classe indicando a seleção a atualizamos o input com o valor correto.

Como Exibir a Média das Avaliações

Esta seção é uma atualização nesse artigo. Atualizado em 27 de Julho de 2011.

Algumas pessoas já haviam me perguntado sobre como fazer isso, então resolvi atualizar o artigo. Na realidade é bem simples calcular a média das avaliações dos comentários. Primeiro, precisamos adicionar a seguinte função no nosso arquivo functions.php:

function get_average_ratings($id) {
    $comment_array = get_approved_comments($id);
    $count = 1;

    if ($comment_array) {
        $i = 0;
        $total = 0;
        foreach($comment_array as $comment){
            $rate = get_comment_meta($comment->comment_ID, 'rate');
            if(isset($rate[0]) && $rate[0] !== '') {
                $i++;
                $total += $rate[0];
            }
        }

        if($i == 0)
            return false;
        else
            return round($total/$i);
    } else {
        return false;
    }
}

Essa função vai buscar todos os comentários aprovados de acordo com o ID do post passado como parâmetro, percorrendo esses comentários e fazendo a soma total das avaliações. Serão somados apenas quando um valor for definido para a avaliação. Ou seja, caso um usuário não dê sua nota, o valor não será calculado. A função vai retornar a média das avaliações ou false, caso não existam comentários aprovados.

Posteriormente você pode chamar essa função no arquivo single.php. Você pode usar a função para verificar se existem avaliações. Se existirem, você pode usar a função movie_grade() para exibir as imagens corretamente. O código poderia ser algo assim:

<?php (get_average_ratings($post->ID))?movie_grade(get_average_ratings($post->ID)):'Não disponível'; ?>

Conclusão

Isso completa esse artigo. É possível utilizar o que mostrei aqui para criar qualquer tipo de entrada nos comentários. Dessa maneira você pode tornar não apenas seu blog único, mas também a discussão que ocorre nele. Aqui está uma tela do resultado (mais ou menos):

Sistema de avaliação

Campos Personalizados

Os campos personalizados do WordPress permitem adicionar informações diferentes ao seu post. Quando se usa os campos personalizados, você pode exibir esses valores diretamente no seu tema de uma maneira que seus posts sempre tenham um layout parecido mesmo com diferente bloggers. Era muito comum o uso dos campos personalizados para adicionar miniaturas aos posts, mas hoje em dia temos a Imagem destacada para isso. Mas ainda podemos usar os campos personalizados para informações diferentes como, por exemplo, o nível de dificuldade de um tutorial.

Existem duas maneiras de se fazer isso: a maneira padrão e a personalizada.

Campos Personalizados Padrão

A maneira padrão para se utilizar os campos personalizados é bastante simples. Quando você cria um novo post, você pode ver depois do Resumo e dos trackbacks uma área chamada Campos personalizados. É uma tela como essa:

Campos Personalizados Padrão

Como você pode ver, é possível adicionar quantos campos você desejar. Você deve definir o nome do campo e o valor do mesmo. Depois é só adicionar esse campo no modelo do seu tema usando a função get_post_meta($post_id, $key, $single). Aqui está um pequeno exemplo no caso do nível de dificuldade do tutorial:

<?php if ( get_post_meta($post->ID, 'dificuldade', true) ) : ?>
        Dificuldade: <?php echo get_post_meta($post->ID, 'dificuldade', true); ?>
<?php endif; ?>

Mas você pode simplificar esse processo.

Campos Personalizados Pré-definidos

No arquivo functions.php do seu tema, você pode pré-definir quais campos você quer para o seu tema. É claro que você pode implementar isso de diferentes maneiras, eu vou mostrar uma delas. Então abra o arquivo functions.php e siga os próximos passos.

Passo 1 – Definição dos Campos

Vamos começar definindo os campos que desejamos. Vamos fazer isso criando um array com as informações de cada campo. Nesse exemplo vou criar dois campos, o nível de dificuldade e um video tutorial (usando o ID do video no YouTube). Os exemplos estão em inglês.

    $theme_metaboxes = array(
       "difficulty" => array (
            "name"      => "difficulty",
            "default"   => "3",
            "label"     => __('Tutorial Difficulty Level', 'mytheme'),
            "type"      => "text",
            "desc"      => __('Enter the difficulty level here. Use only integer numbers from 0 (zero) to 5 (five).', 'mytheme')
        ),
       "screencast" => array (
            "name"      => "screencast",
            "default"   => "",
            "label"     => __('YouTube Screencast', 'mytheme'),
            "type"      => "text",
            "desc"      => __('Enter the YouTube ID here. For example: http://www.youtube.com/watch?v=SuNprTu5Y5c, use only the "SuNprTu5Y5c" value. Use the original studio trailer if possible.', 'mytheme')
        )
    );

Como você pode ver definimos as seguintes informações:

• name: nome do campo;
• default: valor padrão para o campo;
• label: texto exibido para o usuário;
• type: tipo da tag HTML input;
• desc: descrição exibida após o campo.

Passo 2 – Adicionar os Campos na Inserção de Posts

Agora precisamos adicionar o código HTML na página do WordPress de inserção. Vamos criar duas funções e adicionar uma ação. Aqui está o código:

    function custom_fields_box_content() {
            global $post, $theme_metaboxes;
            foreach ($theme_metaboxes as $theme_metabox) {
                    $theme_metaboxvalue = get_post_meta($post->ID,$theme_metabox["name"],true);
                    if ($theme_metaboxvalue == "" || !isset($theme_metaboxvalue)) {
                            $theme_metaboxvalue = $theme_metabox['default'];
                    }
                    echo "\t".'<p>';
                    echo "\t\t".'<label for="'.$theme_metabox['name'].'" style="font-weight:bold; ">'.$theme_metabox['label'].':</label>'."\n";
                    echo "\t\t".'<input type="'.$theme_metabox['type'].'" value="'.$theme_metaboxvalue.'" name="'.$theme_metabox["name"].'" id="'.$theme_metabox['name'].'"/><br/>'."\n";
                    echo "\t\t".$theme_metabox['desc'].'</p>'."\n";
            }
    }

    function custom_fields_box() {
            if ( function_exists('add_meta_box') ) {
                    add_meta_box('theme-settings',__('Custom Settings', 'mytheme'),'custom_fields_box_content','post','normal','high');
            }
    }

    add_action('admin_menu', 'custom_fields_box');

Nesse código nós usamos o array criado anteriormente para criar o código HTML na área administrativa, quando criarmo um novo post. O resultado é esse:

Campos Personalizados Aprimorados

Muito mais amigável, você não acha?

Passo 3 – Usando os Valores

A última parte é a manipulação dos valores. Nós precisamos de outra ação para adicionar/atualizar/apagar os valores. Então vamos criar mais uma função para isso:

    function custom_fields_insert($pID) {
        global $theme_metaboxes;
        foreach ($theme_metaboxes as $theme_metabox) {
            $var = $theme_metabox["name"];
            if (isset($_POST[$var])) {
                if( get_post_meta( $pID, $theme_metabox["name"] ) == "" )
                    add_post_meta($pID, $theme_metabox["name"], $_POST[$var], true );
                elseif($_POST[$var] != get_post_meta($pID, $theme_metabox["name"], true))
                    update_post_meta($pID, $theme_metabox["name"], $_POST[$var]);
                elseif($_POST[$var] == "")
                    delete_post_meta($pID, $theme_metabox["name"], get_post_meta($pID, $theme_metabox["name"], true));
            }
        }
    }

    add_action('wp_insert_post', 'custom_fields_insert');

Nesse código utilizamos funções do WordPress para adicionar, atualizar e apagar os valores de acordo com os campos que definimos.

Para ser possível utilizar esses campos, você pode fazer o mesmo que fizemos nos campos personalizados do WordPress. Você pode também criar uma nova função para isso. Por exemplo, no caso do video nós poderíamos criar uma função que exibisse o video somente se o valor do campo fosse preenchido:

function screen_cast($id) {
    if ($id) {
        echo '<div class="youtube">'.
             '<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/'.$id.
             '?fs=1&amp;hl=pt_BR"></param>'.
             '<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>'.
             '<embed src="http://www.youtube.com/v/'.$id.'?fs=1&amp;hl=pt_BR" type="application/x-shockwave-flash" '.
             'allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>'.
             '</div>';
    }
}

Com essa função, precisaríamos apenas adicionar uma simples chamada no nosso arquivo single.php:

        <?php screen_cast(get_post_meta($post->ID, 'screencast', true)); ?>

Isso é tudo sobre os campos personalizados!

Taxonomias Personalizadas – Custom Taxonomies

A última coisa que quero mostrar são as taxonomias personalizadas. Elas permitem adicionar diversas informações de um mesmo tipo. Elas funcionam de uma maneira semelhante às tags do post. Tudo que você precisa é mais uma função e uma ação no seu arquivo functions.php. Nesse exemplo vou adicionar uma taxonomia para uma lista de atores. O código necessário é:

    function create_custom_taxonomies() {
        register_taxonomy('actor', 'post', array(
            'hierarchical' => false, 'label' => __('Actor(s)', 'mytheme'),
            'query_var' => true, 'rewrite' => true));
    }
    add_action('init', 'create_custom_taxonomies', 0);

É só isso. Bem simples. O resultado é esse:

Taxonomias Personalizadas

Para mostrar os valores no arquivo single.php, você pode usar o seguinte código:

                <?php echo get_the_term_list($post->ID, 'actor', __('<p>Actor(s): ', 'mytheme'), ', ', '</p>'); ?>

Conclusão

Nesse artigo mostrei como utilizar taxonomias e campos personalizados. Essas duas características do WordPress permitem que você transforme seus posts deixando-os únicos. Além disso, essas características permitem que você melhore a usabilidade do WordPress separando as informações em diferentes campos.

Os métodos públicos disponibilizados por esta classe são:

• firstPersonView($map, $curX = 0, $curY = 0, $curAng = 0, $path = “”) - construtor, necessita pelo menos da matriz de coordenadas do mapa com as imagens (no fim do post tem um exemplo). Você deve também fornecer a posição X, Y e o ângulo (0, 90, 180,270). O último parâmetro é o caminho para as imagens.
• checkForward() e moveForward() – métodos para verificar se é possível movimentar para a frente e movimentar para a coordenada desejada.
• checkBack() e moveBack() – mesmo que as anteriores, mas movimentando para trás.
• checkRight() e moveRight() – mesmo que as anteriores, mas movimentando para a direita.
• checkLeft() e moveLeft() – mesmo que as anteriores, mas movimentando para a esquerda.
• checkTurnRight() e turnRight() – mesmo que as anteriores, mas virando para a direita – muda o ângulo.
• checkTurnLeft() e turnLeft() – mesmo que as anteriores, mas virando para a esquerad – muda o ângulo.

Faça o download da classe com o exemplo: fpv.zip

Exemplo

Para criar a instância da classe você deve fornecer a matriz com as coordenadas e os ângulos, dessa maneira:

$map[X][Y][Angle] = "image";

Então, um exemplo com 4 posições seria assim:

$map[0][1][0] = "1-0.jpg";
$map[0][1][90] = "1-90.jpg";
$map[0][1][180] = "1-180.jpg";
$map[0][1][270] = "1-270.jpg";
$map[1][1][0] = "2-0.jpg";
$map[1][1][90] = "2-90.jpg";
$map[1][1][180] = "2-180.jpg";
$map[1][1][270] = "2-270.jpg";
$map[1][0][0] = "3-0.jpg";
$map[1][0][90] = "3-90.jpg";
$map[1][0][180] = "3-180.jpg";
$map[1][0][270] = "3-270.jpg";
$map[1][2][0] = "4-0.jpg";
$map[1][2][90] = "4-90.jpg";
$map[1][2][180] = "4-180.jpg";
$map[1][2][270] = "4-270.jpg";

Podemos representar estas coordenadas através de uma tabela:

Podemos perceber que temos apenas 4 posições possíveis com 16 imagens, representando cada ângulo de cada posição. Ainda é necessário criar uma página HTML com um Form ou links com “query strings” para executarmos os métodos da classe. Esse é o código exemplo:

<?php

require_once('fpv.class.php');

// MAP MATRIX
$map[0][1][0] = "1-0.jpg";
$map[0][1][90] = "1-90.jpg";
$map[0][1][180] = "1-180.jpg";
$map[0][1][270] = "1-270.jpg";
$map[1][1][0] = "2-0.jpg";
$map[1][1][90] = "2-90.jpg";
$map[1][1][180] = "2-180.jpg";
$map[1][1][270] = "2-270.jpg";
$map[1][0][0] = "3-0.jpg";
$map[1][0][90] = "3-90.jpg";
$map[1][0][180] = "3-180.jpg";
$map[1][0][270] = "3-270.jpg";
$map[1][2][0] = "4-0.jpg";
$map[1][2][90] = "4-90.jpg";
$map[1][2][180] = "4-180.jpg";
$map[1][2][270] = "4-270.jpg";

if (isset($_POST["current_angle"])) {
    $fpv = new firstPersonView($map, $_POST["current_x"], $_POST["current_y"], $_POST["current_angle"], "images");
} else {
    $fpv = new firstPersonView($map, 0, 1, 0, "images");
}

if($_POST['go-forward']) {
    $fpv->goForward();
} else if($_POST['go-back']) {
    $fpv->goBack();
} else if($_POST['go-left']) {
    $fpv->goLeft();
} else if($_POST['go-right']) {
    $fpv->goRight();
} else if($_POST['turn-right']) {
    $fpv->turnRight();
} else if($_POST['turn-left']) {
    $fpv->turnLeft();
}

?>
<html>
    <head>
        <title>First Person View Class - Example</title>
    </head>
    <body>
        <p>Please go to
            <a href="http://oscardias.com/php/php-class-first-person-view/">http://oscardias.com/php/php-class-first-person-view/</a>
            if ou need more info.
        </p>
        <form name="movements" action="example.php" method="post">
            <input type="submit" name="turn-left" value="Turn Left" <?php echo ($fpv->checkTurnLeft())?"":"disabled"; ?>/>
            <input type="submit" name="go-left" value="Move Left" <?php echo ($fpv->checkLeft())?"":"disabled"; ?>/>
            <input type="submit" name="go-forward" value="Move Forward" <?php echo ($fpv->checkForward())?"":"disabled"; ?>/>
            <input type="submit" name="go-back" value="Move Back" <?php echo ($fpv->checkBack())?"":"disabled"; ?>/>
            <input type="submit" name="go-right" value="Move Right" <?php echo ($fpv->checkRight())?"":"disabled"; ?>/>
            <input type="submit" name="turn-right" value="Turn Right" <?php echo ($fpv->checkTurnRight())?"":"disabled"; ?>/>
            <!-- BEGIN IMPORTANT HIDDEN INFO -->
            <input type="hidden" name="current_x" value="<?php echo $fpv->currentX; ?>" />
            <input type="hidden" name="current_y" value="<?php echo $fpv->currentY; ?>" />
            <input type="hidden" name="current_angle" value="<?php echo $fpv->currentAngle; ?>" />
            <!-- END IMPORTANT HIDDEN INFO -->
        </form>
        <img id="view" src="<?php $fpv->currentView() ?>" />
    </body>
</html>

Coloquei o exemplo online. Você pode ver como ficou diretamente em: http://oscardias.com/other/fpv/example.php

Notas

Esta é a primeira versão da classe. Eu não tive muito tempo para escrever em detalhes, mas, se você ficou interessado, deixe um comentário. Nesse caso vou dedicar um pouco mais de tempo para a classe .

Essa classe foi aprovada no site PHPClasses.org e recebeu uma “notificação notável”. O link para a classe no PHPClasses é http://www.phpclasses.org/package/6460.html.

Introdução

Recentemente escrevi o post Adicionando Botões para Twitter, Facebook, Buzz e Outros, onde expliquei como criar botões de compartilhamento de algumas mídias sociais. Mas quando escrevi este post, não havia um código oficial do Twitter para esse botão de compartilhamento. Agora isso mudou, pois o Twitter liberou um código para isso. Portanto vamos ver isso nesse artigo.

Código

O código é bem simples e pode ser obtido a partir da página Twitter / Tweet Button. Mas, para simplificar, aqui está o código necessário:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://yourdomain.com" data-text="Texto" data-count="vertical" data-via="oscardias">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Como você pode ver, podemos customizar as seguintes informações:

• data-url: link que será compartilhado. Se você apagar essa propriedade, o link atual será compartilhado por padrão. Além disso, o Twitter utilizará seu próprio encurtador para diminuir o link.
• data-text: texto que será compartilhado. Se você apagar essa propriedade, o título da página atual será compartilhado por padrão.
• data-count: estilo do botão. Pode conter os valores: vertical, horizontal ou none. O valor “vertical” mostrará um botão grande com o contador sobre o botão. O valor “horizontal” mostrará o botão pequeno com o contador ao lado. Já o valor “none” mostrará apenas o botão, sem o contador.
• data-via: nome do usuário do Twitter que será enviado como “RT @”.

Além disso também é possível alterar o texto dentro do link. Esse será o texto que vai aparecer dentro do botão.

Conclusão

E isso é tudo que precisamos para adicionar o botão oficial do Twitter. Muitos sites já estão atualizando o botão do Tweetmeme pelo botão do Twitter, mas a decisão sobre qual utilizar depende de cada um. Obrigado pela visita.

Se você quiser, pode baixar nosso tema aqui.

Introdução

Este é o sexto e último artigo dessa série sobre criação de temas para o WordPress. Aqui está uma lista de todos os artigos:

Criando um Tema para WordPress (Parte 1): Photoshop
Criando um Tema para WordPress (Parte 2): Introdução
Criando um Tema para WordPress (Parte 3): Cabeçalho
Criando um Tema para WordPress (Parte 4): Página Principal
Criando um Tema para WordPress (Parte 5): Páginas e Artigos

Hoje eu vou apenas finalizar o nosso rodapé e adicionar alguns estilos. Para completar, também vou listar os plugins que tenho usado.

Rodapé

Atualmente é assim que nosso rodapé está:

Nosso rodapé antes das alterações

Para corrigirmos isso, abra o arquivo footer.php.

1. Atualize a informação do pacote: estamos utilizando @subpackage MyTheme_Theme.
2. Substitua as ocorrências de ‘kubrick’ por ‘mytheme’.
3. Remova a tag <hr> que tem no início do arquivo.
4. Adicione um <div class=”container_12″> depois do <div id=”footer”>.
5. Dentro do DIV que criamos no passo anterior, adicione duas DIV’s. Primeiro vamos adicionar os links do nosso blog no lado esquerdo. Adicione o seguinte código:

           <div class="floatleft">
               <ul>
                   <li class="page_item first_page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home', 'oscardias'); ?>"><?php _e('Home', 'oscardias'); ?></a></li>
                   <?php wp_list_pages('sort_column=post_title&title_li=');?>
   
               </ul>
           </div>
   

6. Depois vamos adicionar as informações relativas ao nosso blog e tema alinhadas a direita. Adicione o seguinte código:

           <div class="floatright alignright">
               &copy; 2010 <a href="<?php echo get_option('home'); ?>/">Oscar Dias</a>
               <br /><?php printf(__('%1$s is powered by %2$s', 'oscardias'), get_bloginfo('name'),'<a href="http://wordpress.org/">WordPress</a>'); ?>
   
               <br /><?php printf(__('%1$s and %2$s', 'oscardias'), '<a href="' . get_bloginfo('rss2_url') . '">' . __('Entries (RSS)', 'oscardias') . '</a>', '<a href="' . get_bloginfo('comments_rss2_url') . '">' . __('Comments (RSS)', 'oscardias') . '</a>'); ?>
   
           </div>
   

7. Termine as alterações adicionando um <div class=”clear”></div> Depois que você fechar o <div class=”container_12″>.

Bem simples. Aqui está o código final:

<?php
/**
 * @package WordPress
 * @subpackage MyTheme_Theme
 */
?>

<div id="footer" role="contentinfo">
    <div class="container_12">
        <div class="floatleft">
            <ul>
                <li class="page_item first_page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home', 'oscardias'); ?>"><?php _e('Home', 'oscardias'); ?></a></li>
                <?php wp_list_pages('sort_column=post_title&title_li=');?>

            </ul>
        </div>
        <div class="floatright alignright">
            &copy; 2010 <a href="<?php echo get_option('home'); ?>/">Oscar Dias</a>
            <br /><?php printf(__('%1$s is powered by %2$s', 'oscardias'), get_bloginfo('name'),'<a href="http://wordpress.org/">WordPress</a>'); ?>

            <br /><?php printf(__('%1$s and %2$s', 'oscardias'), '<a href="' . get_bloginfo('rss2_url') . '">' . __('Entries (RSS)', 'oscardias') . '</a>', '<a href="' . get_bloginfo('comments_rss2_url') . '">' . __('Comments (RSS)', 'oscardias') . '</a>'); ?>

        </div>
    </div>
    <div class="clear"></div>
</div>
		<?php wp_footer(); ?>
</body>
</html>

E o resultado antes de adicionarmos os estilos:

Footer without the necessary styles

Então agora vamos aos estilos.

Estilos

Para criarmos os novos estilos, vamos abrir o arquivo styles.css.

1. Primeiro faça o download dessa imagem e salve a mesma no diretório images. Vamos usar essa imagem no fundo do nosso DIV.
2. Agora vamos criar o estilo para o DIV principal.

   #footer {
       background: #fff url('images/footer.jpg') repeat-x top;
       margin: 0 auto;
       padding-top:100px;
       padding-bottom:20px;
   }
   

3. Continuando, adicione os estilos para as listas (UL e LI).

   #footer ul {
       list-style: none;
       margin:0;
       padding:0;
   }
   #footer ul li {
       float:left;
       margin:5px 0 5px 5px;
       padding-right:5px;
       border-right: 1px solid #000;
   }
   

4. Agora vamos criar os estilos para os diferentes alinhamentos.

   .floatleft {
       float:left;
       margin-left: 10px;
   }
   .floatright {
       float:right;
       margin-right: 10px;
   }
   .alignleft {
       text-align: left;
   }
   .alignright {
       text-align: right;
   }
   .center {
       text-align: center;
   }
   

5. Para finalizar, vamos criar algumas classes adicionais para as sombras (CSS3) e as imagens.

   .box-shadow {
       box-shadow: 3px 3px 3px #000;
       -moz-box-shadow: 3px 3px 3px #000; /* for Firefox 3.5+ */
       -webkit-box-shadow: 3px 3px 3px #000; /* for Safari and Chrome */
   }
   .text-shadow {
       text-shadow: #000 2px 2px 2px;
   }
   img.aligncenter, img.center {
       display: block;
       margin-left: auto;
       margin-right: auto;
   }
   .frame {
       padding:5px;
       background: #d2d2d2;
       border: 2px solid #808080;
   }

Isso é tudo. Com isso finalizamos o desenvolvimento do nosso tema. Eu não mostrei todos os arquivos aqui, mas os arquivos que faltaram devem ser desenvolvidos seguindo as mesmas idéias que usamos durante essas 6 partes da série.

Para complementar, quero mostrar alguns plugins que eu uso.

Plugins

Aqui está uma rápida lista de plugins com uma explicação sobre cada um.

AddToAny: Share/Bookmark/Email Button

Plugin para compartilhamento. Bem prático e completo. Com apenas um botão esse plugin permite que seus usuários compartilhem em várias redes sociais.

Akismet

Esse plugin vem com a instalação padrão do WordPress. Ele filtra os comentários feitos em seu website e verifica se são spam automaticamente. Assim você não precisa verificar todos os comentários feitos no seu blog.

All in One SEO Pack

Outro plugin extremamente importante. Utilizado para melhorar o SEO do seu blog.

FD Feedburner Plugin

Se você usa o Feedburner, esse é um plugin obrigatório. Ele redireciona todos os feeds do seu blog para o feed do Feedburner.

Google Analytics for WordPress

Se você também usa o Google Analytics, esse plugin insere o código necessário automaticamente para você.

Google XML Sitemaps

Esse plugin serve para criar o sitemap do seu site automaticamente. O sitemap é usado pelos mecanismos de busca para indexar seu site, ou seja, é muito importante.

RatenTweet

Esse plugin serve para compartilhamento também. Mas ele utiliza um estilo de ranking para compartilhar as informações.

SyntaxHighlighter Evolved

Plugin responsável pela marcação da sintaxe. Ele adiciona um estilo especial para as entradas de código no seus artigos.

TweetMeme Retweet Button

Mais um serviço de compartilhamento. Usado por muitos websites.

Conclusão

Então chegamos ao fim dessa série de artigos. Eu vou escrever sobre o WordPress novamente, mas não dentro dessa série. Se você tiver comentários ou quer ver algo específico aqui, deixe sua mensagem e eu vou responder assim que possível

Baixe a última versão do nosso tema aqui (82 Kb).

Outros Artigos dessa Série
Criando um Tema para WordPress (Parte 1): Photoshop
Criando um Tema para WordPress (Parte 2): Introdução
Criando um Tema para WordPress (Parte 3): Cabeçalho
Criando um Tema para WordPress (Parte 4): Página Principal
Criando um Tema para WordPress (Parte 5): Páginas e Artigos

Introdução

Certamente você já viu algum dos ícones exibidos nesse post. E provavelmente você usa algum, ou vários, desses serviços. Mas você sabe como adicionar botões para permitir que seus leitores compartilhem suas informações? Isso que pretendo mostrar aqui. Eu busquei as referências oficias para mostrar os exemplos aqui.

Twitter

Twitter é um dos sites de mídias sociais mais famoso atualmente. Infelizmente não tem um botão para tweetar oficial. Mas, nesse caso, existe o Tweetmeme, que é usado por muitos sites.

Referência: http://help.tweetmeme.com/2009/04/06/tweetmeme-button/

Esse exemplo é do botão de tamanho grande. É possível modificar o usuário do retweet e a URL a ser compartilhada. Você pode definir um URL “encurtado” ou usar o parâmetro tweetmeme_service para isso. Outra opção é utilizar o botão compacto adicionando o código “tweetmeme_style = ‘compact’;“.

 <script type="text/javascript">
    tweetmeme_source = 'username';
    tweetmeme_url = 'http://yourdomain.com';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Também é possível alterar o texto que será “tweetado”. Por padrão será utilizado o título da página, porém é possível alterar esse texto com o seguinte código:

<meta name="tweetmeme-title" content="Texto modificado" />

Facebook

Facebook é outra mídia social muito utilizada. E possui ótimas ferramentas para desenvolvedores. E a criação de botões não poderia ser diferente. Você pode escolher como deseja o botão e o Facebook fornece o código para você no seguinte site:

Referência: http://www.facebook.com/share/

Aqui eu mostro um exemplo do botão grande. A URL e o texto serão buscados automaticamente. Como não temos o limite de 140 caracteres, como no Twitter, não precisamos nos preocupar muito em mudar esses valores.

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Se você preferir o botão menor, pode utilizar ‘type=”button_count“‘. Você também pode especificar o text e a URL é claro, basta mudar o HREF para algo assim: http://www.facebook.com/sharer.php?u=url&t=texto

Google Buzz

Google Buzz é relativamente recente se comparado a outras mídias sociais. Foi criado como uma resposta a popularidade do Twitter. Como todos os produtos do Google, tem boas ferramentas.

Referência: http://code.google.com/apis/buzz/buttons_and_gadgets.html

Entre as diferentes maneiras de exibir os botões, uma das mais personalizáveis utiliza JavaScript e HTML5. Aqui está um exemplo do botão com tamanho normal.

<a href="http://www.google.com/buzz/post"
    class="google-buzz-button"
    title="Google Buzz"
    data-message="Texto compartilhado"
    data-url="http://yourdomain.com"
    data-locale="en"
    data-button-style="normal-count"></a>
    <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

Para o botão com tamanho menor, basta utilizar ‘data-button-style=”small-count”‘.

StumbleUpon

StumbleUpon possui um dos melhores sites para criar os botões. Basta você entras nesse site:

Referência: http://www.stumbleupon.com/buttons/

Lá você pode selecionar o estilo de botão e se você deseja adicionar em alguma plataforma existente ou no seu próprio site. O código gerado para o botão maior é esse:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=http://yourdomain.com"></script>

Você pode remover o texto ‘&r=http://yourdomain.com‘ se você quiser. Nesse caso o JavaScript vai utilizar a URL da página.

Reddit

Reddit tem várias opções de botões. Com tamanho pequeno, grande e até com um ET

Referência: http://www.reddit.com/buttons/

Nesse link você pode selecionar qual botão você deseja e verificar o código necessário. Também possuí ótimas formas de personalizar os dados, tudo feito por JavaScript. O código básico está aqui:

<script type="text/javascript" src="http://reddit.com/static/button/button2.js"></script>

Se você mudar para button1.js, você terá o botão pequeno. Se você mudar para button3.js terá o logo com o desenho do ET. E para personalizar, você pode usar as seguintes opções:

<script type="text/javascript">reddit_url='[URL]'</script>
<script type="text/javascript">reddit_target='[COMMUNITY]'</script>
<script type="text/javascript">reddit_title='[TITLE]'</script>
<script type="text/javascript">reddit_newwindow='1'</script>
<script type="text/javascript">reddit_bgcolor='[COLOR]'</script>
<script type="text/javascript">reddit_bordercolor='[COLOR]'</script>

Digg

Digg é outra mídia social muito interessante com boas opções de botões. Mas o código é um pouco diferente. Possui um código base e a personalização é feita diretamente na tag A.

Referência: http://about.digg.com/button

Esse é o código JavaScript básico:

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

Para posicionar o botão, você precisa adicionar o seguinte código onde você quer que ele apareça:

<a class="DiggThisButton DiggMedium"></a>

Todas as opções podem ser adicionadas nessa última tag.Por exemplo, para exibir o botão pequeno você deve alterar o atributo class da tag para “DiggThisButton DiggCompact“. Se você quiser modificar a URL que será compartilhada pode usar o seguinte código:

<a class="DiggThisButton DiggMedium" href="http://yourdomain.com"></a>

Conclusão

Nesse rápido artigo eu relacionei alguns botões para mídias sociais. Eu escolhi os que tinham contador, pois eles nos fornecem uma rápida maneira de ver a popularidade do post ou página. Se você for utilizar os botões, é uma boa idéia visitar as referências que mencionei aqui.