Magento

Botão curtir na loja em Magento

Que o Facebook é rede social mais usada no Brasil na atualidade, todos nós já sabemos, e com isso, é comum (pelo menos no meu caso) pegar jobs de lojas em Magento com a opção para a pessoa curtir a loja, ou então curtir o produto, existem alguns módulos Magento para isso, mas pelo menos eu, procuro usar o menor número de módulos prontos, por isso resolvi escrever esse tutorial: Botão curtir – Como colocar na loja em Magento sem plugin.

Se você usar o código fornecido pelo Facebook para inserir o botão curtir, não vai funcionar direito, pois lá a URL que você define é estática e no caso da loja em Magento, a URL muda conforme o nome do produto ou página que você esteja, para isso vamos mostrar como colocar o botão curtir no Magento usando dois tipos de códigos, sendo eles XFMBL e o IFRAME.

Colocar botão curtir na loja em Magento

No exemplo, vamos colocar o botão curtir na loja em Magento, na página de produto, abaixo do nome do produto, para isso vamos adicionar um dos códigos abaixo (conforme o layout que você escolher) no arquivo view.phtml que fica na pasta /app/design/frontend/base/default/template/catalog/product/ lembrando que você deve escolher apenas um dos tipos de códigos (XFMBL ou IFRAME>

Versão Standard (Padrão)

botao_curtir_loja_magento_standard

XFMBL

<?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

IFRAME

<?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
<iframe style="border: none; overflow: hidden; width: 450px; height: 80px;" src="http://www.facebook.com/plugins/like.php?href=<?php echo $currentUrl ?>&layout=standard&show_faces=true&width=450&action=like&font&colorscheme=light&height=80" height="240" width="320" frameborder="0" scrolling="no"></iframe></p>

Versão com contador na horizontal

botao_curtir_loja_magento_horizontal

XFMBL

<?php $currentUrl = $this->helper('core/url')->getCurrentUrl();  ?><script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

IFRAME

<?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
<iframe style="border: none; overflow: hidden; width: 450px; height: 21px;" src="http://www.facebook.com/plugins/like.php?href=<?php echo $currentUrl ?>&layout=button_count&show_faces=true&width=450&action=like&font&colorscheme=light&height=21" height="240" width="320" frameborder="0" scrolling="no"></iframe>

Versão com contador na vertical

botao_curtir_loja_magento_vertical

XFMBL

<?php $currentUrl = $this->helper('core/url')->getCurrentUrl();  ?>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

IFRAME

<?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
<iframe style="border: none; overflow: hidden; width: 450px; height: 65px;" src="http://www.facebook.com/plugins/like.php?href=<?php echo $currentUrl ?>&layout=box_count&show_faces=true&width=450&action=like&font&colorscheme=light&height=65" height="240" width="320" frameborder="0" scrolling="no"></iframe>

Para que as imagens e nomes de produtos sejam adicionados corretamente, você também vai precisar inserir o seguinte código no head da sua loja Magento.

PHP

<?php // CHAMANDO IMAGENS E NOMES DE PRODUTOS NO BOTÃO CURTIR ?>
 <?php if (Mage::registry('current_product')) : ?>
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(100,100);?>" />
<meta property="og:title" content="<?php echo Mage::registry('current_product')->getName();?>" /> 
<?php endif;?> 

Pronto, agora além de inserir o botão curtir (Like) na loja em Magento, as miniaturas e nomes de produtos serão exibidos corretamente.

São basicamente duas alterações que foram feitas no código original que pegamos no Facebook, como já foi dito, o código que vem do Facebook é para páginas estáticas, e você precisa de um código com links relativos, pois cada produto, tem uma URL diferente, pra você entender, adicionamos as seguintes linhas.

<!-- CARREGANDO A URL ATUAL NO MAGENTO -->
<?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>

E também definimos o comando pra exibir a URL atual

<?php echo $currentUrl ?>

É isso, agora você já sabe colocar o botão curtir na sua loja em Magento, acesse também o tutorial para colocar o botão Pin it Pinterest no Magento e saiba como colocar o botão tweet no Magento. Espero ter ajudado.

Créditos: Blog Ecommerce Software.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    13 respostas para Botão curtir na loja em Magento

    1. André escreveu em 5 de agosto de 2013

      Ótima dica!

      Uma dica para quem quer anunciar seu ecommerce grátis: Monte sua vitrine e mostre para as pessoas o que você vende. É rápido, fácil e não precisa cadastro!

    2. Paulo estêvão escreveu em 4 de setembro de 2013

      a dica é muito boa. não consegui fazer funcionar porque não entendi onde incluir o código que chama imagens e nome dos produtos. agradeço resposta.

    3. admin escreveu em 5 de setembro de 2013

      Paulo,
      Você deve inserir o código das imagens e nome dos produtos no head da sua loja, que fica em /app/design/frontend/nome-do-seu-tema/default/template/page/html.
      Lá você vai encontrar um arquivo chamado head.phtml, e basta colar o código.
      Abraços

    4. jorgesantos escreveu em 17 de setembro de 2013

      Ola! Amigo onde adicionar esse codigo no abaixo de qual linha no view.phtml ou acima

    5. admin escreveu em 17 de setembro de 2013

      Boa Noite Jorge,
      Você pode adicionar ele, ao lado do nome do produto, na versão 1.6, fica mais ou menos na linha 49.
      Pode adicionar dentro da div < class= " product-name " >
      Qualquer coisa, grita ae, Abraços

    6. SexShop loja escreveu em 19 de fevereiro de 2014

      Otima dica, só nao sei como inserir o codigo no bloco estatico

    7. Qcabeca escreveu em 21 de fevereiro de 2014

      Não entendi sua dúvida…Pode explicar melhor?

    8. Ricardo escreveu em 8 de outubro de 2014

      Cara estou começando com magento mas esse tutorial foi fera demais, funcionando corretamente, abraços valeu

    9. Qcabeca escreveu em 8 de outubro de 2014

      Olá Ricardo, que bom que ajudou, sucesso ae. Abraço

    10. patrícia escreveu em 14 de dezembro de 2014

      olá, este script funciona na versão 1.9?
      Obrigada

    11. Qcabeca escreveu em 14 de dezembro de 2014

      Olá Patrícia, ainda não testei, mas acredito que funcione sim já que o código é do Facebook e não do Magento. Sucesso ae. Abraço

    12. Magno escreveu em 10 de janeiro de 2015

      ENTENDI ONDE COLOCA O CÓDIGO, CONTUDO MINHA LOJA É ALUGADA, OU SEJA, NÃO TENHO ACESSO AO SERVIDOR, APENAS À ÁREA ADMINISTRATIVA DO MAGENTO. vOCÊ CONSEGUE PENSAR EM OUTRA FORMA DE INCLUIR O BOTÃO SEM A NECESSIDADE DE EDITAR UM PHTML?
      oBS.: SUA DICA FOI MUITO BOA!!

    13. Qcabeca escreveu em 12 de janeiro de 2015

      Sem editar os PHTML, num primeiro momento, só com plugin mesmo Magno. Sucesso ae, abraço

    Envie seu comentário.

    Seu email não será publicado