Visual Dicas: Widgets

Mostrando postagens com marcador Widgets. Mostrar todas as postagens

26/11/2018

Como colocar o widget do seu canal do Youtube no blog ou site

Canal do Youtube.

Como sabemos, os vídeos são ótimos meios de comunicação para agregarem conteúdo e gerarem mais visitas para os sites e blogs. O Youtube é um dos melhores sites de compartilhamento de vídeos da internet.

Se você possui um canal no Youtube, poderá colocar uma widget com o link para inscrição de novos visitantes para o seu canal. Assim você divulga o seu canal e incrementa o seu blog.

“Um widget é um componente de uma interface gráfica, o que inclui janelas, botões, menus, ícones, barras de rolagem, etc..”

Widgets são fundamentais no seu blog tanto pelos seus atrativos, funcionalidade e facilidade de utilização, como pela excelente ferramenta de interação entre o seu blog/site e seus leitores

Criando o widget do seu canal do Youtube

1) Localize o ID do seu canal do Youtube: Acesse o seu canal e copie o código que aparece depois da palavra “channel”. Veja o exemplo abaixo:

2) No código abaixo, substitua o ID do usuário pelo código que você copiou:

Utilize o Squids Editor para testar seu código. Veja como fica o nosso widget no editor:

Veja como ficou o nosso widget no blog:

3) Coloque o código do widget no seu blog:

Blogger: Como instalar um Widget no seu Blog -(Blogger)
Wordpress: Como inserir Widgets no Wordpress sem a instalação de plugins

Você poderá incluir o código no seu site também copiando e colando o código no local desejado.

Personalizando sua caixa do Youtube

Se você tem algum conhecimento de CSS, poderá personalizar sua caixa do canal do Youtube utilizando o atributo “style” dentro do elemento “div”. Veja o exemplo abaixo que usamos para o nosso canal do Youtube:

Teste suas alterações no Squids Editor.

Veja como ficou o nosso exemplo:

Aproveite e se inscreva em nosso canal do Youtube!!!!

byALF

10/03/2017

Crie seu próprio widget com o aplicativo Widgetic

Crie seu próprio Widget com Widgetic

Como vimos no artigo “Widget, o que é e para que serve?”, os widgets são fundamentais no seu blog tanto pelos seus atrativos, funcionalidade e facilidade de utilização, como pela excelente ferramenta de interação entre o seu blog/site e seus leitores…

Para consegui-los, além de você importar widgets de diversos sites especializados na internet, nada melhor do que você mesmo criar os seus próprios, não é? Neste artigo mostraremos como fazer isto através do aplicativo:

Widgetic (free plan)

O Widgetic foi desenvolvido para para tornar mais fácil para qualquer pessoa criar widgets interativos, sem precisar escrever qualquer tipo código de programação. Você poderá ir a um passo adiante e personalizar seu widget para torná-lo exclusivo para a sua marca e para o seu site.

A biblioteca Widgetic tem uma coleção extensa e crescente de widgets que abrangem vários tipos de mídia, como imagens, áudio, vídeo, dados e conteúdo social.

Vamos apresentar para vocês alguns widgets que você poderá criar no plano free (gratuito), e encorajarmos você a encontrar uma combinação perfeita para o seu conteúdo.

Acessando o aplicativo Widgetic

Acesse o site: https://widgetic.com/

Clique no botão [Get starded].

Registre-se colocando seu e-mail e uma senha qualquer. Depois clique no botão [Sign up]. Se preferir, entre com sua conta do Facebook ou Google Plus.

Após registrar-se, faça o Log in. Clique no botão [Show me] para seguir com o tutorial do aplicativo. No nosso exemplo vamos aprender utilizando o tutorial do Widgetic.

Obs.: Caso não deseje seguir com o tutorial, clique em [Skip tutorial].

Criando seu primeiro widget

Escolha algumas imagens, clicando sobre elas. Clique no botão [Next:Customize].

Escolha o estilo de layout para o seu widget. Recomendamos que clique em todos os botões para conhecer as possibilidades de layouts deste widget.

Escolhido o layout, clique no botão [Next: Preview].

Obs.: No nosso exemplo escolhemos o layout Simple Layout.

Você pode visualizar seu widget em diferentes dispositivos: Desktop, Tablet ou Celular.

Clique em [Go to Dashboard] e vá para o painel de controle para alterar o tamanho do seu widget e incorporá-lo em seu site.

Usando o Dashboard: Editando um Widget pronto

Clique no Widget que você deseja alterar

a) Para DELETAR ou DUPLICAR o seu widget, clique no botão indicado abaixo:

b) Para EDITAR seu widget, clique no botão indicado abaixo:

Para alterar as dimensões, clique no ícone indicado abaixo:

Faça as alterações dimensionais desejadas.

Através do menu lateral, faça as alterações desejadas e clique em [Next] para novos painéis de edição. Você não terá dificuldades para fazer as alterações pois o menus são bem simples e auto-explicativos.

Obs.: É necessário passar por todos os painéis de edição para salvar as alterações realizadas.

Clique em [Done] no último painel para salvar as alterações realizadas.

c) Para INSERIR o widget no seu site, clique no botão [Embed widget].

Copie o código e cole no seu site ou blog.

Resultado de imagem para lamp idea vector png
Dica: Experimente antes no Squids Editor: Cole o código no lado esquerdo do editor e clique no botão [Executar] pra visualizar o resultado no lado direito do aplicativo.

Caso precise alterar dimensões do seu widget, volte para EMBED OPTIONS e faça as alterações necessárias.

Verifique novamente no Squids Editor. Se tudo estiver da forma desejada, copie e cole o código no seu site ou blog.

Obs.: Se você não sabe como inserir códigos HTML no blog, leia:

