Infinite Scroll do WordPress e PollDaddy

Índice de Conteúdo

Integração do Infinite Scroll com PollDaddy (Ratings)
Integração do Infinite Scroll com ShareThis
Referências

Um dos recursos que tem aparecido bastante em sites e portais é o Infinite Scroll. Como o nome já diz, esse recurso faz com que as paginações de um site carreguem automaticamente quando o usuário desce até o final da página, lá embaixo de todas as notícias ou posts. Um dos exemplos mais conhecidos é o próprio Facebook, que em seu Feed de notícias vai carregando infinitamente os posts à medida que o usuário vai descendo a página. O objetivo é que o usuário não tenha que clicar e esperar outra página carregar para ver mais conteúdo… Convenhamos que é um ótimo recurso de usabilidade :)

No WordPress, existe um plugin chamado Infinite-Scroll que faz justamente isso. Toda vez que um usuário vai até o final da página, o plugin reconhece e manda uma requisição AJAX pedindo a próxima página. Quando o navegador a recebe, o plugin monta automaticamente via JS e seletores CSS a parte dos posts no lugar correto, implementando assim o recurso de scroll infinito.

Em uma grande variedade de temas, ele funciona automaticamente. Mas esse não foi o caso daqui do Devin, que precisou ter uma configuração específica para o tema (o que o plugin suporta muito bem). Em resumo, eu só precisei configurar o plugin para identificar a div de conteúdo e o link que passa para a próxima página (que no WordPress é geralmente o /page/2/, /page/3/, e por aí vai). O resultado é o que dá para ver na versão atual desse site, nas listagens de posts.

Mas aí…

Problema: diversos plugins para WordPress montam a sua funcionalidade em javascript. Quando uma página é carregada via AJAX e montada em outra, o javascript da página não é carregado automaticamente. Por isso, as páginas seguintes de listagem de posts poderiam ficar incompletas.

Para resolver isso, o Infinite-Scroll tem uma configuração chamada Callback. Uma callback serve para você executar um código JavaScript depois do carregamento do plugin. E é assim que resolvemos o problema desses plugins com o Infinite-Scroll…

Integração do Infinite Scroll com PollDaddy (Ratings)

O PollDaddy é um plugin da Automattic (mesma empresa que faz o WordPress) que disponibiliza enquetes e votações para sites. Aqui no Devin, usei o Polldaddy para fazer os “joínhas” (e os “joínhas, só que não) dos posts. Ele possui um plugin específico para WordPress, o Polldaddy Polls & Ratings, que faz a integração entre o site e o serviço da Polldaddy.

Depois de instalado e ativado, você pode dizer ao plugin para incluir automaticamente os botões nos lugares certos, mas não era o que eu queria. Como o meu tema é bem personalizado, eu queria incluir as tags em algum lugar específico.

E descobri que para incluir o PollDaddy em algum lugar específico, basta chamar a função:

<?php
if (function_exists('polldaddy_get_rating_html')) { echo polldaddy_get_rating_html(); }
?>

(Detalhe: só consegui descobrir isso depois de olhar uma linha do ChangeLog!)

Até aí tudo bem. Mas vendo como o plugin funciona, percebi que essa função de tema apenas gera um trecho de HTML, mas todo o conteúdo importante é gerado por um javascript. Esse javascript é executado automaticamente no rodapé da página (footer), e apesar de funcionar bem na página, quando o Infinite-Scroll carrega a outra via AJAX, esse javascript não é carregado! E não tinha função específica que pudesse ser colocada na Callback do Infinite-Scroll pra remediar isso…

