Continuando o assunto de variáveis veremos hoje aplicação direta em URL, para que elas exerçam funções variáveis.

Aplicando em URLs

Como exemplo vamos usar o iframe que gera o botão compartilhar do Facebook:

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.noticiaeblog.com/2011/03/variaveis-do-blogger-em-url-iframe-e.html&layout=button_count&show_faces=false&width=110&action=like&colorscheme=light &height=20'></iframe>

Primeiro passo é identificar as variáveis, veja que aqui é o link da postagem. Agora devemos colocar o expr: antes do atributo src, para que o Blogger identifique as variáveis presentes na URL.Vale lembrar também que todas as aspas devem ser comuns, ou seja, de uma só não pode ser as dublas. Agora isolaremos tudo o que antecede as váriaveis com as aspas dublas veja:

<iframe allowTransparency='true' frameborder='0' scrolling='no' expr:src='"http://www.facebook.com/plugins/like.php?href="http://www.noticiaeblog.com/2011/03/variaveis-do-blogger-em-url-iframe-e.html"&layout=button_count&show_faces=false&width=110&action=like&colorscheme=light &height=20"'></iframe>

Agora iremos substituir o trecho em vermelho pela variável do Blogger, mais observe que adicionaremos um caractere de união, veja:

<iframe allowTransparency='true' frameborder='0' scrolling='no' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=110&action=like&colorscheme=light &height=20"'></iframe>

Veja o caractere mais( + ), uni o que está antes com o que está depois. Lembre-se também de adicionar um espaço antes e depois do caractere.

Adequando Caracteres Incompatíveis com o Blogger

O Blogger é incompatível com alguns caracteres, mais estes podem ser convertidos para um formato  que seja mais adequado veja o exemplo do caractere “&”, no código acima daria erro devido a presença deste símbolo, por isso após ser convertido ele ficou assim “&amp;” aí é substituir todos os “&” por isto, veja:

<iframe allowTransparency='true' frameborder='0' scrolling='no' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=20"'></iframe>

Pronto agora é só adicionar ao Blogger!

Leia mais...

images

As variáveis do Blogger são uma forma que temos de fazer com que nosso blog integre vários serviços sem que tenhamos que modifica-lós para cada postagem, isto faz com que tenhamos uma plataforma automatizada e dinâmica, contudo temos que conhece-las para para criarmos funções baseadas em URL,scripts e iframes. Hoje veremos como integrar essas funções ao nosso blog. Em uma postagem anterior expliquei como integrar de forma fácil variáveis a um tipo de Script(sem URL), ou seja a scripts completos postados direto no HTML:

Variáveis HTML do Blogger

Identificando Variáveis

O Primeiro passo para unir variáveis a uma URL de iframe, script ou links, é identificar o que necessita ser substituído, como exemplo pegaremos um código simples do twitter usado para enviar links das postagens para o microblog, veja:

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

Observe que o endereço do Google é uma variável pois queremos que ele seja substituído pelo link da postagem a ser envida para o Twitter, veja também que Google é o titulo do endereço, no lugar dele queremos o titulo da nossa postagem.

Conhecendo as variáveis

As variáveis do Blogger são muito simples veja:

Variáveis de Postagem:

data:post   -> Todas as variáveis de postagem iniciam assim, veja agora os atributos

  • data:post.title – exibe o título da postagem
  • data:post.url – exibe a URL da postagem
  • data:post.author – exibe o autor da postagem

Aplicando as variáveis

Vamos aplicar as variáveis naquele script anterior, veja como fica:

<a href=http://twitter.com/share class="twitter-share-button" expr:data-url='data:post.url' expr:data-text='data:post.title' data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Observe que substituímos o endereço do Google pela variável correspondente a URL, veja também que o título Google foi substituído pela variável correspondente ao título. Antes do inicio de cada atributo adicionamos o termo expr: ele funciona como um ativador das variáveis, sem ele as variáveis seriam interpretadas como texto, por isso é muito importante adiciona-ló.

Na próxima postagem veremos como adicionar variáveis direto na URL…

Leia mais...