Adicionar widget Cartão de Visita do LinkedIn no blog

O LinkedIn é uma das maiores redes sociais do momento com mais de 150 milhões de cadastrados e é com soberania o maior site de relacionamento para profissionais do mundo. No Brasil o site já conta com cerca de 6,8 milhões de usuários, sendo o 4º país com maior número de usuários.

Vamos ver agora como adicionar o Cartão de Visita e o Plugin para perfis do LinkedIn no blog.
Usando o vCard ou Plugin para perfil você dará ao seu leitor uma maneira intuitiva e prática para ele aprender mais sobre você ou até mesmo fornecer um contexto social profissional para o conteúdo do seu blog ou site.

Colocando o widget Cartão de Visita

Para colocar este modelo na  sidebar (lateral) do seu blog, basta copiar e colar o seguinte código, modificando apenas o que for indicado. Para isso, adicione um gadget do tipo “HTML/JavaScrit” se você usa o Blogger ou caso use o WordPress, dentro de um widget do tipo “Texto”:

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="LinkPerfilPúblico" data-format="inline"></script>

Para adicionar o Cartão de Visita sem mostrar as conexões em comum, coloque o seguinte código:

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="LinkPerfilPúblico" data-format="inline" data-related="false"></script>

Colocando o widget Plugin do Perfil

Este Plugin é o ícone do LinkedIn mais o seu nome de usuário. O código tem 3 opções diferentes de uso:

1. Efeito hover: Quando passa o mouse em cima do nome, o script gera o Cartão de Visita.
2. Efeito click: Quando clica no nome, o script gera o Cartão de Visita.
3. Efeito hover ou click sem mostrar conexões.

• Efeito hover

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="LinkPerfilPúblico" data-format="hover" data-text="USUÁRIO"></script>

• Efeito click

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="LinkPerfilPúblico" data-format="click" data-text="USUÁRIO"></script>

• Sem mostrar conexões

Adicione o código data-related=”false” APÓS data-text=”USUÁRIO”

Como achar o Link do meu Perfil Público?

Basta ter feito login no LinkedIn e acessar www.linkedin.com/profile/edit. Após isso, veja o tópico “Perfil público“, copie o link e substitua no código por “LinkPerfilPúblico.” Salve e veja como ficou 

Widgets com ícones para redes sociais

A última moda em blogs, são os ícones para as redes sociais. O principal objetivo é incentivar os visitantes a seguirem no Twitter, Orkut, Facebook e a assinarem os feeds do blog.  

Pra ajudá-los, criei dois gadgets baseados em CSS, super simples de serem implementados no Blogger.

Recomendo fortemente que as imagens dos ícones sejam enviadas para a conta do Picasa de vocês e que as URLs dessas imagens sejam substituídas.

Widget 1 – Twitter, Feeds e Facebook

Vá no HTML do template, dê um Crtl+F com o teclado e procure por ]]></b:skin> . 

Cole antes dessa tag o seguinte código:

/* SOCIAL MEDIA 

----------------------------------------------- */ 

#socialmedia{background:#F6F8F8;border:1px solid #DBE2E0;padding:10px 5px 15px 10px; margin: 5px;} 

#socialmedia:hover{border:1px solid #90C2D7;} 

#socialmedia a{color:#666666;text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif} 

#socialmedia a:hover{color:#3c88b2;text-decoration:underline} 

#socialmedia img{vertical-align:middle;margin-right:5px;}

Salve o template. Vá nos elementos de página e clique em adicionar gadget. Escolha HTML/javascript e cole este outro código: 

<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BEKq7aTI/AAAAAAAAEUw/Lb9JMwUAiZ8/socialconnecttwitter.png' style='width: 32px; height: 32px; float:left;'/> 

<a href='URL DO TWITTER'>Siga no Twitter</a> 

</div> 

<div id='socialmedia'><img alt='' src='https://lh5.googleusercontent.com/_mcq01yDJ2uY/TW630L9WcaI/AAAAAAAAEUM/iLypEEa1b5Y/socialconnectrss.png' style='width: 32px; height: 32px; float:left;'/> 

