[SOLVED] Trouble getting twitter:card to work (twitter image preview)

GamerWipes · August 7

PS 8.1.5 PHP + 8.1.1

Hello everyone, Im trying to get twitter:cards to work with no luck. I'll paste the code i have, its in themes/classic/templates/partials/header.tpl on line 31 of the default theme. Maybe Im putting it in the wrong file or the code is wrong. I cant find any info specific to Prestashop. Any help is really appreciated.

{**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 *}
{block name='header_banner'}
  <div class="header-banner">
    {hook h='displayBanner'}
  </div>
{/block}

{block name='twitter-cards'}
  <div class="twitter-card-large">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@GamerWipesGG">
    <meta name="twitter:creator" content="@GamerWipesGG">
    <meta name="twitter:title" content="GamerWipes ~ gamerwipes.gg">
    <meta name="twitter:description" content="We sell antibacterial wipes to clean controllers, eliminate sweat, and improve grip.">
    <meta name="twitter:image" content="http://gamerwipes.gg/img/twitter-card-large.jpg">
  </div>
  <div class="twitter-card-summary">
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@GamerWipesGG" />
    <meta name="twitter:title" content="GamerWipes" />
    <meta name="twitter:description" content="Visit gamerwipes.gg" />
    <meta name="twitter:image" content="http://gamerwipes.gg/img/twitter-card-summary.jpg" />
  </div>
{/block}

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">
      <div class="row">
        <div class="hidden-sm-down">
          <div class="col-md-5 col-xs-12">
            {hook h='displayNav1'}
          </div>
          <div class="col-md-7 right-nav">
              {hook h='displayNav2'}
          </div>
        </div>
        <div class="hidden-md-up text-sm-center mobile">
          <div class="float-xs-left" id="menu-icon">
            <i class="material-icons d-inline">&#xE5D2;</i>
          </div>
          <div class="float-xs-right" id="_mobile_cart"></div>
          <div class="float-xs-right" id="_mobile_user_info"></div>
          <div class="top-logo" id="_mobile_logo"></div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </nav>
{/block}

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-2 hidden-sm-down" id="_desktop_logo">
          {if $shop.logo_details}
            {if $page.page_name == 'index'}
              <h1>
                {renderLogo}
              </h1>
            {else}
              {renderLogo}
            {/if}
          {/if}
        </div>
        <div class="header-top-right col-md-10 col-sm-12 position-static">
          {hook h='displayTop'}
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

Edited August 7 by GamerWipes
solved (see edit history)

FME_Modules · August 7

26 minutes ago, GamerWipes said:

PS 8.1.5 PHP + 8.1.1

Hello everyone, Im trying to get twitter:cards to work with no luck. I'll paste the code i have, its in themes/classic/templates/partials/header.tpl on line 31 of the default theme. Maybe Im putting it in the wrong file or the code is wrong. I cant find any info specific to Prestashop. Any help is really appreciated.

{**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 *}
{block name='header_banner'}
  <div class="header-banner">
    {hook h='displayBanner'}
  </div>
{/block}

