Como Criar um Portfólio Baseado no Instagram Utilizando o Bootstrap

() translation by (you can also view the original English article)

Neste tutorial vamos percorrer todo o processo de criação de um simples portfólio baseado no conteúdo do um perfil no Instagram. Vamos utilizar o layout elaborado neste tutorial pelo Tomas Laurinavicius.

O Thomas executou um ótimo trabalho mantendo o design simples, bem espaçoso e funcional, então acho justo manter os mesmo design para o desenvolvimento. Para facilitar a nossa vida, vamos utilizar algumas ferramentas e bibliotecas, vamos dar uma olhada no que vamos utilizar.

Ferramentas

Precisamos preparar nossas ferramentas antes de iniciar o desenvolvimento:

Primeiro, você vai precisar do Sass configurado e funcionando em sua máquina. A melhor maneira para fazer isso é utilizando alguns dos softwares disponíveis para esta função como o Koala, que é multiplataforma e grátis, basta instalar e utilizar. Existem outras alternativas como o Scout, Prepros e Compass app. Todos tem a mesma finalidade, então você pode utilizar o que lhe convém!

O próximo é o Bootstrap. Vamos utilizar o Bootstrap em um nível bem básico, apenas para aplicar recursos responsivos na página. Vamos utilizar especificamente a versão Sass do Bootstrap, pois podemos incluir ela no nosso próprio arquivo de estilos e utilizar apenas as varáveis necessárias. Faça download do Bootstrap Sass e vamos em frente.

Quase lá! Precisamos agora da biblioteca Instafeed.js, que vai auxiliar na comunicação com Instagram para que possamos utilizar as imagens do perfil em nossa página HTML. Para conseguir fazer solicitações ao Instagram, tal qual esta que precisamos para apresentar as fotos, precisamos gerar um client ID, na sessão de desenvolvedores do app.

Por ultimo, devemos utilizar a ultima versão do Modernizr, pois se preciso, podemos direcionar algumas funcionalidades a navegadores antigos. Não é obrigatório o seu uso mas é um boa prática que garante bons resultados.

Agora que já preparamos nosso ambiente podemos iniciar o desenvolvimento!

Estrutura de arquivos e pastas

Precisamos criar algumas pastas e arquivos para o nosso projeto, então vá em frente e cria suas pastas e arquivos de acordo com o exemplo abaixo.

css/
images/
js/
index.html

Esse é o ponto inicial. Agora extraia os arquivos que você baixou do Bootstrap. Dentro da pasta extraída, você deve encontrar uma pasta chamada assets. Abra essa pasta e você deve encontrar a seguinte estrutura de pastas:

Copie a pasta fonts para a raiz da pasta que criamos, junto com as outras pastas (css, images, js). Abra a pasta javascripts e copie o arquivo bootstrap.js para a pasta js do nosso projeto. Por último, abra a pasta stylesheets e copie o arquivo Bootstrap.scss e a pasta bootstrap para a nossa pasta css. Nossa estrutura de arquivos deve ficar similar ao exemplo abaixo:

Bom trabalho até agora! Falta apenas extrair e copiar os arquivos do Instafeed.js (instafeed.min.js) e do Modernizr para a pasta js do nosso projeto. Agora faltam apenas alguns ajustes e estamos prontos para começar o desenvolvimento do nosso portfólio.

Configurando o Sass

Agora precisamos configurar o projeto com o aplicativo Sass que decidimos utilizar. No Koala basta arrastar a pasta para o programa e basicamente ele está pronto para atuar, com os softwares similares acredito que o processo seja o mesmo ou parecido. A próxima coisa que eu sempre faço quando estou configurando um projeto para utilizar Sass é verificar as opções do compilador e, se disponível, marcar a opção para utilizar o Autoprefixer. Esse recurso adiciona os prefix de outros navegadores ao CSS compilado para que você obtenha o resultado esperado em qualquer navegador. Sinta-se livre para explorar as opções do compilador que você está utilizando. Eu prefiro manter as configurações simples, ativando o Autoprefixer e o output (que é o arquivo compilado) com estilo Expanded (e Compressed em ambiente de produção).

Adicionando arquivos

Abra o projeto no editor de códigos de sua preferência para que possamos adicionar alguns arquivos.