<a href='URL DOS FEEDS'>Assine os feeds</a> 

</div> 

<div id='socialmedia'><img alt='' src='https://lh3.googleusercontent.com/_mcq01yDJ2uY/TW_BI34MoHI/AAAAAAAAEU0/GuFjmmcm87w/socialconnectfacebook.png' style='width: 32px; height: 32px; float:left;'/> 

<a href='URL DO FACEBOOK'>Curta no Facebook</a> 

</div>

• Em URL DO TWITTER, escreva o endereço do seu Twitter
• Em URL DO FEED, coloque o endereço dos feeds do blog
• Em URL DO FACEBOOK, coloque o endereço do seu perfil ou da página de fãs

Widegt 2 - Feeds, Twitter, YouTube, Orkut e Facebook

   

No painel do Blogger, clique em design > adicionar gadget>HTML/javascript.

Cole o código abaixo, fazendo as respectivas alterações (em vermelho)

<div style="margin: 5px; padding: 10px;"><a

href="ENDEREÇO DO FEED"><img

style="border: 0px solid ; width: 48px; height: 48px; float: left;"

alt=""

src="http://lh5.ggpht.com/_dAGEULh1_1g/THwD-xP5n9I/AAAAAAAAEBk/1DE1CA0UtCA/rss.png"></a><a

href="ENDEREÇO DO TWITTER"><img

style="border: 0px solid ; padding-left: 5px; width: 48px; height: 48px;"

alt=""

src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-5SoTTI/AAAAAAAAEBo/Yh2jRrtkOeo/twitter.png"></a><a

href="ENDEREÇO DO YOUTUBE"><img

style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"

alt=""

src="http://lh3.ggpht.com/_dAGEULh1_1g/THwD-4XjHKI/AAAAAAAAEBs/waG0ImvEsQI/youtube.png"></a><a

href="ENDEREÇO DO ORKUT"><img

style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"

alt=""

src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-3vEZVI/AAAAAAAAEBg/jq-RSB5gXBc/orkut.png"></a><a

href="ENDEREÇO DO FACEBOOK"><img

style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"

alt=""

src="http://lh6.ggpht.com/_dAGEULh1_1g/THwD-vZ7bDI/AAAAAAAAEBc/4fHoPnWmq8M/facebook.png"></a><br></div>

 

Tem coisas no Blogger que são simplesmente inexplicáveis. Até outro dia, bastava colar a URL da imagem no local indicado e pronto. Atualmente, notei que as imagens hospedadas no Picasa Web não estavam aparecendo mais. Depois de muita investigação, descobri que – sabe-se lá porque – o Blogger estava mudando as URLs por conta própria. A solução é ainda mais bizarra rs Depois de colar o código no gadget HTML/Javascrip, é preciso clicar em “Formato Rich Text” para que as imagens funcionem. Prefiro nem comentar.

Como colocar busca do Google no Blogger

Muitos usuários do Blogger vêm se queixando que a caixa de busca padrão – gadget “caixa de pesquisa” – não é eficiente, pois não mostra todas as postagens. Esse problema já é antigo e, infelizmente, ainda não foi resolvido. 

No lugar do gadget “caixa de pesquisa”, é possível usarmos outras opções de caixa de busca do Google:

1. Caixa de busca do Google Adsense;
2. Caixa de busca personalizada do Google;

Como colocar a busca do Google AdSense

A caixa de busca do AdSense é, de longe, a mais eficiente e ainda pode render uma graninha. Para colocá-la em seu blog, é preciso ser um editor cadastrado.  

1. Clique na aba “configurações do AdSense”
2. Escolha a opção “AdSense para pesquisas”
3. Em “tipo de pesquisa”, escolha “apenas os sites que eu selecionar”
4. Em “sites selecionados”, digite o endereço do seu blog
5. Clique em “continuar” e configure o tamanho da caixa
6. Clique em “continuar” e copie o código
7. No Blogger, cole no gadget HTML/Javascript