{block name='twitter-cards'}
  <div class="twitter-card-large">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@GamerWipesGG">
    <meta name="twitter:creator" content="@GamerWipesGG">
    <meta name="twitter:title" content="GamerWipes ~ gamerwipes.gg">
    <meta name="twitter:description" content="We sell antibacterial wipes to clean controllers, eliminate sweat, and improve grip.">
    <meta name="twitter:image" content="http://gamerwipes.gg/img/twitter-card-large.jpg">
  </div>
  <div class="twitter-card-summary">
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@GamerWipesGG" />
    <meta name="twitter:title" content="GamerWipes" />
    <meta name="twitter:description" content="Visit gamerwipes.gg" />
    <meta name="twitter:image" content="http://gamerwipes.gg/img/twitter-card-summary.jpg" />
  </div>
{/block}

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">
      <div class="row">
        <div class="hidden-sm-down">
          <div class="col-md-5 col-xs-12">
            {hook h='displayNav1'}
          </div>
          <div class="col-md-7 right-nav">
              {hook h='displayNav2'}
          </div>
        </div>
        <div class="hidden-md-up text-sm-center mobile">
          <div class="float-xs-left" id="menu-icon">
            <i class="material-icons d-inline">&#xE5D2;</i>
          </div>
          <div class="float-xs-right" id="_mobile_cart"></div>
          <div class="float-xs-right" id="_mobile_user_info"></div>
          <div class="top-logo" id="_mobile_logo"></div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </nav>
{/block}

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-2 hidden-sm-down" id="_desktop_logo">
          {if $shop.logo_details}
            {if $page.page_name == 'index'}
              <h1>
                {renderLogo}
              </h1>
            {else}
              {renderLogo}
            {/if}
          {/if}
        </div>
        <div class="header-top-right col-md-10 col-sm-12 position-static">
          {hook h='displayTop'}
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

Hello,

Make sure these tags are inside the <head> section. Clear your PrestaShop cache and check your page source to verify the tags are appearing. Use Twitter's Card Validator (https://cards-dev.twitter.com/validator) to see if there are any issues.

Also check:

Open your site in a web browser.
Right-click on the page and select “View Page Source” or “Inspect”
Look for the meta tags you added (e.g., <meta name="twitter:card" content="summary_large_image">) in the <head> section of the HTML.

if its not shown then your changes not applied

Hope this helps!

GamerWipes · August 7

5 minutes ago, FME_Modules said:

Hello,

Make sure these tags are inside the <head> section. Clear your PrestaShop cache and check your page source to verify the tags are appearing. Use Twitter's Card Validator (https://cards-dev.twitter.com/validator) to see if there are any issues.

Also check:

Open your site in a web browser.
Right-click on the page and select “View Page Source” or “Inspect”
Look for the meta tags you added (e.g., <meta name="twitter:card" content="summary_large_image">) in the <head> section of the HTML.

if its not shown then your changes not applied

Hope this helps!

Thanks for the reply, thats where Im stuck. I wasnt sure what file to put the code in since you cant edit .html files directly. From my research it seemed the header.tpl file would work. When I go to the website and Inspect, the code is there in the home page as it should be and it appears in the head and body section. You can check gamerwipes.gg if you'd like.

Also I tried the validator before asking and it doesnt seem to work with .gg website extensions. It says invalid URL.

Is header.tpl the right file or should I be working with another one instead? Thanks for your help

FME_Modules · August 7

7 minutes ago, GamerWipes said:

Thanks for the reply, thats where Im stuck. I wasnt sure what file to put the code in since you cant edit .html files directly. From my research it seemed the header.tpl file would work. When I go to the website and Inspect, the code is there in the home page as it should be and it appears in the head and body section. You can check gamerwipes.gg if you'd like.

Also I tried the validator before asking and it doesnt seem to work with .gg website extensions. It says invalid URL.

Is header.tpl the right file or should I be working with another one instead? Thanks for your help

Yes we checked your site and code looks fine but the position of code if not good.
kindly try this file to add your code
/themes/classic/templates/_partials/head.tpl

Thanks

GamerWipes · August 7

3 minutes ago, FME_Modules said:

Yes we checked your site and code looks fine but the position of code if not good.
kindly try this file to add your code
/themes/classic/templates/_partials/head.tpl

Thanks

That you I just made the changes and cleared the cache. Hopefully when Twitter's cache clears the images will show on X.com Thank you for your help!

GamerWipes · August 7

Everything is working now. marking this solved. thank you

Sign In

[SOLVED] Trouble getting twitter:card to work (twitter image preview)

Recommended Posts

GamerWipes

Link to comment

Share on other sites

FME_Modules

Link to comment

Share on other sites

GamerWipes

Link to comment

Share on other sites

FME_Modules

Link to comment

Share on other sites

GamerWipes

Link to comment

Share on other sites

GamerWipes

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com