Ecommerce Templates > General Help > Social Media

Social Media

Social Media Buttons

From Version 6.6 you can display the social media buttons of your choice on the product detail page. You can choose which buttons to show, in which order they should appear, how you would like them to be displayed and where in the layout they should be placed.

Social media buttons

Define the social media buttons

The first thing you will want to do is decide which social media buttons you want to display and these are the current options

  • askaquestion
  • emailfriend
  • facebook
  • linkedin
  • twitter
  • google
  • pinterest
  • custom

You can choose which to use and in which order they should appear with this addition to vsadmin/includes.asp

socialmediabuttons="askaquestion,emailfriend, facebook,linkedin,twitter,google,pinterest,custom"

or vsadmin/includes.php

$socialmediabuttons="askaquestion,emailfriend, facebook,linkedin,twitter,google,pinterest,custom";

For WordPress users that would be

$GLOBALS['socialmediabuttons']='askaquestion,facebook,linkedin,twitter,google,pinterest';

The Ask a Question and Email a Friend buttons are the same as the original feature on Ecommerce Templates and allows customers to ask about a particular product and send a link to an email address. The CSS used in the screen shot above for the this button is

input.askaquestion, input.emailfriend{
background:#1F3284;
color:#fff;
height:21px;
border:0;
border-radius:4px;
font-size:12px;
cursor:pointer;
margin-top:7px;
}

The CSS used for the social media container is

div.socialmediabuttons{
float:left;
width:97%;
padding:4px;
border:1px solid #ccc;
margin:4px;
background:#dedede;
}

The css for the individual buttons uses something like this

div.socialmediabutton{
float:left;
width:140px;
}

div.sociallinkedin{
margin-top:7px;
width:70px;
}

div.socialfacebook{
margin-top:5px;
}

div.socialtwitter{
width:70px;
margin-top:7px;
}

div.socialgoogle{
margin-top:4px;
width:70px;
}

div.socialpinterest{
margin-top:4px;
width:60px;
}

div.socialcustom{
margin-top:7px;
width:70px;
}

div.socialaskaquestion{
width:110px;
}

Top of page

Display the social media buttons

Once you have set the socialmediabuttons parameter in your includes file the social media buttons will appear at the bottom of the product detail layout.

Somewhere before the closing </head> tag on proddetail.asp add the following

<meta property="og:type" content="product" />
<%=metaogimage%>

...making sure at the the top of proddetail.asp you have the ASP include lines like this (and not duplicated later in the code)

<!--#include file="vsadmin/db_conn_open.asp"-->
<!--#include file="vsadmin/inc/languagefile.asp"-->
<!--#include file="vsadmin/includes.asp"-->
<!--#include file="vsadmin/inc/incfunctions.asp"-->
<!--#include file="vsadmin/inc/metainfo.asp"-->

For the PHP version you would add

<meta property="og:type" content="product" />
<?php
print $metaogimage;?>

...making sure at the the top of proddetail.php you have the PHP include lines like this (and not duplicated later in the code)

<?php
session_cache_limiter('none');
session_start();
ob_start();
include "vsadmin/db_conn_open.php";
include "vsadmin/inc/languagefile.php";
include "vsadmin/includes.php";
include "vsadmin/inc/incfunctions.php";
include "vsadmin/inc/metainfo.php";?>

For Wordpress users the code would need to be like this in header.php somewhere before the closing </head> tag

<?php if(strpos($_SERVER['PHP_SELF'],'proddetail.php')!==FALSE){ ?>
<meta property="og:type" content="website" />
<?php
print $GLOBALS['metaogimage'];?>
<?php } ?>

Here's an example of how the layout will appear

Social media buttons

If you need to define where the social media buttons display on the product detail page you will need to be using the CSS detail page layout and add socialmedia to the list like this for example in vsadmin/includes.asp

detailpagelayout="navigation, checkoutbutton, productimage, productid, manufacturer, sku, productname, discounts, instock, description, listprice, price, quantity, currency, dateadded, options, addtocart, socialmedia, previousnext, reviews"

or in vsadmin/includes.php

$detailpagelayout='navigation, checkoutbutton, productimage, productid, manufacturer, sku, productname, discounts, instock, description, listprice, price, quantity, currency, dateadded, options, addtocart, socialmedia, previousnext, reviews';

You can then use the css classes above to format the display.

Top of page

Customizing the social media buttons

Apart from choosing which social media buttons to display and in which order it is possible to customize the buttons themselves.

For example if you wanted to use a large twitter button and a custom message you would add this to vsadmin/includes.asp

socialbuttontwitter="<a class='twitter-share-button' href='https://twitter.com/intent/tweet?text=Hello%20world' data-size='large'>Tweet</a>";

or vsadmin/includes.php

$socialbuttontwitter='<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hello%20world" data-size="default">Tweet</a>';

The parameters are available on the social media sites like here for twitter https://dev.twitter.com/web/tweet-button/parameters

If you wanted to remove the button_count from the Facebook and Google buttons you would use the following in vsadmin/includes.asp

socialbuttonfacebook="<div class=""fb-like"" data-href=""%pageurl%"" data-layout=""button"" data-action=""like"" data-size=""large"" data-show-faces=""false"" data-share=""true""></div>"
socialbuttongoogle="<div class=""g-plusone"" data-annotation=""none"" data-href=""%pageurl%""></div>"

or in vsadmin/includes.php

$socialbuttonfacebook='<div class="fb-like" data-href="%pageurl%" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>';
$socialbuttongoogle='<div class="g-plusone" data-annotation="none" data-href="%pageurl%"></div>';

If you wanted to use a social media button that is not listed you can use the socialbuttoncustom parameter. For example to add a tumblr button you would add this to vsadmin/includes.asp

socialbuttoncustom="<a class='tumblr-share-button' href='https://www.tumblr.com/share'></a><script id='tumblr-js' async src='https://assets.tumblr.com/share-button.js'></script>"

or to vsasmin/includes.php

$socialbuttoncustom="<a class='tumblr-share-button' href='https://www.tumblr.com/share'></a><script id='tumblr-js' async src='https://assets.tumblr.com/share-button.js'></script>";

You would then add "custom" to the socialmediabuttons parameter as shown above.

The default for the Email a Friend and Ask A Question is an input button that can be formatted via the css file. You can change them to text links with the following in vsadmin/includes.asp

imgaskaquestion="link"
imgemailfriend="link"

or in includes.php

$imgaskaquestion="link";
$imgemailfriend="link";

Alternatively they can be displayed as images

imgaskaquestion="images/askaquestion.png"
imgemailfriend="images/emailfriend.png"

or in includes.php

$imgaskaquestion="images/askaquestion.png";
$imgemailfriend="images/emailfriend.png";

Top of page

Troubleshooting

If you find that Facebook is caching your product image / details you can ask for a rescrape of the URL at the following address

https://developers.facebook.com/tools/debug/

If you are checking the product image for Facebook and it is not appearing, make sure its size is above the Facebook minimum of 200px x 200px.

If you see the social media buttons are duplicated on your page make sure you haven't used both "socialmedia" and "emailfriend" together in the detailpagelayout parameter.

 

 

Top of page