Na lateral do blog

Como inserir Widgets no Wordpress sem a instalação de plugins

Como instalar um Widget no seu Blog -(Blogger)

Na postagem

Como inserir códigos HTML nas postagens do Wordpress

Como inserir códigos HTML nas postagens do Blogger

Veja como ficou o nosso Widget:

Audio Playlist

Usando o Dashboard: Criando um novo Widget

Volte para o painel do aplicativo.

Clique em [Create a new widget].

Escolha primeiro a categoria de widget que você deseja criar: Fotos, Áudio, Vídeo, Dados ou Rede Social.

Depois, você precisa escolher um modelo de layout.

Agora é só preceder da mesma forma que a edição de um widget pronto, como já mostramos anteriormente.

Depois de finalizado o widget (precisa passar por todos os painéis de edição), clique em [PUBLISH].

Coloque um título e clique em [Done].

Agora é só copiar o código e colar no seu site. Ahhh, não esqueça de verificar antes no Squids Editor.

Planos para utilização do aplicativo Widgetic

Se você deseja criar wigets mais completos, veja os planos para utilização do aplicativo Widgetic: https://widgetic.com/plans/

byALF

20/11/2016

Como configurar a sua caixa de fãs (like box) do Facebook na nova versão (page plugin)

Like Box – Facebook

Escrito originalmente em 12/07/2015 e atualizado 20/11/2016.

Este artigo foi escrito quando o Facebook fez um upgrade do plugin do “like box” em 2015. Depois disso, houve algumas alterações na configuração do Like Box que atualizamos neste tutorial. Leia o nosso artigo e veja como configurar a sua caixa de fãs do Facebook já contanto com últimas atualizações de 2016.

Introdução - upgrade do plugin Like Box pelo Facebook (escrito em 2015)

Se você possui uma caixa de fãs (like box) da “fan page” do seu blog ou da sua empresa, com certeza deve ter percebido que houve uma alteração visual no plugin.

Como configurar a sua like box do Facebook na nova versão - Visual Dicas

Na verdade o Facebook eliminou o like box em junho de 2015, substituindo-o por um novo plugin que permite mostrar a capa da sua página de fãs e priorizar os “faces” dos amigos do usuário que estiver conectado na rede social.

Se você acessar a página Facebook Like Box irá verificar a mensagem: “The Like Box is deprecated. Please use the new Page Plugin, ou seja, utilize o novo Page Plugin no lugar do obsoleto Like Box.

Obs.: Também foram desativados os plugins Activity Feed, Recommendations Feed, Facepile, Registration Plugin e shared Activity Plugin

O Facebook faz esta alteração de forma automática, mas se você precisar fazer ajustes nas dimensões ou no formato do plugin veja o nosso tutorial a seguir.

Configurando o novo Page Plugin (atualizado)

Acesse a página https://developers.facebook.com/docs/plugins/page-plugin

Verifique se a página do Facebook está no seu idioma. Se não, observe no rodapé da mesma que aparecem links. Selecione o link do seu idioma. No nosso exemplo vamos utilizar o idioma Português (Brasil).

Role a tela e preencha as informações do formulário verificado abaixo como irá ficar o seu plugin.

Veja o exemplo abaixo onde utilizamos a nossa página de fãs do Facebook:

UR da Página do Facebook: Coloque o endereço da sua página do Facebook. No nosso exemplo vamos utilizar o endereço da página do Visual Dicas: https://www.facebook.com/visualdicas

Guias: Aqui você pode colocar: Digite timeline para mostrar os posts recentes da sua linha de tempo, mensagens ou eventos. No nosso exemplo vamos utilizar timeline.

Largura e Altura: Vamos utilizar no nosso exemplo 530px para a largura e auto para a altura para ajustar automaticamente.

Usar cabeçalho pequeno: se marcar ele mostrará um cabeçalho menor e sem o botão Compartilhar.

Ocultar foto da capa: Se você marcar ele não mostrará a capa da página de fãs.

Adaptar à largura do contêiner do plugin: marque para ajustar à largura do plugin.

Mostrar rostos dos amigos: marque para mostrar amigos que curtiram sua página. O novo plugin só permite uma linha com as faces.

Se o plugin ficou como desejado, clique no botão [Obter código].

Em SKD do JavaScript você encontrará de tipos conjuntos de códigos:

O primeiro você deverá copiar e colar na página principal do seu site (index) imediatamente após a tag <body>. Já o segundo código você deverá colocá-lo no lugar onde aparecerá o plugin.

DICA: Se você utilizar o plugin apenas em um local do seu blog ou site, você poderá colocar os 2 códigos juntos no lugar onde aparecerá o plugin. Por exemplo, no Blogger você poderá colocar os 2 códigos juntos no gadget onde aparecerá o plugin.

Obs.: Se preferir, poderá usar o código IFrame. Entretanto não recomendamos, pois este elemento HTML está em desuso na visão do W3C e HTML5, além de que você precisará alterar o código com o idioma…

Inserindo o código no site (SKD do JavaScript)

Pronto, agora você acesse o seu blog e entre no gadget, widget, módulo ou qualquer elemento que está instalado o seu like box. No nosso exemplo, utilizaremos o gadget do Blogger:

a) Colocando o plugin Like Box no Blogger

Em Layout adicione um novo Gadget

Clique em HTML/JavaScript

Agora copie e cole os dois códigos SDK JavaScript no gadget.

Veja como ficou o nosso plugin:

Visual Dicas

b) Se você está ainda com o código antigo (antes de julho de 2015)

Acesse o seu blog e entre no gadget, widget, módulo ou qualquer elemento que está instalado o seu like box. No nosso exemplo, utilizaremos o gadget do Blogger:

Substitua o código que já estava no blog.