Primeiro, adicione um arquivo na pasta css chamado style.scss. Depois, dentro da pasta js adicione um arquivo chamado app.js.

Certifique-se de que você atualizou seu compilador Sass para que ele inclua os novos arquivos. Alguns aplicativos fazem isso automaticamente, mas é sempre bom checar para ter certeza.

Acredito que não vamos precisar de mais do que isso por enquanto, então vamos partir para a produção do layout!

Iniciando o desenvolvimento

Abra o arquivo index.html e cole o seguinte código HTML:


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Instagram Portfolio</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700|Kaushan+Script|Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body>
    <header>

    </header>
    <section class="instagram-wrap">

    </section>
    <footer>

    </footer>
    <section class="footer-bottom">

    </section>

</body>
</html>

Este é o nosso primeiro bloco de código! Vamos analisar o que está ocorrendo até aqui.

A seção <head> contém os valores da tag viewport para que nossas media queries funcionem corretamente. Depois, demos um título a página e incluímos a tag <link> para as fontes do Google fonts que vamos utilizar. As fontes são baseadas nas fontes utilizadas na elaboração do layout feita pelo Thomas. As próximas linhas podem parecer um pouco confusas, porque ainda não temos o arquivo style.css criado, pois o mesmo será criado através do nosso compilador Sass. Por ultimo, incluímos o arquivo do Modernizr ao documento HTML.

O elemento <body> tem dentro dele mais quatro elementos semânticos. Atribuimos classes auto descritivas para os elementos <section> para facilitar o entendimento da função daquele objeto.

Linkando os arquivos JavaScript

Adicione o seguinte bloco de código abaixo da <section class="footer-bottom"> :


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/instafeed.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

Esse bloco de código basicamente cria um link para os arquivos JS que vamos utilizar em nosso projeto, incluindo o link para o jQuery disponibilizado pelo CDN do Google, e utilizado pelo Bootstrap.

Estilos

Nós temos alguns valores padrões para nosso estilo, então primeiro vamos configurar esses valores no arquivo style.scss.


/*
* Custom variables
*/
$main-font: 'Lato', sans-serif;
$sub-font: 'Montserrat', sans-serif;
$fancy-font: 'Kaushan Script', cursive;
$font-size: 16px;

$black: #000;
$white: #FFF;
$grey: #585c65;
$mediumgrey: #9b9b9b;
$lightgrey: #eeeeee;
$blue: #3466a1;

$padding: 10px;
$margin: 10px;

/*
* Override Bootstrap variables
*/
$font-family-sans-serif: $main-font;

@import 'bootstrap';

Aqui nós declaramos algumas variáveis que podemos utilizar no nosso arquivo de estilo. Primeiro declaramos algumas variáveis para nossas fontes. Aqui é onde criamos a referência para as fontes do Google Fonts e configuramos o fallback caso a fonte não consiga ser carregada.

Depois declaramos algumas variáveis para as cores que vamos utilizar. O Sass desempenha um papel muito interessante em relação a necessidade de definir valores para uso futuro, por isso eu recomendo o uso dele. Neste caso ao invés de precisar lembrar o código HEX das cores, você pode simplesmente utilizar uma variável.

Para variáveis padrões (como *, body, header) temos estilos simples como padding e margin. Eu gosto de declarar esses valores mesmo não utilizando. É bom ter uma base, ajuda se for necessário fazer executar mudanças no layout.

A próxima sessão é onde incluímos o Bootstrap, mas antes devemos apontar a variável padrão de fonte no Bootstrap ($font-family-sans-serif) para a variável que criamos ($main-font) para nossa fonte.

O recurso @import no Sass não requer a inclusão da extensão do arquivo para localizar outros arquivos (.scss/.sass). O Sass é competente o bastante para encontrar e utilizar o arquivo correto. Salve o arquivo e o seu software para processar os arquivos Sass já deve ter notado a alteração no arquivo e gerado o arquivo de estilo final, style.css.

Mais estilos

Vamos seguir adicionando mais estilos:


* {
    position: relative;
    box-sizing: border-box;
}

body {
    color: $grey;
    font-size: $font-size;
}


header {
    max-height: 600px;
    height: 600px;
    overflow: hidden;
}

Aqui utilizamos um seletor universal * para dizer que todos os elementos possuem a propriedade CSS position: relative. Também é recomendado que você utilize a propriedade box-sizing para o border-box assim podemos utilizar larguras com porcentagem sem se preocupar com o espaçamento interno interferindo no layout.

Nós também definimos uma cor e tamanho padrão para o body e definimos uma certa altura no elemento <header>.

É isso para nosso arquivo Sass, por enquanto. Vamos agora para o arquivo index.html para trabalhar no header.

Expondo o cabeçalho (Header)

O cabeçalho (header em inglês) não é complicado, o que vai ajudar no tempo de produção. O markup que vamos utilizar nessa primeira parte é o seguinte:


<img src="images/mountains.jpg" alt="Mountains">
<div class="name fancy-font">
            Jonathan
</div>
<div class="titles">
    <h1>Hello! <span>I'm Jonathan</span></h1>
    <h2>I love to travel all around the world and design beautiful things</h2>
</div>
<div class="social">
    <a class="facebook" href="#">Facebook</a>
    <a class="twitter" href="#">Twitter</a>
    <a class="instagram" href="#">Instagram</a>
</div>

Esse código deve estar dentro da tag <header>. Note que a imagem de referência na tag img não existe. Vamos precisar cortar essa imagem no Photoshop, através do arquivo PSD com o design do layout. Não vou entrar em detalhes de como fazer isso neste tutorial, mais aqui vai uma dica.

O resto do código do header abrange três elementos div contendo nome, o título e links para redes sociais. Eu declarei algumas classes para esses elementos que também vamos utilizar no nosso arquivo Sass.

Estilos do Header (cabeçalho)

Vamos começar adicionando algumas linhas de código dentro da declaração do header.


img {
    position: fixed;
    top: 0px;
    left: 50%;
    margin-left: -600px;
    width: 1200px;

    @media screen and (min-width: $screen-lg) {
        top: auto;
        left: auto;
        margin: 0;
        width: 100%;
    }
}

Esse código deve ser declarado dentro da seção do header no arquivo Sass, logo abaixo das declarações já existentes do header.

Imagens Fixas

Você vai notar que declaramos a posição da tag img para fixed. Isso significa que a imagem não vai se mover ao rolar da página. A ideia é que o conteúdo passe por cima da imagem no cabeçalho. Como adotamos a metodologia Mobile First, nossos estilos dão as imagens uma posição central aplicando margens negativas exatamente com metade da largura. Isso funciona porque o ponto de transformação de uma imagem no CSS é no topo, na diagonal esquerda, então quando declaramos o left: 50% definimos que a borda esquerda vai ficar no centro da tela. Esse truque de margens negativas ajuda a posicionar elementos no centro com posições absolutas ou fixas.

Media Query

Vamos fazer agora o primeiro uso de uma das variáveis para tamanho de tela. Aqui nós declaramos: em telas grandes a imagem vai preencher a largura do navegador posicionando a imagem no topo esquerdo. Não podemos esquecer de resetar a margem, para evitar um leve espaçamento nas laterais.

Vamos conferir o que temos até aqui no navegador! :)

Continuando...


.name {
        font-size: 21px;
        position: absolute;
        top: 50px;
        left: 50px;
        color: $white;
    }

    .titles {
        position: absolute;
        bottom: 40%;
        width: 100%;
        text-align: center;

        @media screen and (min-width: $screen-lg) {
            bottom: 50%;
        }
    }

    h1, h2 {
        width: 100%;
        color: $white;
        margin: 0;
    }

Aqui declaramos a posição e a fonte utilizada no elemento name e no titles. Vamos usar media queries aqui para fazer com que o elemento titles fique um pouco mais para cima em telas largas. Agora atualize a pagina no navegador.

Está começando a ficar legal! Vamos alterar um pouco mais os headings (h1,h2,h3...).


h1 {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 36px;
        letter-spacing: 0.06em;
        margin-bottom: $margin;

        span {
            display: block;

            @media screen and (min-width: $screen-md) {
                display: inline;
            }
        }
     }

     h2 {
        font-size: 16px;
        width: 70%;
        margin: 0 auto;

        @media screen and (min-width: $screen-lg) {
            width: 100%;
            margin: 0;
        }
     }

A principal informação que devemos notar aqui é o estilo do elemento span. Utilizamos a tag span para agrupar e estilizar uma parte do cabeçalho. Isso permite utilizar estilos CSS focados naquele elemento (span) e ajustar questões de design do layout. O layout agora deve estar similar ao exemplo abaixo.

