How to add Facebook Like and Twitter Follow button on your Magento Store

Como adicionar o botão Facebook Like e Twitter Follow na sua Magento Store?

A última década testemunhou um imenso crescimento na popularidade da mídia social. A melhor coisa aconteceu quando a mídia social começou a ajudar as empresas a estabelecer uma presença sólida na Web, gerar leads fortes e aumentar o tráfego do website por meio de uma estratégia de marketing eficaz.

Com a mídia social hoje, você pode alcançar seus visitantes de primeira viagem, assim como os clientes recorrentes de várias maneiras e mostrar o melhor que sua empresa tem a oferecer. Uma estratégia de rede social bem desenvolvida e organizada é muito crucial quando você depende de mídia social para marketing, geração de leads e muito mais.

Diferentes formas de interação com mídias sociais oferecem várias maneiras de melhorar a experiência do usuário e a imagem de marca de sua empresa. Recursos como o login sociais, Login no Facebook, clique para twittar, compartilhar no Facebook, siga no Twitter alguns exemplos de como as mídias sociais podem ser integradas em seu próprio site.

Hoje vamos discutir sobre essa integração que você pode fazer em sua loja Magento – como adicionar o botão "Curtir" do Facebook e o "botão Seguir" do Twitter em sua loja Magento? Esta adição irá ajudá-lo a melhorar a visibilidade de mídia social de suas páginas Magento, permitindo que os usuários curtam ou sigam sua marca.

Obter o código do botão Curtir do Facebook

Vamos começar com o botão do Facebook, então vamos adicionar o botão "Seguir" do Twitter. Portanto, para adicionar o botão Curtir do Facebook, visite o site do desenvolvedor do Facebook e navegue até o seguinte URL.

https://developers.facebook.com/docs/plugins/like-button

Você encontrará o seguinte formulário pedindo que alguns detalhes sejam preenchidos.

Como Button Configurator

  • Insira o URL da página do seu site ou o URL da sua página social do Facebook no "URL para a seção"
  • Digite a largura do botão que você deseja.
  • Selecione o layout dos botões e clique no Obtenha Código botão abaixo.

Se você também quiser mostrar o botão "Compartilhar" do Facebook ao lado do botão Curtir, pode marcar a caixa de seleção que diz "incluir botão Compartilhar".

Obtenha o código do botão Twitter Follow

Para obter o código do botão Share do Twitter, você precisa primeiro visitar o seguinte URL do Twitter.

https://publish.twitter.com/

Você verá a seguinte página:

Pediu para incorporar URL do twitter para código semelhante

Aqui, insira o URL da sua página do Twitter e siga as instruções na tela para obter o código do botão Compartilhar.

Role para baixo para encontrar a interface a seguir e clique como mostrado na imagem abaixo:

interface para obter botões do twitterEm seguida, você verá um pop-up. Aqui você precisa clicar na opção "Seguir botão" como mostrado na imagem abaixo:

Interface pedir Twitter Escolha do botão

A próxima interface solicitará que você insira o URL da sua página do Twitter ou seu nome de usuário do Twitter. Digite qualquer pessoa e clique em Visualizar. Você receberá o código.

Solicitado o URL da página do Twitter ou o nome de usuário

Adicione botões sociais à sua loja Magento

Agora temos o botão do Facebook e o código do Twitter Share. Vou adicionar esses botões sociais na minha página de produto Magento. Então eu preciso editar o seguinte arquivo do FTP do site.

MAGENTO_ROOT / app / design / frontend / [DESIGN_PACKAGE] / [TEMA] /template/catalog/product/view.phtml

Abra o view.phtml arquivo em qualquer um dos editores que você gosta de usar. Eu estou usando o NetBeans. Você pode usar qualquer editor de texto como o bloco de notas, o Notepad ++, etc.

Você tem a opção de adicionar esses botões sociais em qualquer posição na página. No entanto, escolhi o espaço abaixo do título do produto na página.

Então, para adicionar os botões sociais no espaço abaixo do nome do produto em sua página Magento, procure o seguinte código no arquivo view.phtml.

<div class = "product-name">

Após esse código, adicione um novo <div> com class = "social-info". Dentro deste novo <div>, adicione os códigos que você obteve do Facebook e do Twitter, respectivamente. O código seria algo como isto:

<div class = "nome-do-produto"> <span class = "h1"> <? php echo $ _helper-> productAttribute ($ _ product, $ _product-> getName (), 'nome')?> </ span> < / div> <div class = "info de preço"> <? php echo $ this-> getPriceHtml ($ _ product); ?> <? php echo $ this-> getChildHtml ('bundle_prices')?> <? php echo $ this-> getTierPriceHtml ()?> </ div> <! - Botões Sociais -> <div class = "social -info "> <! - Code for Twitter Siga o botão -> <a href="https://twitter.com/knowbandplugin" class="twitter-follow-button" data-show-count="false"> Siga @knowbandplugin </a> <script async src = "// platform.twitter.com/widgets.js" charset = "utf-8"> </ script> <! - Código do Facebook Botão Curtir -> < div id = "fb-root"> </ div> <script> (função (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)) return; js = d.createElement (s); js.id = id; js.src = "//connect.facebook.net/pt_PT/sdk.js#xfbml=1&version=v2.9";

Quando terminar a adição do código, salve o arquivo. Limpe o cache Magento do cache e navegue até a página do seu produto para ver se você consegue adicionar os botões sociais à sua loja Magento.

Padrão Welcome MSG!

Concluir

A mídia social tornou-se um órgão inseparável dos negócios que prosperam por causa disso. Quer seja através plugins de login social, Anúncio social ou compartilhamento social, as mídias sociais estão ajudando as empresas de inúmeras maneiras. Que tipo de opções de mídia social você usa na sua empresa? Deixe-nos saber nos comentários.

Quer aprender mais? Leia nossos posts em:

Como iniciar um login no Twitter da PrestaShop em sua loja PrestaShop?

Configurar o login do Google para sites PrestaShop

Também poderá gostar de:

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *