Social Media Buttons

Author	« Topic »
Andy ECT Moderator 95440 Posts	Posted - 07/06/2017 : 09:42:35 We introduced the social media buttons in Version 6.6 and the set up details were added here https://www.ecommercetemplates.com/help/social-media.asp Gary from ITZAP - https://itzap.com.au - has very kindly sent us on more information to add regarding Open graph meta tags, which we have added here https://www.ecommercetemplates.com/help/social-media.asp#opengraph This is just a small part of all the information he provided - the set up is pretty straightforward but feel free to ask any questions. Andy Please feel free to review / rate our software
Andy ECT Moderator 95440 Posts	Posted - 09/25/2017 : 03:40:03 This tip is true for any of the store buttons really but here's how to add icons to the Ask A Question / Email A Friend button using FontAwesome so they match the other social media buttons with their logo icons Add this to your proddetail.asp / .php <HEAD> section (You can add it to other pages if you are going to use icons on other buttons) <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Add font-family:FontAwesome, sans-serif; to the input.askaquestion / input.emailfriend class in your main css file eg input.askaquestion, input.emailfriend{ background:#2868B2; color:#fff; height:21px; border:0; border-radius:4px; font-size:12px; cursor:pointer; margin-top:8px; font-family:FontAwesome, sans-serif; } In proddetail.php, just before <?php include "vsadmin/inc/incproddetail.php" ?> add <?php $xxAskQue="#xf27a; Ask A Question"; $xxEmFrnd="#xf0e0; Email A Friend"; ?> or for the ASP version In proddetail.asp, just before <!--#include file="vsadmin/inc/incproddetail.asp"--> add <% xxAskQue="#xf27a; Ask A Question" xxEmFrnd="#xf0e0; Email A Friend" %> You can see an example on our demo store here http://www.ectdemostore.com/blue-jeans-straight.asp All the FontAwesome icons are listed here http://fontawesome.io/cheatsheet/ Andy Please feel free to review / rate our software
midvalleydrifter001 Ecommerce Template Expert USA 912 Posts	Posted - 09/29/2017 : 14:17:26 Hi Andy, I followed the above and this is what I get: Any clue what I did wrong? Patrick Edited by - midvalleydrifter001 on 09/29/2017 14:18:09
midvalleydrifter001 Ecommerce Template Expert USA 912 Posts	Posted - 09/29/2017 : 14:54:26 I figured it out. You left off the & sign in front of the Font Awesome tag. Should read like this: <?php $xxAskQue=" Ask A Question"; $xxEmFrnd=" Email A Friend"; ?>
ITZAP Ecommerce Template Guru Australia 1009 Posts	Posted - 10/03/2017 : 16:55:36 Like that FontAwesome icon trick If you simply enter this in your includes.php config file ... $xxAskQue=' Ask a Question'; $xxEmFrnd=' Recommend to a Friend'; In that case, when you click the "Ask A Question" button, notice the Heading in the Pop-Up Window has an [X] where the Icon should be. So just add something like this to your CSS ... td.cobhl.emfhl { font-family: 'FontAwesome', 'Roboto', sans-serif; box-sizing: border-box; font-weight: normal; font-size: 105%; color: #ffffff; background-color: #003366; padding: 0; } Or whatever other Font and Hex Color Scheme suits your website. Now the specified FontAwesome Icon also appears in the Pop-Up Window. Gary Edited by - ITZAP on 10/07/2017 22:56:56
midvalleydrifter001 Ecommerce Template Expert USA 912 Posts	Posted - 10/06/2017 : 19:59:18 Works great Gary, but we still need the & symbol for it to work. $xxAskQue=' Ask a Question'; $xxEmFrnd=' Recommend to a Friend'; Edited by - midvalleydrifter001 on 10/06/2017 20:06:12
ITZAP Ecommerce Template Guru Australia 1009 Posts	Posted - 10/07/2017 : 23:10:28 Goodaye Patrick, Yes you are right, we need the ampersand up front in that Unicode to get the FontAwesome Icon to appear. I actually did type that in. But when you click "Post", this forum editor strips out the ampersand symbol. And I bet that happened to Andy also. Finally discovered that you need to type the HTML Character Code for the Ampersand & a m p ; (without spaces) to make it print here, which is what I guess you did. My post above edited accordingly. Gary Edited by - ITZAP on 10/07/2017 23:12:12
	« Topic »