Mostrar feed do Instagram no site

A ideia de mostrar as fotos do Instagram no seu site é uma maneira poderosa de aumentar a visibilidade. Mas sempre quando vamos usar as fotos do Instagram nos sites de nossos clientes, esbarramos no mesmo problema: “como mostrar as fotos do Instagram no meu site?”. Então pra evitar esses pesadelos, de ficar esquecendo como usar os feeds do Instagram sem plugins, resolvi criar esse passo a passo.
Esse processo foi divido em duas etapas, a primeira vamos solicitar a permissão do Instagram, para usar as fotos. No segundo momento vamos obter os caminhos das fotos.

Etapa 1

Acesse o site de desenvolvedor do Instagram, e clique em “Register Your Application”: https://www.instagram.com/developer

Caso não esteja logado, o site vai pedir para você entrar.
botao-registro-instagram

Neste momento, o Instagram mostra a lista de clientes registrados, se você ainda não tem, clique em “Register a New Client”.
botao-registro-cliente-instagram

A página seguinte mostra o formulário de registro. Vou ressaltar que há 4 campos obrigatórios, os seguintes:

  • Application Name: Escolha qualquer nome, mas cuidado com as restrições que o Instagram indica. Não usar Instagram, IG, insta, ou gram.
  • Description: Qualquer descrição, mas indico usar onde vai ser utilizado esse cliente. Exemplo: “Feeds do Instagram para meu site”.
  • Website URL: URL do seu site.
  • Valid redirect URIs: Agora um ponto bem importante, neste campo você tem que colocar exatamente essa URL https://www.tokdigital.cc/desenvolvimento/api/mostrar-feed-instagram-site/ (não se preocupe, vou explicar, mais abaixo, o porque).

formulario-registro-clietne

Preenchido o formulário, NÃO clique em “Register”, ainda falta uma informação. Você deve ter notado, que temos duas abas, Details e Security, atualmente estamos em Details, vamos passar para aba Security, onde vamos desmarcar a opção “Disable implicit OAuth”. Feito isso, agora sim podemos clicar em “Register”.
aba-seguranca-formulario-cliente-instagram

Pronto, está criado o cliente. Caso você foi apressadinho e clicou logo em register, antes de desmarcar a opção, calma não está tudo perdido, no seu cliente tem a opção Manage, só clicar e desmarcar a opção.
Agora copie o seu Client ID, e cole ele aqui no campo abaixo:


Nós da Tok Digital, criamos essa aplicação acima para facilitar a sua requisição ao access token, por conta disso, solicitamos que você inserisse no registro do Instagram, o endereço da Tok.
UFA! Agora você tem o access token, foi por ele que usamos o endereço da Tok, logo ali em cima. Sem ele o seu site não poderia falar com os servidores do Instagram. Vamos para etapa 2?

O Token de Acesso do Instagram é uma longa seqüência de caracteres exclusivos da sua conta que concede a outros aplicativos o acesso ao feed do Instagram.

Etapa 2

Nesta segunda etapa vamos buscar as informações do usuário, como nickname, bio, seguidores e outros. E vamos também obter as postagens. O melhor de tudo isso, como temos as informações do cliente, e não um iframe do Instagram gerando tudo, podemos usar a criatividade, e criar algo customizado. Para acompanhar o exemplo, vou criar uma página do cliente, nesse processo vou usar PHP, mas você pode fazer uma requisição via Ajax, para buscar as informações, o método é simples.
Vamos lá então, vou iniciar com um código HTML simples, e com duas variáveis:

  • access_token = O código que obtemos na primeira etapa.
  • user = Vamos usar a URL para fazer uma requisição ao Instagram, usando a nossa permissão (access_token), assim com autenticação conseguimos informações do usuário. “https://api.instagram.com/v1/users/self/media/recent/?access_token=SEU-ACCESS-TOKEN
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Hm Jardins</title>
 </head>
<body>
 <?php
 $access_token = SEU-ACCESS-TOKEN;
 $user = file_get_contents( "https://api.instagram.com/v1/users/self/media/recent/?access_token=$access_token" );
 $user = json_decode($user, true)['data'];
 ?>
 </body>
</html>

O retorno da função file_get_contents vai ser uma string, mas que tem o formato de lista, por esse motivo use json_decode para converter. Continuando, agora temos informações do usuário, nesse formato:

Array
(
    [id] => 00000000
    [bio] => Uma empresa que além de floricultura faz projetos e reformas de jardim. Surgiu do sonho de 2 irmãos que se dedicam para a satisfação de seus clientes.
    [username] => hmjardins
    [profile_picture] => https://scontent.cdninstagram.com/t51.2885-19/s150x150/16123549_738211899670830_4001478088876621824_a.jpg
    [website] => http://www.hmjardins.com.br/
    [full_name] => HM Jardinagem & Paisagismo
    [counts] => Array
        (
            [follows] => 1108
            [followed_by] => 474
            [media] => 34
        )
)

