Adicionar Caixa de Assinar RSS no meio do artigo automaticamente

Em meio as estratégias que venho desenvolvendo para a migração para o EscolaSites, pensei em adicionar uma caixa de assinar RSS aos meus artigos, mas de que forma irei fazer? É certo que essa estratégia pode ajudar e muito no aumento do número de subscritores.

Primeiramente pensei em fazer o mais fácil, mas um tanto quanto trabalhoso, adicionar manualmente o HTML necessário a cada um de meus artigos, mas pensei que deveria ter uma maneira mais prática de o fazer. Como desenvolvedor pensei em diversas maneiras, mas acabei chegando em um resultado fácil, simples e bem profissional.

Porque deveria incluir a caixa em meus artigos

Muitos de seus visitantes simplesmente irão ignorar a sua barra lateral, se concentrando apenas no contéudo a que estão a procura, se você usa métodos como o popup dominations, esses efeitos são minimizados, mas ainda são poucos os que usam.

Primeiro irei descrever o que precisei usar para chegar a conclusão e tão logo irei inserir o código necessário para que todos possam aumentar o número de subscritores.

jQuery

jQuery é uma biblioteca javascript que torna o desenvolvimento um tanto quanto mais fácil, tornando os códigos bem resumidos e muito mais profissionais, com ele você pode fazer poderosos efeitos, validações e outras funcionalidades.

.append

o append é um método jQuery que adiciona ao conteúdo de algum elemento HTML, outro conteúdo, podendo ele ser apenas uma frase, ou uma div inteira como é o nosso caso. Simplesmente um fantástico método que pode nos dar infinitos poderes na manipulação do DOM de nossa página.

Adicionando automaticamente a caixa de Assinar RSS

Agora irei mostrar o código que promete trazer muitos subscritores para a sua lista:

{code type=html}

<div id=”receber”>
<h3>Está gostando? Considere assinar para receber atualizações em seu email</h3>
<form class=”newsletter” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=escolaphp’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
<input style=”display: initial;” id=”input-rss” class=”input-rss” type=”text” name=”email” />
<input type=”hidden” value=”escolaphp” name=”uri” /><input type=”hidden” name=”loc” value=”pt_BR” />
<input id=”btn-assinar” class=”mais” style=”width: 150px;margin-top: 1px;font-size: 15px;” type=”submit” value=” ASSINAR GRÁTIS” />
</form>
<br clear=”left” />
</div>

{/code}

{code type=javascript}

<script type=”text/javascript”>
var j = jQuery.noConflict();
j(‘.entry-content p:eq(3)’).append(j(‘#receber’));

</script>

{/code}

O primeiro trecho de código, é apenas o HTML de nossa caixa, basicamente o mesmo que o feedburner nos fornece, o segundo trecho é onde mora o segredo.

Primeiramente fazemos uma chamada noConflict() ao Jquery para que não haja nenhum confronto com outras funções Jquery o tema, e terceira linha encontramos o código que faz a diferença, adiciona ao 4 parágrafo do artigo a div que criei no código HTML mais acima. Caso deseje colocá-lo em outra posição, você pode alterar o valor de 3 para outro.

Neste mesmo artigo você pode conferir o resultado que pode ser alcançado. Créditos do CSS da caixa para Iago Melanias do Blogando com Facilidade.

Gostou do artigo? Possui alguma dúvida? Sabe de estratégias melhores? Comente! E não deixe de compartilhar o conhecimento!

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br