Postagens do Instagram

Neste tutorial vamos adicionar o componente que mostra na página inicial as últimas publicações de uma conta do instagram.

HTML

A primeira coisa que vamos fazer é criar a pasta home dentro da pasta snipplets.

1. Dentro da pasta criada, adicionamos um snipplet com o nome home-instafeed.tpl com o seguinte conteúdo:

{% if settings.show_instafeed and store.instagram %}
    <section class="section-instafeed-home">
        <div class="container">
            <div class="row">
                {% set instuser = store.instagram|split('/')|last %}
                <div class="col-12 text-center">
                    {% if store.instagram %}
                        <a target="_blank" href="{{ store.instagram }}" class="instafeed-title" aria-label="{{ 'Instagram de' | translate }} {{ store.name }}">
                            {% include "snipplets/svg/instagram.tpl" with {svg_custom_class: "icon-inline icon-2x svg-icon-text"} %}
                            <h3 class="instafeed-user">{{ instuser }}</h3>
                        </a>
                    {% else %}
                        <div class="instafeed-title">
                            {% include "snipplets/svg/instagram.tpl" with {svg_custom_class: "icon-inline icon-2x svg-icon-text"} %}
                            <h3 class="instafeed-user">{{ "Instagram" | translate }}</h3>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div id="instafeed" class="row no-gutters">  
        </div>
    </section>
{% endif %}

2. Como queremos mostrar as últimas postagens do instagram na página inicial, adicionamos a chamada ao home-instafeed.tpl dentro de templates/home.tpl.

Vale ressaltar que é uma funcionalidade opcional, por isso vai depender se ela está ativada ou não, na seção ‘Personalizar seu layout atual’, no Administrador Nuvem.

{% include 'snipplets/home/home-instafeed.tpl' %}

3.  Por fim, para o HTML, precisamos adicionar uma pasta SVG dentro da pasta snipplets. Aqui vamos adicionar os SVGs que usamos para os ícones.

instagram.tpl

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>

heart.tpl

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"/></svg>

comments.tpl

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M532 386.2c27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.3 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.2 2.1 18.7 3.7 28.4 4.9C208.1 407.6 281.8 448 368 448c20.8 0 40.8-2.4 59.8-6.8C456.3 459.7 499.4 480 553 480c9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25-.4-.3-22.5-24.1-37.8-54.8zm-392.8-92.3L122.1 305c-14.1 9.1-28.5 16.3-43.1 21.4 2.7-4.7 5.4-9.7 8-14.8l15.5-31.1L77.7 256C64.2 242.6 48 220.7 48 192c0-60.7 73.3-112 160-112s160 51.3 160 112-73.3 112-160 112c-16.5 0-33-1.9-49-5.6l-19.8-4.5zM498.3 352l-24.7 24.4 15.5 31.1c2.6 5.1 5.3 10.1 8 14.8-14.6-5.1-29-12.3-43.1-21.4l-17.1-11.1-19.9 4.6c-16 3.7-32.5 5.6-49 5.6-54 0-102.2-20.1-131.3-49.7C338 339.5 416 272.9 416 192c0-3.4-.4-6.7-.7-10C479.7 196.5 528 238.8 528 288c0 28.7-16.2 50.6-29.7 64z"/></svg>

CSS

Requisito:

Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).

1. Adicionamos o seguinte SASS de cores em style-colors.scss.tpl (ou stylesheet do seu layout que possui as cores e fontes da loja). Lembre-se de que as variáveis de cores e fontes podem variar em relação ao seu layout:

{# /* // Margin and padding */ #}

%element-margin {
  margin-bottom: 20px;
}

{# /* // Instafeed */ #}

.section-instafeed-home {
  @extend %element-margin;
}

.instafeed-title {
  display: block;
  @extend %element-margin;
  color: $main-foreground;
}

.instafeed-info {
  color: $main-background;
  fill: $main-background;
  background: rgba($main-foreground, .6);
}

2. Adicione os estilos dentro do arquivo static/style-async.tpl

Se em seu layout você usar um stylesheet para CSS assíncrono, precisaremos do seguinte código dentro dele, mas se esse não for o caso, você pode unificar o CSS dos passos 1 e 2 em um único arquivo.

{# /* // Mixins */ #}

{# This mixin adds browser prefixes to a CSS property #}

@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    #{'-' + $prefix + '-' + $property}: $value;
  }
  #{$property}: $value;
}

{# /* // Instafeed */ #}

.instafeed-user {
    display: inline-block;
    margin: 0 0 0 5px;
  line-height: 24px;
  vertical-align: top;
}

.instafeed-link {
  display: block;
  overflow: hidden;
}

.instafeed-img {
  overflow: hidden;
  position: relative;
  padding-top: 100%;
  background-position: center center;
  background-size: cover;
  @include prefix(transition, all 0.8s ease, webkit ms moz o);
  .instafeed-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
    opacity: 0;
    @include prefix(transition, all 0.8s ease, webkit ms moz o);
    .instafeed-info-item {
      display: inline-block;
      margin-top: 45%;
    }
  }
  &:hover,
  &:focus {
    @include prefix(transform, scale(1.03), webkit ms moz o);
    .instafeed-info {
      opacity: 1;
    }
  }
}

JS

1. Precisamos aplicar as funções no arquivo store.js.tpl (ou onde você tem suas funções JS). O código que precisamos é o seguinte:

{% if settings.show_instafeed and (template == 'home') %}
 
    {# /* // Instagram feed */ #}
 
    {% if settings.show_instafeed and store.instagram %}
        {% set instuser = store.instagram|split('/')|last %}
 
        var width = window.innerWidth;
        if (width > 767) {  
            var resolution = 640;  
        } else {
            var resolution = 320;
        }
 
        $.instagramFeed({
            'username': '{{ instuser }}',
            'container': '#instafeed',
            'item_class': 'col-4',
            'image_class': 'instafeed-img',
            'private_class': 'col text-center',
            'image_size': resolution,
            'items': 9,
            'likes': {% if settings.instafeed_like %}true{% else %}false{% endif %},
            'like_icon': '{% include "snipplets/svg/heart.tpl" with {svg_custom_class: "icon-inline"} %}'
        });
    {% endif %}
{% endif %}

2. Agora vamos precisar adicionar o plugin no arquivo external.js.tpl ou no arquivo onde você tem os plugins do seu layout.

{% if settings.show_instafeed and store.instagram and template == 'home' %}
{# /* Instafeed */ #}
(function(jQuery){var defaults = {'username': '','container': '','items': 8 };var image_sizes = {"150": 0,"240": 1,"320": 2,"480": 3,"640": 4 }; jQuery.instagramFeed = function(options){options = jQuery.fn.extend({}, defaults, options);if(options.username == "" && options.tag == ""){console.log("Instagram Feed: Error, no username or tag found.");return;}var url = "https://www.instagram.com/"+ options.username;jQuery.get(url, function(data){data = data.split("window._sharedData = ");data = data[1].split("<\/script>");data = data[0];data = data.substr(0, data.length - 1);data = JSON.parse(data);data = data.entry_data.ProfilePage[0].graphql.user;var html = "";var image_index = image_sizes[options.image_size] !== "undefined" ? image_sizes[options.image_size] : image_sizes[640];if(data.is_private){html += "<div class='"+ options.private_class +"'><p>{{ 'Este perfil de Instagram es privado.' | translate }}</p></div>";}else{var imgs = data.edge_owner_to_timeline_media.edges;max = (imgs.length > options.items) ? options.items : imgs.length;for(var i = 0; i < max; i++){var url = "https://www.instagram.com/p/"+ imgs[i].node.shortcode;var image = imgs[i].node.thumbnail_resources[image_index].src;var likes = imgs[i].node.edge_media_preview_like.count;var comments = imgs[i].node.edge_media_to_comment.count;if(options.item_class){html += "<div class='"+ options.item_class +"'>";}html += "<a href='"+url+"' target='_blank' class='instafeed-link' aria-label='{{ 'Publicación de Instagram de' | translate }} {{ store.name }}'>";html += "<div data-bg='"+image+"' class='lazyload "+ options.image_class +"'>";if(options.likes || options.comments){html += "<div class='instafeed-info'>";if(options.likes){html += "<span class='instafeed-info-item'>"+ options.like_icon +" "+likes+"</span>";}if(options.comments){html += "<span class='instafeed-info-item'>"+ options.comment_icon +" "+comments+"</span>";}html += "</div>";}html += "</div>";html += "</a>";if(options.item_class){html += "</div>";}}}jQuery(options.container).html(html);});};})(jQuery);
{% endif %}

3. Como neste tutorial usamos a técnica de lazy load com o plugin Lazysizes, precisamos adicioná-lo. Para ver como fazer isso, você pode ler este pequeno artigo e continuar com este tutorial.

Configurações

No arquivo config/settings.txt vamos adicionar o checkbox para habilitar ou desabilitar o componente e se queremos tornar visível a quantidade de “Like” de cada publicação.

    title
        title = Publicaciones de Instagram
    description
        description = El Feed de Instagram muestra automáticamente tus últimas publicaciones en la página de inicio de tu tienda. Tu perfil debe ser público.
    checkbox
        name = show_instafeed
        description = Mostrar tus publicaciones de Instagram en la página de inicio de tu tienda
    checkbox
        name = instafeed_like
        description = Mostrar la cantidad de <em>‘Me gusta’</em> de cada publicación
    subtitle
        subtitle = Si no ingresaste tu usuario de Instagram, hacelo desde <a target='_blank' href='/admin/preferences/social_networks/'>acá</a>

Tradução

Nesta etapa, adicionamos os textos para as traduções no arquivo config/translations.txt

es "Publicaciones de Instagram"
pt "Postagens do Instagram"
es_mx "Publicaciones de Instagram"

es "El Feed de Instagram muestra automáticamente tus últimas publicaciones en la página de inicio de tu tienda. Tu perfil debe ser público."
pt "O feed do Instagram exibe automaticamente suas últimas postagens na página inicial da sua loja. Seu perfil deve ser público."
es_mx "El Feed de Instagram muestra tus últimas publicaciones en la página de inicio. Tu perfil debe ser público."
es "Mostrar tus publicaciones de Instagram en la página de inicio de tu tienda"
pt "Exibir suas postagens do Instagram na página inicial da sua loja."
es_mx "Mostrar tus publicaciones de Instagram en la página de inicio de tu tienda online"

es "Mostrar la cantidad de <em>‘Me gusta’</em> de cada publicación"
pt "Exibir quantidade de <em>“Likes”</em> de cada post"
es_mx "Mostrar los <em>‘Me gusta’</em> de cada publicación"

es "Si no ingresaste tu usuario de Instagram, hacelo desde <a target='_blank' href='/admin/preferences/social_networks/'>acá</a>"
pt "Se você não inseriu seu usuário do Instagram, faça-o <a target='_blank' href='/admin/preferences/social_networks/'>daqui</a>"
es_mx "Si no has ingresado tu usuario de Instagram, hazlo desde <a target='_blank' href='/admin/preferences/social_networks/'>aqui</a>"

es "Instagram de"
pt "Instagram de"
en "Instagram of"
es_mx "Instagram de"

es "Publicación de Instagram de"
pt "Postagem do Instagram de"
en "Instagram post of"
es_mx "Publicación de Instagram de"
es "Este perfil de Instagram es privado."
pt "Este perfil do Instagram é privado."
en "This Instagram profile is private."
es_mx "Este perfil de Instagram es privado."

Ativação

Por fim, você pode ativar as postagens do Instagram no Administrador Nuvem, na seção ‘Personalizar seu layout atual’, dentro de ‘Redes sociais’:

Se você precisar de ajuda para configurar a conta do Instagram, você pode visitar este artigo com mais detalhes: Como mostrar as fotos do Instagram no layout?