Simples? Agora vamos solicitar ao Instagram, os feeds recentes do cliente, usando a URL https://api.instagram.com/v1/users/self/?access_token=SEU-ACCESS-TOKEN com o seu access token. Note que o modo de requisição é o mesmo utilizado antes, com file_get_content, e depois convertendo o resultado.

 $media = file_get_contents( "https://api.instagram.com/v1/users/self/media/recent/?access_token=$access_token" );
 $media = json_decode($media, true)['data'];

Nossa variável $media, está com uma lista contendo informações das imagens do feed do nosso cliente. Com esse método o Instagram nos permite, trazer informações das últimas 20 mídias, caso você queira limitar a quantidade, basta apenas usar o parâmetro ‘count’ depois do access token, informando o número de mídias que você quer. Exemplo: https://api.instagram.com/v1/users/self/?access_token=SEU-ACCESS-TOKEN&count=2.

READ MORE

Criando Meta Box para o seu tema WordPress

Você já precisou de um campo e não encontrou no WordPress? Teve que utilizar dos campos personalizados? Ou então instalou um plugin? É meu amigo, seus problemas acabaram, a solução é utilizar Meta Box.
Meta boxes são campos, que ficam no dashboard do WordPress, em posts, páginas e custom posts. De uma maneira mais amigável para o usuário. Meta boxes são altamente configuráveis, podem ser utilizadas para alterar a aparência, guardar informações, criar listas dinâmicas, galerias de imagens, em fim serve para atender a suas necessidades.
Diferente de usar plugins para adicionar, um Meta box, o seu código vai ficar mais limpo, pois você vai estar fazendo com que sua aplicações solucione apenas o necessários. Ficará confiável e ‘visível’ ao usuário, melhor que utilizar dos campos personalizados.
Bom então algo tão variável de utilizar, deve necessitar de um código monstruoso? Errado, para adicionar Meta box ao nosso tema, utilizamos de uma função nativa do WordPress, add_meta_box( ) . Vamos ver como funciona.
Imaginando que temos o seguinte problema, precisamos ter no nosso post, um campo para adicionar, uma cor ao título, mas cada post deve ter um título com uma cor diferente.
Vamos primeiro ver quais os parâmetros, nossa função add_meta_box recebe:

add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args );
  • $id: Este é um ID único atribuído à sua caixa de meta. Ela deve ter um prefixo único e ser HTML válido. [String – Obrigatório]
  • $title: O título da caixa do meta box. [String – Obrigatório]
  • $callback: A função de retorno de chamada que exibe a saída da sua caixa de meta. Já vamos ver ela melhor. [String – Obrigatório]
  • $post_type: Onde será exibido o Meta Boxes. Exemplos (‘post’, ‘page’, ‘link’, ou ‘custom_post ).  [String ou Array – Opcional, por padrão fica null]
  • $contexto: Onde na página o Meta box deve ser mostrado. As opções disponíveis são  ‘normal’, ‘side’ e ‘advanced’. [String – Opcional, padrão ‘advanced’]
  • $priority:  Prioridade de inserção da caixa em relação as demais, opções ‘high’ ou ‘low’. [String]
  • $callback_args: Determina a passagem de parâmetros a função callback [Matriz – Opcional]

Depois de conhecer os parâmetros que nossa função recebe, podemos iniciar nossa aplicação. Vamos utilizar nosso arquivo ‘function.php’, nele vamos iniciar criando uma função.

add_action( 'add_meta_boxes', 'init_meta_box_color' );
function init_meta_box_color(){
}

Está função servirá como uma chamada para nosso Meta box, conhecida no WordPress como ‘actions’. Pois não podemos sair criando Meta box a qualquer momento, precisamos respeitar a ordem do WordPress, por isso vamos utilizar essa função de chamada.

add_action( 'add_meta_boxes', 'init_meta_box_color' );
function init_meta_box_color(){
    add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args );
}

Agora sim podemos adicionar o nosso Meta box, vamos ajustar os parâmetros conforme nossa necessidade.

add_action( 'add_meta_boxes', 'init_meta_box_color' );
function init_meta_box_color(){
    add_meta_box( 'id_meta_color', 'Escolha uma cor para o título', 'meta_color', 'post', , 'normal', null );
}

O Meta box já foi criado, e está em exibição no nosso tema, agora vamos colocar um conteúdo para ele. Vamos criar uma função, com o nome que colocamos no parâmetro de callback, que no nosso caso foi ‘meta_color’.

function meta_color(){6
    ?>
    
    
    
    
    
    
    
    <?php
}
add_action( 'save_post', 'save_meta_color' );
function save_meta_color( $post_id  ){
    if(isset( $_POST['field_color'] ) ){
	   update_post_meta( $post_id , 'field_color', $_POST['field_color'] );
    }
}
READ MORE

Operador condicional (ternário): Como exatamente funciona?