A solução! O WordPress.com já tinha implementado o Infinite Scroll em seus blogs e temas, por isso o plugin do Polldaddy tinha suporte a isso (só que estava bem obscuro. Então eis a solução que encontrei:

1. Edite o arquivo functions.php de seu tema, incluindo a seguinte função:

// Suporte a Infinite Scroll + Polldaddy
// $id = ID da Coleçao no Polldaddy
function polldaddyrating($id, $postid, $title = "", $permalink = "") {
  $unique_id = is_page() ? 'wp-page-'.$postid : 'wp-post-'.$postid;
  $item_id = is_page() ? '_page_'.$postid : '_post_'.$postid;
  $unique_id = wp_strip_all_tags( $unique_id );
  $item_id   = wp_strip_all_tags( $item_id );
  $item_id   = preg_replace( '/[^_a-z0-9]/i', '', $item_id );

  $settings = json_encode(array(
                                'id'        => $id,
                                'unique_id' => $unique_id,
                                'title'     => rawurlencode( trim( $title ) ),
                                'permalink' => esc_url( $permalink ),
                                'item_id'   => $item_id
  ));

  $data = esc_attr($settings);

return <<<SCRIPT
<div class="pd-rating" id="pd_rating_holder_{$id}{$item_id}" data-settings="{$data}"></div>
<script type="text/javascript" charset="UTF-8"><!--//--><![CDATA[//><!--
PDRTJS_settings_{$id}{$item_id}={$settings};
//--><!]]></script>
SCRIPT;

}

Isso é basicamente a mesma coisa que o plugin faz quando usa o suporte à Infinite Scroll no WordPress.com. A idéia do funcionamento é inteligente: ao invés de executar um javascript, ele armazena as informações de cada post (que é um JSON) em um atributo HTML5 (data-settings) para depois ser lida pela CallBack do Infinite-Scroll.

2. Agora no arquivo do seu tema, utilize a função para gerar o HTML correto:

<?php
// Variáveis no começo do template, para serem usadas depois
$polldaddy_id = '<ID DO SEU POLLDADDY>';
$postid = get_the_ID();
$title = apply_filters( 'wp_title', get_the_title(), '', '' );
$permalink = get_permalink($postid);
?>

<?php echo polldaddyrating($polldaddy_id, $postid, $title, $permalink); ?>

Esse código vai gerar o código HTML para o post atual dentro do Loop.

3. Carregue o javascript no rodapé da sua página

Logo antes da tag </body>:

<script type="text/javascript" charset="UTF-8" src="http://i.polldaddy.com/ratings/rating.js"></script>

4. Configure o Infinite-Scroll para, no Callback, executar esse javascript novamente

Em Configurações – Infinite Scroll – Callback, adicione as seguintes linhas:

// Polldaddy Ratings
var PDRTJS_doc = document.getElementsByTagName("div");
var PDRTJS_id = "";
for (var i = 0; i < PDRTJS_doc.length; i++) {
    if (PDRTJS_doc[i].id.substring(0, 17) == "pd_rating_holder_") {
        PDRTJS_id = PDRTJS_doc[i].id.replace(/pd_rating_holder_/, "");

        var PD_SETTINGS = document.getElementById('pd_rating_holder_' + PDRTJS_id);
        PD_SETTINGS = PD_SETTINGS.getAttribute('data-settings');
        eval("PDRTJS_" + PDRTJS_id + " = new PDRTJS_RATING(" + PD_SETTINGS + ");");
    }
};

Toda vez que o Infinite Scroll carregar uma nova página via AJAX, esse javascript irá procurar por todos as tags div que começam com pd_rating_holder_, ler as configurações da tag HTML5 data-settings que geramos no passo 1 e executar o código para gerar os botões de rating.

Essa função foi obtida diretamente do rating.js e modificada para ler em tempo real os atributos HTML5.

5. Pronto!

Agora além dos ratings estarem em qualquer lugar que você queira dentro do tema, o Infinite Scroll vai executar a geração dos botões nas páginas que requisitar via AJAX.

Aproveitando a deixa, o plugin de WordPress Share This foi utilizado aqui para gerar botões para compartilhar nas redes sociais e outros sites. Este plugin também monta os botões com uma chamada javascript, e por isso a página carregada via AJAX pelo Infinite Scroll não vai executar essa montagem automaticamente.

Agora é mais fácil, basta ir em Configurações – Infinite Scroll – Callback e adicionar a linha:

// Botões do ShareThis
stButtons.makeButtons();

Referências

517.382

Integração do Infinite Scroll com PollDaddy (Ratings)

Integração do Infinite Scroll com ShareThis

Referências