X-Cart forums

[kevinrm]

Just in case anyone finds this useful. Yes, we use the "Go Social" module which adds a few social "like" buttons to the products, but for starters, it doesn't have Instagram which is way bigger than Pinterest these days. It also doesn't give you a simple link to your social sites on the footer or header, etc. So I put this together. All it does is puts the icons down in the footer and links to each.


1) Image search Google for "social icons", you will find a zillion of them. I downloaded what I needed in 32 px X 32 px. Upload them into an /images directory somewhere. If you want want I use, then I've provided them for you here.


2) in XC5 back end, navigate to Look & Feel >> Webmaster mode - turn that on, then go down to the footer and find the /default/en/powered_by.tpl template. Open that up, and after <div class="powered-by"> add this, ( replacing "yourID" in the appropriate places):


<div class="iconrwap">
<div class="social-icons"><a href="https://www.facebook.com/yourID/" target="_new"><img border="0" src="/images/32-facebook.png" width="32" height="32" alt="*" /></a></div>
<div class="social-icons"><a href="https://www.instagram.com/yourID/" target="_new"><img src="/images/32-instagram.png" alt="*" width="32" height="32" border="0" /></a></div>
<div class="social-icons"><a href="https://twitter.com/yourID" target="_new"><img src="/images/32-twitter.png" alt="*" width="32" height="32" border="0" /></a></div>
<div class="social-icons"><a href="https://plus.google.com/yourID/" target="_new"><img src="/images/32-googleplus.png" alt="*" width="32" height="32" border="0" /></a></div>
<div class="social-icons"><a href="https://www.youtube.com/channel/yourID" target="_new"><img src="/images/32-youtube-2.png" width="32" height="32" border="0" /></a></div>
<div style="clear:both"></div>
</div>


3) Look & Feel >> Custom CSS, add this:

.iconrwap {
text-align: center;
height: auto;
width: 240px;
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
}

.social-icons {
padding: 10px;
height: 36px;
width: 38px;
border: 0;
float: left;
text-align:center;
}

That's it!

[kevinrm]

The YouTube icon...

[kevinrm]

Note that since I did this, I already had 2 people subscribe to our YouTube page within 24 hours, and I hadn't had anyone subscribe to that for months previously.

[razortw]

Great post, thank you for sharing this recipee with the X-Cart community.

[Doherty]

Originally Posted by kevinrm

Just in case anyone finds this useful. Yes, we use the "Go Social" module which adds a few social "like" buttons to the products, but for starters, it doesn't have Instagram which is way bigger than Pinterest these days. It also doesn't give you a simple link to your social sites on the footer or header, etc. So I put this together. All it does is puts the icons down in the footer and links to each.


1) Image search Google for "social icons", you will find a zillion of them. I downloaded what I needed in 32 px X 32 px. Upload them into an /images directory somewhere. If you want want I use, then I've provided them for you here.


2) in XC5 back end, navigate to Look & Feel >> Webmaster mode - turn that on, then go down to the footer and find the /default/en/powered_by.tpl template. Open that up, and after <div class="powered-by"> add this, ( replacing "yourID" in the appropriate places):


<div class="iconrwap">
<div class="social-icons"><a href="https://www.facebook.com/yourID/" target="_new"><img border="0" src="/images/32-facebook.png" width="32" height="32" alt="*" /></a></div>
<div class="social-icons"><a href="https://www.instagram.com/yourID/" target="_new"><img src="/images/32-instagram.png" alt="*" width="32" height="32" border="0" /></a></div>
<div class="social-icons"><a href="https://twitter.com/yourID" target="_new"><img src="/images/32-twitter.png" alt="*" width="32" height="32" border="0" /></a></div>
<div class="social-icons"><a href="https://plus.google.com/yourID/" target="_new"><img src="/images/32-googleplus.png" alt="*" width="32" height="32" border="0" /></a></div>
<div class="social-icons"><a href="https://www.youtube.com/channel/yourID" target="_new"><img src="/images/32-youtube-2.png" width="32" height="32" border="0" /></a></div>
<div style="clear:both"></div>
</div>


3) Look & Feel >> Custom CSS, add this:

.iconrwap {
text-align: center;
height: auto;
width: 240px;
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
}

.social-icons {
padding: 10px;
height: 36px;
width: 38px;
border: 0;
float: left;
text-align:center;
}

That's it!

Great guide, found this really easy to follow dispite not having experience in either HTML or CSS! Thank you.

Do you know how I can expand this footer? I want something that looks similar to the footer here;
https://antennademo.wordpress.com/

See how they have live updates from twitter? If this isn't achivable would something like number 13 be;
http://www.creativebloq.com/web-design/website-footers-1131597

I know it's cheeky to ask but I appreciate any help.

[kevinrm]

Glad someone liked it. Of course you could do all kinds of things...

[Doherty]

Originally Posted by kevinrm

Glad someone liked it. Of course you could do all kinds of things...

Yes, but how?

[BrandonLR]

For some reason, this isn't working correctly in Chrome. My browser is updated.
Works great in firefox and other browsers, but Chrome is stacking the icons vertically- even weireder...it's only happening on our homepage. All other pages (in Chrome) render correctly.
Anyone know of an easy solution?

[totaltec]

Brandon,
Its hard to comment without being able to see the page. Would you mind sharing the URL where its not working?

[BrandonLR]

Originally Posted by totaltec

Brandon,
Its hard to comment without being able to see the page. Would you mind sharing the URL where its not working?

My bad...

www.razorblade.pro