terça-feira, 12 de outubro de 2010

Como colocar botões de compartilhamento do Myspace no Blogger

O MySpace é uma rede social que não pegou muito por aqui, pois teve que enfrentar um concorrente que domina o espaço virtual dos brazucas, o Orkut. Mas ele tem um público fiel, e acredito que esse tutorial terá uma finalidade. Há tempos, o MySpace divulgou o seu API, e nos presenteou com alguns botões de compartilhamento que aqui reproduzo:



<a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(document.location.toString()),'ptm','height=450,width=440').focus())">
    <img src="http://cms.myspacecdn.com/cms/ShareOnMySpace/small.png" border="0" alt="Share on MySpace" />
</a>




<a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(document.location.toString()),'ptm','height=450,width=440').focus())">
    <img src="http://cms.myspacecdn.com/cms/ShareOnMySpace/square.png" border="0" alt="Share on MySpace" />
</a>




<a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(document.location.toString()),'ptm','height=450,width=440').focus())">
    <img src="http://cms.myspacecdn.com/cms/ShareOnMySpace/medium.png" border="0" alt="Share on MySpace" />
</a>




<a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(document.location.toString()),'ptm','height=450,width=440').focus())">
    <img src="http://cms.myspacecdn.com/cms/ShareOnMySpace/large.png" border="0" alt="Share on MySpace" />
</a>






<a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(document.location.toString()),'ptm','height=450,width=440').focus())">
    <img src="http://cms.myspacecdn.com/cms/ShareOnMySpace/LargeSquare.png" border="0" alt="Share on MySpace" />
</a>

Mas no Blogger... Lembre-se, javascript às vezes pesa e dependendo do caso, o navegador pode acusar código malicioso... Mas há uma maneira de colocar um botão do MySpace sem javascript...

Como colocar o botão do MySpace no Blogger

O Blogger tem códigos próprios para o título ou title (data:post.title) e o link (data:post.url). Logo a construção do link tem que obedecer à esse estilo que é padrão.

Esse conjunto de botões estão no rodapé do post
Eis o código alterado para o Blogger que uso aqui:

<a expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; 
+ data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' 
title='Adicionar no MySpace !'><img alt='Adicionar no MySpace !' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTYSgSwNBd_nKEQj_Wej9Ykv_7ni2bkrR6H-cHX5-ytCTplVla9SlhOnQv63ZGF1gevH19nA9aetCcOLD7bQ5HfezZPXCfp1JLaQGct8t_f58vlm20HazpKisndKZS2fThoiOXg/' 
style='width:16px; height:16px;'/></a>

Caso queira que o botão apareça apenas nos posts indiduais, deve-se acrescentar uma condicional:

<b:if cond='data:blog.pageType == &quot;item&quot;'><a expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; 
+ data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' 
title='Adicionar no MySpace !'><img alt='Adicionar no MySpace !' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTYSgSwNBd_nKEQj_Wej9Ykv_7ni2bkrR6H-cHX5-ytCTplVla9SlhOnQv63ZGF1gevH19nA9aetCcOLD7bQ5HfezZPXCfp1JLaQGct8t_f58vlm20HazpKisndKZS2fThoiOXg/' 
style='width:16px; height:16px;'/></a></b:if>

Em verde, está o endereço da imagem em gif (16 x 16 que) estou usando no meu blog. Caso você queira usar as imagens que estão acima, basta copiar a de seu interesse em seu computador e colocá-la no Picasa(de preferência) ou em um outro servidor de imagem(tinypic, photobucket, imageshackus, etc). Depois pegar o link da imagem e substituir nessa que disponibilizei.

Onde colocar? No lugar de sua preferência:
  • Acima do post: Procure por <div class='post-body entry-content'> e cole o código abaixo dessa linha.
  • Abaixo do post: Procure por <div class='post-footer'> e cole o código acima dessa linha.
  • No rodapé do post: Procure por <div class='post-footer-line post-footer-line-3'> e cole o código abaixo dessa linha.
Obs.: Essas linhas de código estão presentes nos templates usuais e naqueles do Designer de modelo.

Eu, preferencialmente, prefiro incluir botões sem javascript, usando códigos nativos do Blogger. Se você preferir colocar com javascript, fica ao gosto do freguês! (Ok, eu sempre declaro no Twitter que odeio javascript... E odeio mesmo!)

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google