Fonte Fantasia - Fancy Font

Esse estilo devemos adicionar para mudar a fonte do nome no topo esquerdo da página. Insira o seguinte código no fim do seu arquivo Sass, fora do bloco de estilos do header.

1
2	.fancy-font {
3	font-family: $fancy-font;
4	}

Aplicamos nossa fonte fantasia para qualquer elemento com a classe fancy font. Assim podemos utilizar este recurso quando necessários inúmeras vezes.

Ícones de redes sociais - Social Icons

Devemos prestar atenção nos ícones de redes sociais que, neste caso, requerem sprites para monitores de baixa e alta resolução (Retina).

Seguindo em frente, vá no Iconfinder e selecione exporte os ícones que utilizamos no design. É bom escolher o maior tamanho para o ícone, porque se precisar alterar a resolução você não tem tantos problemas em relação a qualidade da imagem. Eu sempre escolho ícones de com tamanho 256px.

No seu software de edição de gráficos (Photoshop por exemplo) crie um novo arquivo de 152px por 52px. Agora redimensione cada ícone com a resolução 48px por 48px. Os ícones vão ficar com fundo preto, ai basta aplicar um filtro em cada ícone.

Agora precisamos posicionar os ícones. Temos dois pixels de espaço entre cada ícone, então mova o primeiro ícone para a lateral esquerda e de um espaçamento de dois pixels em relação ao próximo ícone. Aplique esse espaçamento de dois pixels em todos os elementos, para todas os lados, cima, baixo, esquerda e direita e o resultado final deve ficar parecido com isso:

Este vai ser a versão Retina dos ícones. Ignore o fundo preto aqui, apenas apliquei este fundo apenas para enxergarmos os ícones na imagem.

Utilizando o recurso do Photoshop de salvar para web (Save for Web), salve a imagem com o nome social-sprite@2x.png. Certifique-se de que a imagem foi salva na pasta de imagens do nosso projeto. Agora precisamos redimensionar os sprites para resoluções comuns. Podemos fazer isso também através do recurso Save for Web do Photoshop. O importante é a imagem ser redimensionada no tamanho 76px por 52px. Salve o arquivo com o nome social-sprite.png na pasta de imagens do projeto.

Com isso, criamos os sprites para os botões de redes sociais. Insira o seguinte código dentro do estilo do header logo após os estilos para os elementos h1 e h2.


.social {
        position: absolute;
        top: 55px;
        right: 50px;
        overflow: hidden;

        a {
            float: left;
            width: 26px;
            height: 26px;
            margin: 0 5px;
            text-indent: -9999px;
            background: url(../images/social-sprite.png) no-repeat;
            opacity: 0.8;

            &:hover {
                opacity: 1.0;
            }

            @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (-min-device-pixel-ratio: 2) {
                background: url(../images/social-sprite@2x.png) no-repeat;
                background-size: 76px 26px;
            }

            &.facebook {
                background-position: 0px 0px;
            }

            &.twitter {
                background-position: -25px 0px;
            }

            &.instagram {
                background-position: -50px 0px;
            }
        }
     }

Este pedaço de código parece complicado, mas não é. Para começar posicionamos o elemento .social na borda do topo esquerdo.

Depois declaramos alguns estilos para configurar a altura e largura da tag <a> e remover o texto de visualização utilizando valores negativos para o text-indent. Aqui também incluímos uma opacidade (opacity) de 0.8 que muda para 1.0 no hover, que gera um efeito bacana quando mouse passa pelo elemento.

A próxima seção é destinada aos sprites. É necessário permitir que dispositivos com telas de alta resolução tenham acesso aos sprites correspondentes, neste caso vamos utilizar uma media query para atender a esta necessidade. Utilizamos a proriedade background-size para garantir o tamanho "correto" da imagem. Agora basta declarar a propriedade background-position para cada ícone, com as respectivas medidas. Salve e atualize o navegador.

Note que a fonte fantasia (fancy-font) que utilizamos está funcionando para o nome e os ícones de redes sociais ficaram com uma aparência ótima. Bom trabalho!

Na próxima seção vamos tratar o conteúdo principal da página, onde vamos utilizar o Instafeed.js para se comunicar com a API do Instagram, e apresentar as fotos do perfil da rede.