Como colocar a busca personalizada do Google

A caixa de busca personalizada do Google também é muito boa.

1. Acesse http://www.google.com/cse/
2. Faça login com sua senha do Google
3. Clique em “criar mecanismo de busca personalizado”
4. Preencha todos os campos
5. Em “site a pesquisar”, digite o endereço do seu blog
6. Clique em avançar e escolha um modelo
7. Copie o código
8. No Blogger, cole no gadget HTML/Javascript

Inserindo Tradutor no Blogger

Olá blogueiros,

Sabemos que a internet é um ambiente totalmente globalizado, e com isso, muitas das coisas que postamos pode ser visualizada por milhares de pessoas de qualquer lugar do mundo. Mas às vezes, outras pessoas de outros países com idioma diferente do nosso (português), não tem como fazer a leitura do conteúdo do blog. E foi pensando nisso que hoje resolvi deixar algumas dicas de como inserir um Tradutor em seus blogs. Estão prontos?

Para fazer isso, existem vários tipos de tradutores que podemos inserir. Vejam 2 deles:

1º Google Tradutor:

Este é um tradutor simples fornecido pelo Google para sites, e pode ser facilmente manuseado. Veja na imagem:

Visite (http://translate.google.com.br/translate_tools) para ir ao site e inserir o gatget.

Depois de inserido no blog, ficará assim:

2º Tradutor bandeirinhas:

Esse tradutor também é excelente para blogs, pois ele tem uma visualização bem mais dinâmica dos idiomas através das  bandeirinhas contidas nele. Vejam na imagem:

Para obter o código HTML desse tradutor, clique no link abaixo, e copie o todo o código hospedado no Google Docs:

Código HTML - Tradutor com bandeiras

Para inserir esse código HTML, é preciso acessar o Painel (www.blogger.com), procure por Layout> Adicione o gatget HTML/JavaScript e cole o código fornecido.

Espero que tenham gostado,

Abraço,

Gadget Redes Sociais no blog

Um Gadgets de Redes Sociais é a maneira mais fácil de fazer com que seus leitores encontre você em outros meios de contato, ou até mesmo acompanhar as maiores novidades que acontece em seu blog.  Já pensou em colocar as redes sociais que você participa em seu blog? É fácil!

1 - Acesse o painel do Blogger;
2 - Clique na guia "Layout" e em seguida "Adicionar um gadget".
3 - Adicione o gadget "HTML/JavaScript" e insira o código informado abaixo:

<a href='LINK DO PERFIL DO ORKUT OU COMUNIDADE' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Orkut'><img alt='Orkut' src='http://icons.iconarchive.com/icons/danleech/simple/48/orkut-icon.png'style='border:0; width:45px; height:45px;'/></a>     <a href='LINK DO TWITTER' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Twitter'><img alt='Twitter' src='http://icons.iconarchive.com/icons/danleech/simple/48/twitter-icon.png' style='border:0; width:45px; height:45px;'/></a>     <a href='LINK DO FACEBOOK' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Facebook'><img alt='Facebook' src='http://icons.iconarchive.com/icons/danleech/simple/48/facebook-icon.png'style='border:0; width:45px; height:45px;'/></a> <a href='LINK DO GOOGLE+' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); return false;' style='text-decoration: none;' title='Google +'><img alt='Google +' src='http://icons.iconarchive.com/icons/danleech/simple/48/google-plus-icon.png' style='border:0; width:45px; height:45px;'/></a>   

Adicione o link de sua rede social em: LINK DO PERFIL DO ORKUT OU COMUNIDADE, LINK DO TWITTER, LINK DO FACEBOOK e LINK DO GOOGLE+

Link destacado em Verde - Caso você queira mudar a imagem. Existe vários sites de icon, eu conheço o http://www.iconarchive.com/

Prontinho! Agora todos podem te achar facilmente nas redes sociais! :)