Fotos do Instagram com Instafeed


Resolvi juntar todas as informações em um único post, pois quando comecei a usar o Instafeed no blog, não encontrei um site que explicasse tudo. Alguns explicavam apenas como gerar o token e em outros encontrei o javascript necessário para criar o widget com as fotos do Instagram. Então para facilitar, todas as informações ficaram em um único post para vocês.

1. Criando o aplicativo

Acesse a página instagram/developer e faça o login com os dados da sua conta no Instagram. No primeiro acesso, irá solicitar um cadastro para a criação da conta desenvolvedor. Confirme as informações e na tela seguinte clique no botão Register a New Client.

Em seguida, irá abrir a tela para cadastrar o seu aplicativo. Você deve preencher com as informações na aba Details:



Não clique para registrar ainda. Acesse a aba Security e desmarque a opção Disable implicit OAuth. Feito isso, clique em Register no final da página.


Na tela seguinte irá apresentar o client id necessário para gerar o access token.


2. Criando o Access Token

Para criar o access token utilize a URL abaixo. Você deve substituir o YOUR_CLIENT_ID pelo código client id gerado nos passos anteriores.



Feito isso, cole essa URL no seu navegador. Ao acessar o este link, irá abrir a página do Instagram solicitando a autorização para o aplicativo.


Após esta tela, você será direcionado para outra página. O conteúdo dela não é importante, o que você precisa estará na URL da página. Tudo o que aparecer após "access_token=" é o que você precisa guardar.


3. Criar gadget com as imagens do Instagram

Antes de utilizar o código que irá mostrar as imagens do seu perfil no Instagram, você deve localizar o userId do seu perfil. Portanto, acesse este link e informe o seu User.

Em seguida, clique em Get Instagram User Id.



Agora, para adicionar um gadget com as fotos no seu blog, basta utilizar o código abaixo. Você pode testar o código com os seus dados acessando esta página aqui.

See the Pen Instafeed by Michelly Melo (@michellymelo) on CodePen.


Entenda o que você deve alterar no código acima:

userId: É o ID que você gerou no passo número 3.
clientId: É o ID gerado ao criar o aplicativo na página do Instagram (passo 1).
accessToken: Follow this post to get your Access Token (passo 2).
limit: É o limite de imagens que irão aparecer no seu gadget. O Instagram tem um limite de 20 imagens.

4.Incluir o código no seu blog (blogger)

Acesse a guia Modelo do seu blog, procure pela linha ]]></b:skin> e ANTES dela inclua o código o código CSS que consta no 3º passo.

Já na guia Layout, adicione o gadget HTML/JAVSCRIPT e cole o código editado da guia HTML do 3º passo.

Feito isso, basta salvar as alterações.
Continue lendo »

Vamos melhorar?


Olá!

Cada vez mais recebo e-mails de blogueiros pedindo ajuda com código do blog, então depois de meses sem atualizar os tutoriais, o Seja Criativo irá voltar! \o/

Mas para que eu possa preparar tutoriais úteis para vocês, preciso de uma ajudinha: respondam ao formulário abaixo com o máximo de informações possível. São poucas perguntas e rápido de responder, então sem preguiça, ok? :P

Continue lendo »

Trocar texto do marcador da postagem por imagem


O tutorial de hoje foi escolhido por leitores do Seja Criativo. Há algum tempo liberei o link de um formulário pedindo dicas de tutoriais que deveriam ser postados aqui. Recebi vários pedidos e todos serão divulgados em breve. Então vamos lá!

A ideia hoje é explicar como você pode personalizar os marcadores do seu blog com imagens e apesar de ser um tutorial simples, requer um tiquinho de atenção.

Como exemplo você pode conferir o Dezoito Primaveras.


Primeiro passo: Adicionar o CSS

Acesse o menu Modelo>Editar HTML e localize a linha ]]></b:skin>, acima dela adicione o código:


Segundo passo: Adicionar o HTML

Procure pela linha <div class='post-footer-line post-footer-line-1'> e adicione abaixo o seguinte código:

Terceiro passo: Adicionar o Javascript

Acesse o menu Modelo>Editar HTML e localize a linha </head>, feito isso inclua o código abaixo acima dela.


Entenda o que você está adicionando ao seu código


O código que você adicionou no seu blog pode ser melhor visualizado na imagem acima. Para que você entenda, fiz algumas marcações importantes.

Obs. 1. As cores identificam quais linhas do código estão relacionadas.
Obs. 2. Se você quiser adicionar outro marcador você deve:

1. Adicionar a linha abaixo antes da primeira linha com conteúdo"if (etiqueta...":
imagenes[X] = "<img src='LINK-DA-SUA-IMAGEM-1' title='IMAGEM X'/>"