Instagram Feed

Vamos começar adicionando o seguinte bloco de código no nosso arquivo index.html dentro da tag <section class="instagram-wrap"> :


<div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="instagram-content">
                    <h3>Latest Photos</h3>
                    <div class="row photos-wrap">
                    <!-- Instafeed target div -->
                    <div id="instafeed"></div>
                    <!-- The following HTML will be our template inside instafeed -->
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="photo-box">
                            <div class="image-wrap">
                                <img src="images/test_img.jpg">
                                <div class="likes">309 Likes</div>
                            </div>
                            <div class="description">
                                Fantastic Architecture #architecture #testing
                                <div class="date">September 16, 2014</div>
                            </div>
                        </div>
                    </div>
                        </div>
                </div>
            </div>
        </div>
    </div>

Note que neste bloco eu marquei cada seção que vamos precisar para acomodar as fotos do Instagram. O código executado não será carregado através da marcação HTML, será carregado através de instruções em JavaScript com o Instafeed.js. Não se preocupe com isso por enquanto, primeiro vamos terminar o visual da página.

Bootstrap Grid

Se você utiliza o Bootstrap, deve ter notado que agora estamos começando a utilizar algumas classes do framework pela primeira vez. Utilizamos as classes col-xs-xx, col-sm-xx, col-md-xx, col-lg-xx para ajustar os elementos em diferentes tamanhos de tela. A grid do Bootstrap opera com base em containers, linhas (rows) e colunas (columns). Toda linha (row) precisa estar dentro de um container e toda coluna (columns) precisa estar dentro de uma linha (row). Cada linha pode ter até 12 colunas, que devem ser utilizadas. Um exemplo é a classe col-xs-12 que representa que em telas pequenas (xs) serão utilizadas 12 colunas para a box (normalmente uma div) naquela linha (row), neste apenas uma coluna vai cobrir toda a linha declarada.

Do mesmo modo, se utilizarmos as classes col-xs-12 col-sm-6 col-md-3 em um elemento o mesmo vai ser instruído a se apresentar em telas pequenas de smartphones (xs) com 12 colunas, em telas pequenas de tablets (sm) com 6 colunas, o elemento deve cobrir metade da tela, e em telas medianas, normalmente de notebooks a alguns desktops, o elemento vai se apresentar com 3 colunas, ocupando apenas uma pequena parte da linha. Note que cada classe representa uma media de tela, com base em media queries (que estão inclusas no Bootstrap). Neste link você tem mais informações sobre a grid do Bootstrap.

you can learn more about Bootstrap in the free Tuts course Bootstrap 3 for Web Design — Saiba mais sobre o Bootstrap no curso grátis: Bootstrap 3 for Web Design.

Outro ponto que devemos mencionar é o uso do arquivo test_img.jpg que não existe. Esse é um arquivo que criei apenas para ajudar na marcação do espaço da imagem. Você pode usar o arquivo que desejar, apenas certifique-se de que o arquivo está na pasta images, com o mesmo nome do exemplo, caso contrário será necessária alteração do nome do arquivo na marcação HTML.

Estilos do Instagram

Agora que declaramos toda marcação HTML, vamos adicionar alguns estilos CSS:


.instagram-wrap {
    background: $lightgrey;
}

.instagram-content {
    h3 {
        text-transform: uppercase;
        letter-spacing: 0.5em;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        padding: $padding*5 0;
        color: darken($lightgrey, 20%);
    }

}

Você vai precisar inserir este código após os estilos declarados para a class header no arquivo Sass. Este código declara algumas propriedades de cor de fundo (background-color) e estilos de fonte. Save o arquivo Sass e veja como ficou no navegador.

Aquele pequeno pedaço de código fez uma mudança substancial no layout. Precisamos melhorar ainda o visual do layout, então vamos voltar no arquivo Sass e adicionar o seguinte código:


.photo-box {
        margin: 0 0 $margin*3 0;

        .image-wrap {
            img {
                width: 100%;
            }

            .likes {
                position: absolute;
                bottom: 5px;
                left: 15px;
                padding: $padding/2;
                background: $black;
                background: rgba($black, 0.4);
                color: $white;
            }
        }
        .description {
            font-family: $sub-font;
            font-size: 12px;
            background: $white;
            color: $mediumgrey;
            letter-spacing: 1px;
            padding: $padding*1.5;
            height: 75px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

Esse bloco de código tem de ser declarado logo após a declaração para tag h3 dentro da classe .instagram-content. Vamos analisar rapidamente cada pedaço do código. Demos a classe .photo-box um pouco de margem em relação ao rodapé, para dar uma espaçamento entre as fotos. Não nos preocupamos com o espaçamento lateral, já que a grid do Bootstrap se encarrega disso. Depois nos certificamos que todas as imagens com a classe .image-wrap estão com largura de 100%, assim ela assume a largura do navegador. O elemento .likes foi posicionado na margem esquerda do rodapé da imagem, com texto branco e fundo preto semi transparente.

Por ultimo, o estilo para a classe .description. As quatro ultimas propriedades permitem esconder o texto durante o rolar da página de uma forma bem legal graças ao text-overflow: ellipsis;. O bom dessa prática com CSS é que a elipse vai desempenhar o seu papel independente do tamanho da tela. O suporte a navegadores também é considerável.

Salve o arquivo e atualize o navegador novamente para notarmos as alterações:

Agora está realmente agradável o layout! Acredito que agora possamos substituir a marcação HTML com as fotos do Instagram, com ajuda do Instafeed.js.

Utilizando o Instafeed.js

A maneira deste plugin operar faz com que qualquer pessoa consiga, de forma muito simples, apresentar um feed do Instagram em uma página web. Mas, para utilizar o Instafeed.js, você precisa de um Client ID fornecido pelo Instagram. Você adquiri o Client ID se cadastrando no Instagram e depois visitando a seção de desenvolvedores para solicitar o ID.

Assim que você criar o seu Client ID, inclua o seguinte código no arquivo app.js:


$(function() {

    //Set up instafeed
    var feed = new Instafeed({
        clientId: '97ae5f4c024c4a91804f959f43f2635f',
        target: 'instafeed',
        get: 'tagged',
        tagName: 'photographyportfolio',
        links: true,
        limit: 8,
        sortBy: 'most-recent',
        resolution: 'standard_resolution',
        template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="photo-box"><div class="image-wrap"><a href="{{link}}"><img src="{{image}}"></a><div class="likes">{{likes}} Likes</div></div><div class="description">{{caption}}<div class="date">{{model.date}}</div></div></div></div>'
    });
    feed.run();

});

Vamos analisar o que está acontecendo aqui:

Primeiro, utilizamos jQuery. Iniciamos com uma função document ready (abreviada) para que a instrução do Instafeed.js não seja carregada até tudo estar de fato carregado.

Segundo, declaramos uma variável chamada feed e determinamos o valor de uma nova instância do Instafeed.

Agora fornecemos algumas instruções que nos permitem controlam os dados que a API do Instagram nos retorna através do Instafeed.js:

clientId - Seu Client ID fornecido pelo Instagram.
target - O ID do elemento na página que vai apresentar as fotos.
get - O modo que o Instafeed.js está operando. Utilize 'tagged' para o Instafeed.js saber que você está buscando através das tags.
tagName - O nome da tag a ser buscada.
links - Link da imagem no Instagram.
limit - Limita o número de imagens retornadas. Bom para paginação.
sortBy - Como devem ser organizadas as fotos, no nosso caso escolhemos a opção most-recent.
resolution - O tamanho das imagens retornadas.
template - A marcação HTML utilizada para renderizar as imagens na página. Vamos utilizar a marcação que criamos anteriormente. O Instafeed utiliza chaves duplas para demarcar onde as propriedades da imagem devem ser inseridas no template.

Agora vamos testar o feed!

Após salvar o arquivo e atualizar o navegador você deve ter se deparado com algo assim:

Caso ocorra algum erro ou nada seja apresentado, você pode estar com algum problema no seu Client ID. Se você utilizar o informado nos arquivos do artigo tudo deve correr bem. A página deve apresentar oito imagens, com as informações de likes e a descrição da foto.

Ajustando o código

Agora precisamos ajustar o código HTML para o template da imagem que criamos anteriormente. Volte para o arquivo index.html e encontre o seguinte código:


<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="photo-box">
            <div class="image-wrap">
                <img src="images/test_img.jpg">
                <div class="likes">309 Likes</div>
            </div>
            <div class="description">
                Fantastic Architecture #architecture #testing
            <div class="date">September 16, 2014</div>
        </div>
    </div>
</div>

Remova ou comente este bloco de código. Eu decidi comentar o código, assim podemos utilizar ele novamente caso haja a necessidade.

O rodapé (footer)

De volta ao arquivo index.html insira o seguinte código no elemento <footer>.


<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h4>Get in touch</h4>
            <p class="about-text">I shoot, design and write. Don't hesitate and get in touch with me if you need some creative work done. I always work to achieve my best and fulfil client needs</p>
            <a class="contact-now-btn" href="#">Contact Now</a>
        </div>
    </div>
</div>

Como vocês podem notar, aqui utilizamos mais classes do Bootstrap. Dessa vez declaramos que o elemento dentro da linha deve ocupar as doze colunas em qualquer tamanho de tela (utilizamos uma DIV com a classe col-xs-12).

Estilos do rodapé (footer)

Vamos declarar também os estilos dessa seção.


footer {
    background: $white;
    padding: $padding*3 0;
    text-align: center;

    @media screen and (min-width: $screen-lg) {
        padding: $padding*10 0;
    }

    h4 {
        font-size: 36px;
        text-align: center;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .about-text {
        padding: 0 $padding*3;

        @media screen and (min-width: $screen-lg) {
            width: 650px;
            margin: 0 auto;
        }
    }

    .contact-now-btn {
        display: inline-block;
        width: 70%;
        padding: $padding*2 $padding*5;
        margin-top: $margin*2;
        color: $white;
        background: $grey;
        font-size: 13px;
        letter-spacing: 1px;
        text-decoration: none;
        text-transform: uppercase;

        @media screen and (min-width: $screen-md) {
            width: 60%;
        }

        @media screen and (min-width: $screen-lg) {
            width: 20%;
            margin-top: $margin*5;
        }

        &:hover {
            background: lighten($grey, 5%);
        }
    }
}

Mais um bloco de códigos de estilo! Este apesar de extenso não é complicado. Ele apenas define algumas cores, tamanhos de fontes e espaçamentos. Utilizamos algumas media queries para posicionar elementos em diferentes posições com base no tamanho da tela. Note o elemento .contact-now-btn que utiliza duas media queries para ajustar o seu tamanho em diferentes resoluções. Agora salve o arquivo e atualize novamente o navegador, você deve ter algo parecido com a imagem abaixo:

Agora vamos finalizar essa parte adicionando as declarações na seção .footer-bottom.

Seção Footer Bottom

1
2	<section class="footer-bottom">
3	2014 © Jonathan White. All rights reserved.
4	</section>

Adicione algum texto nesta seção, com marcação HTML. Depois abra o arquivo Sass e insira o seguinte bloco de código de estilo:


.footer-bottom {
    background: $white;
    padding: $padding $padding*6;
    border-top: 2px solid $lightgrey;
    letter-spacing: 2px;
    text-align: center;
    color: $mediumgrey;
    text-transform: uppercase;

    @media screen and (min-width: $screen-md) {
        padding: $padding*4 0;
    }
}

Esse bloco pode ser inserido abaixo dos estilos para o footer. Utilizamos a propriedade letter-spacing para criar um espaçamento agradável entre as letras. Essa seção possui um leve espaçamento nas laterais que são transferidos para o topo e o rodapé em telas grandes. Salve o arquivo e atualize o navegador.

Terminamos! O layout está bem elaborado tanto para telas grandes, de notebooks e desktops, quanto para telas pequenas de tablets e smartphones e está apresentando o conteúdo presente no perfil do Instagram através do Instafeedjs. Muito bom!

Conclusão

O que eu gosto deste layout é a possibilidade de adaptar facilmente qualquer tipo de conteúdo além do portfólio de imagens. Você também pode explorar mais o Bootstrap com Sass mas não é necessário se as funcionalidades simples lhe atendem. O que temos aqui é um simples layout como base para outros projetos.

Espero que vocês consigam acompanhar as etapas do tutorial sem nenhum problema e que tenham aprendido algo novo no tutorial. Sinta-se a vontade para encaminhar duvidas, criticas ou sugestões nos comentários! Obrigado por ler todo o artigo.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!