O que significa isso: “isset($_POST[‘name’]) ? $_POST[‘name’] : ‘Convidado’;” ?
Muito conhecido por ser utilizado por programadores ‘preguiçosos’, que evitam criar um código monótono e redundante. O operador ternário é uma versão do “IF…ELSE”, que consiste em agrupar, na mesma linha, os comandos da condição.
Mas qual a diferença dele para o nosso  “IF…ELSE”?
Vamos comparar, primeiro a condição tradicional:

$sexo = 'M';
if($sexo == 'M'){
    $mensagem = 'Olá senhor';
}else{
    $mensagem = 'Olá senhora';
}

E agora como seria a nossa condição com operador ternário:

$sexo = 'M';
$mensagem = $sexo == 'M' ? 'Olá senhor' : 'Olá senhora' ;

Notamos que nosso código foi resumido de 6 linhas para apenas 2, a vantagem é bem clara, não é preciso repetir o nome da variável, pois o valor já é atribuído a ela.
OK, já vimos a comparação das condições, mas agora vamos entender como trabalhar com a estrutura do operador ternário.

$nota = 8;
$resultado = $nota > 7 ? 'Você Passou' : 'Você Reprovou' ;

Na condição o primeiro parâmetro recebe uma expressão booleana, o segundo é o retorno caso essa expressão seja verdadeira, e o último retorna o valor caso a expressão esteja errada. Assim a variável ‘resultado’ fica com o valor ‘Você Passou’.
O operador ternário vai facilitar muito sua vida, mas no caso de condições mais complexas, é aconselhado utilizar o tradicional IF…ELSE.

$cargo = $salario <= 1000 ? 'junior' : $salario <= 5000 ? 'senior' : 'diretor';

Ficou um pouco confuso, né? Então em casos complexos, ou de controle de fluxo, continue utilizando o IF…ELSE, mas quando for pra atribuir um valor a variável, use e abuse da condição ternánia.
Lembre-se, os exemplos dados acima foram feitos em PHP, condições ternárias, podem ser utilizados em outras linguagens, como Javascript.

validaEmail(email) ? enviaEmail(email) : mostraErro();
READ MORE

Já ouviu falar em Brackets?

Uma nova opção para você, desenvolvedor, é a ferramenta Brackets, uma IDE leve usada em criação e edição de arquivos HTML, CSS e JavaScript e com uma configuração fácil que te possibilita trabalhar com PHP.
O software Brackets pertence a Adobe, mas é gratuito e de código-fonte aberto, possibilitando que adicione extensões para personaliza-lo. Brackets também permite trabalhar simultaneamente com vários arquivos de um projeto, possui ferramenta de edição rápida, função para seleção ou conversão de cores, compatibilidade nativa com LESS e suporte a extensões de diversos tipos.

Funcionalidades nativas

Visualização instantânea – Com a visualização instantânea do Brackets, suas mudanças feitas no código podem ser vistas em tempo real. Passando o mouse por cima de algum seletor ou tag, no seu código, pode visualizar onde ele está sendo aplicado.
Editores expandidos – Cansado de ficar saltando entre abas de arquivos? Com seu design simples, Brackets posiciona todos seus arquivos de um modo fácil para serem editados. Para agilizar ainda mais seu trabalho, você pode selecionar um ID, ou uma classe de um elemento no seu HTML e o Brackets vai expandir um editor dentro da sua janela atual, com as informações de estilo do elemento, permitindo trabalhar paralelamente com seu código CSS, sem nenhum popup.
Split mode: vertical ou horizontal – Ter dois monitores é uma grande vantagem para um desenvolvedor, mas se esse não é seu caso, Brackets tem o modo split, onde seu editor divide em duas telas, na horizontal ou na vertical.

Extensões

Nem sempre um editor vem com todas as ferramentas que precisamos, então é sempre legal dar uma incrementada com algumas extensões para facilitar o desenvolvimento ou dar aquele novo visual para o Brackets.
Quick Search – Destaca automaticamente as ocorrências da palavra selecionada.
Emmet – é kit de ferramentas de um desenvolvedor web pode melhorar muito o seu HTML & CSS ​​fluxo de trabalho.

Desvantagens

Uma desvantagem do Brackets, pode ser a utilização das extensões, pois precisará baixar um plugin sempre que precisar de uma funcionalidade diferente. E como o Brackets é uma IDE leve, deixa a desejar quando trabalhamos com código mais pesado.

Diferencial

O grande diferencial do Brackets é sua função Extract (Preview), onde você pode extrair informações de um PSD. Extract for Brackets traz informações de estilo para seu CSS, um código simples e limpo, por meio de dicas. Podem ser extraídos do PSD estilos como: cores, fontes, gradientes e medidas. Além disso também pode gerar imagens a partir das camadas do PSD, sem precisar utilizar o Photoshop, tudo direto do brackets.
Mais detalhes sobre essa funcionalidade, podem ser vistas no nosso vídeo sobre essa integração.

READ MORE