2. Adicionar antes das linhas 14 e 15 o seguinte código:
if (etiqueta == "IMAGEM X")  {document.write(imagenes[X]);}

Lembrando que o "X" é o número que deve ser utilizando nos dois códigos. Agora é só salvar e visualizar o resultado! Qualquer dúvida é só deixar o comentário na postagem ou acessar a página de contato do blog.
Continue lendo »

Mostrar e esconder conteúdo dentro do post


Um dos efeitos que eu mais gosto de usar na postagem é o jQuery Toggle. Ele permite que você "esconda" determinadas parte da sua postagem ou até mesmo conteúdos da sidebar com um código bem simples e rápido de implementar.

Apesar do nome diferente, é um efeito bastante conhecido. Um exemplo de blog que utiliza é o Madly Luv, a Aninha usa em vários tipos de postagens para deixar escondido um conteúdo mais extenso e detalhes sobre algum assunto.

Veja o exemplo:

IMPORTANTE!

Antes de começar você precisa adicionar no seu código a biblioteca jQuery versão 1.8, que esta sendo carregada direto da API do Google. Se você já tem adicionado no seu blog pode pular esta parte.

Vá até o menu Modelo>Editar HTML, adicione o código antes da linha </head>.


Primeiro passo: Adicionar o Javascript

Para adicionar o script que irá executar a função de esconder e revelar o conteúdo, vá até o menu Modelo>Editar HTML e localize a linha: </head>. Logo acima adicione o seguinte código:



Segundo passo: Adicionar o CSS

Para adicionar o CSS, vá até o menu Modelo>Editar HTML e localize a linha: ]]></b:skin>. Logo acima adicione o seguinte código:



Terceiro passo: Adicionar o HTML

Esta parte deve ser adicionada no local onde você quer utilizar, por exemplo: se for dentro da sua postagem, para adicionar o código, você deve criar a postagem e habilitar a opção: "HTML". Em seguida, localize a posição do post onde deseja utilizar e insira o código abaixo:



Obs.: Se você quiser adicionar o efeito na sidebar, basta ir em Layout>Adicionar Gadget>HTML/Javascript e adicionar o código do terceiro passo. Vale lembrar que o primeiro e segundo passo você deve seguir normalmente, mesmo que você inclua o efeito na sidebar.

Fácil, não é? Separei alguns link úteis para quem quiser entender mais sobre este script.
Continue lendo »

Caixa de busca personalizada


Um dos últimos comentários que recebi aqui no Seja Criativo, veio com várias dicas de tutoriais simples e importantes. Então vou aproveitar esta semana para postar alguns deles.

O primeiro tutorial que eu escolhi foi o da caixa busca personalizada. É um código simples, mas que sempre traz aquela ideia do copia e cola que a grande maioria dos blogueiros estão acostumados. Muitos tutoriais não explicam o código e acaba que você utiliza sem nem saber o que está copiando. Então vou além da explicação, vou deixar no finalzinho do post alguns link bacanas para quem quer ideias para personalizar a caixa de busca.

Vamos lá!

Obs.: Lembrando que todos os tutoriais disponibilizados aqui utilizam o Template Minima, para baixar basta acessar o link (download).

Obs. 2: Façam o backup do Template antes para evitar problemas futuros.

Primeiro passo: Entendo a estrutura

Antes de pensar na aparência da caixa de busca, é importante conhecer o código que você está utilizando. A estrutura é basicamente esta:


Segundo passo: O HTML



Terceiro passo: O CSS


E o resultado final:

Obs. 3: Lembrando que o CSS você pode usar e abusar da sua criatividade! :)

Quarto passo: Adicionando ao seu blog

  1. Antes de mais nada, faça login em sua conta e acesse o painel do blogger;
  2. Clique no menu "Layout" > "Adicionar um Gadget";
  3. Adicione o gadget "HTML/JavaScript";
  4. Cole as duas partes do código informado acima;
  5. Salve e organize o gadget onde desejar.

Prontinho! Código simples e fácil de editar. Vou deixar aqui embaixo, alguns links para quem quiser se aventurar um pouquinho mais. Beijos!

Desenvolvendo layouts para caixas de pesquisa em páginas Web.
Criar caixa de pesquisa para blog.
Caixa de pesquisa para blog.

Continue lendo »

Template Free #2



Olá, olá!

Depois de tantos pedidos, aqui estamos mais uma vez. Faz um bom tempo que estou prometendo disponibilizar outro Template Free para vocês, mas acabou que eu me enrolei com vários outros trabalhos e deixei o Template de lado. Desta vez resolvi criar um layout simples, clean e o mais próximo de ser responsivo que eu consegui fazer, rs.

Se vocês tiverem qualquer problema com a instalação, por favor entre em contato através da página de contatos do blog ou mande um e-mail para contato@dezoitoprimaveras.com.br.

 

Continue lendo »