Zen Cart Logo
Forums / General Questions / Twitter Cards ( Summary Card with Large Image & Product)

Twitter Cards ( Summary Card with Large Image & Product)

Views: 1,404

Results 1 to 6 of 6
3 May 2015, 5:15 PM
#1
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Twitter Cards ( Summary Card with Large Image & Product)

So I'm messing around trying to set up the Twitter Card meta tags.. Need some help..

and before ANYONE suggests that Twitter Card module, don't.. The module it doesn't work and I've neither the time or the patience to mess with it to figure out why.. The instructions are vague, and seems like a lot of work when I can simply add the meta tags like I added the Facebook meta tags.. :smile:
Now that said.. here's what I've got thus far.. Using this page as a guide: http://codeboxr.com/blogs/twitter-card-and-how-to-use-product-card-to-promote-ecommerce

<?php 
 if (in_array($current_page_base, array('product_info', 'document_general_info', 'document_product_info', 'product_info_noproduct', 'product_music_info'))) {?>
<meta name="twitter:card" content="product">
<?php }else{?> 
<meta name="twitter:card" content="summary_large_image" />
<?php }?> 
<meta name="twitter:site" content="@YourTwitterAccount" />
<meta name="twitter:creator" content="@YourTwitterAccount" />
<meta name="twitter:title" content="<?php echo STORE_NAME; ?>" />
<?php 
 if (in_array($current_page_base, array('product_info', 'document_general_info', 'document_product_info', 'product_info_noproduct', 'product_music_info'))) {?>
<meta name="twitter:description" content="<?php echo strip_tags($products_description->info['products_description']); ?>" />
<?php }else{?> 
<meta name="twitter:description" content="Your site description goes here." />
<?php }?> 
<meta name="twitter:image" content="<?php echo HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/' . HEADER_LOGO_IMAGE; ?>">

The card type if statement is working just fine. On the product pages it returns the right meta tag on all other pages, the summary card meta tag is returned.. What I'm having trouble with is the description if statement.. I end up with the description tag on the product pages being empty as follows..

<meta name="twitter:card" content="product">
 
<meta name="twitter:site" content="@YourTwitterAccount" />
<meta name="twitter:creator" content="@YourTwitterAccountf" />
<meta name="twitter:title" content="Your Store Name" />
<meta name="twitter:description" content="" />
 
<meta  name="twitter:image"  content="http://www.yoursite.com/includes/templates/your-template/images/logo.jpg">

I took a GUESS on how to get the product description in.. So please do not giggle (out loud at least) at my failed attempt:laugh: I'm sure that what I did is WAAAAAAY off.. I need to add the same kind of if statement to the title so I grab the product name instead of the store name and the product image instead of the general image.. Finally I want to grab the price, model numbers, and maybe the manufacturer for good measure.. So if I can nail this one, I figure the others will be easy peezy.. (I hope..)

Could use a hand here in figuring this out.. Hoping the sharp minds in this forum can help..

Help???!!:laugh:

4 May 2015, 2:23 AM
#2
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Twitter Cards ( Summary Card with Large Image & Product)

I used SOME of the code from the Twitter Product Card module, and made some progress..

Just one last minor thing to wrap this up.. I need help figuring out how to remove or escape double quotes from the product description so that the Twitter validator will read my Twitter product description meta tags..
This is the code I'm using:

<?php 
 if (in_array($current_page_base, array('product_info', 'document_general_info', 'document_product_info', 'product_info_noproduct', 'product_music_info'))) {?>
    <meta name="twitter:description" content="<?php echo strip_tags($zcdTwitterProductCard->info['products_description'])?>" />
<?php }else{?> 
    <meta name="twitter:description" content="Your summary card description goes here" />
<?php }?> 

It strips out the HTML tags.. which is good, but text like Size: 3" x 5" inside the product description will cause the Twitter validator to fail. Any hints how can I fix this??

4 May 2015, 7:27 AM
#3
divavocals avatar

divavocals

Totally Zenned

Join Date:
Jan 2007
Location:
Los Angeles, California, United States
Posts:
10,011
Plugin Contributions:
3

Re: Twitter Cards ( Summary Card with Large Image & Product)

Still talking to myself.. :laugh:

Disregard the previous question.. Figured out a solution.. (still could use some confirmation of this thought) replaced "strip_tags" with "htmlspecialchars" (and yes I know that I could alternately use "htmlentities" not sure which is "best" here..)

Now I just have to figure out why the price pulls in $0.00.. Not sure if the use of a stock attributes module is the reason..

29 Sep 2015, 6:57 PM
#4
calljj avatar

calljj

Zen Follower

Join Date:
Mar 2007
Posts:
253
Plugin Contributions:
2

Re: Twitter Cards ( Summary Card with Large Image & Product)

DivaVocals:

Still talking to myself.. :laugh:

Just thinking about doing this myself, so i'm listening, care to detail how you went about it, or did you just mimic the facebook OG stuff but add in the twitter references?

11 Nov 2015, 10:06 AM
#5
purecarsound avatar

purecarsound

New Zenner

Join Date:
May 2006
Location:
Chester, UK
Posts:
99
Plugin Contributions:
0

Re: Twitter Cards ( Summary Card with Large Image & Product)

DivaVocals - now this is all working for you would you consider putting it together as a Plugin to replace the current Twitter Card Module? Or post up the 'howto' on this thread?

Many thanks

Mark

27 Oct 2016, 2:32 PM
#6
remops avatar

remops

New Zenner

Join Date:
Mar 2014
Location:
Memphis, TN
Posts:
52
Plugin Contributions:
0

Re: Twitter Cards ( Summary Card with Large Image & Product)

DivaVocals

Please let in on your work much apreciated