Often times users want to be able to add additional social icons into their site. In this Tutorial you will learn how to add additional Social Icons in the Vertex Framework. Keep in mind that not all Vertex designs have social icons built in.
We generally get asked this question a lot and while it is quite a complex task for a newer web developer I will try to outline all the steps required to make this addition properly. There are multiple files we will need to modify in this Tutorial so before I get started I recommend creating a full site backup in case something goes wrong.
If you do not intend to use a specific pre-programmed social icon on your site such as "RSS" you can simply swap out the rss.png icon on the server with a different social icon. Then in the RSS input box in the Template Manager you can add a link to any site matching your new icon.
<?php if ($s5_rss != "" || $s5_twitter != "" || $s5_facebook != "" || $s5_google != "" || $s5_linkedin !="") { ?>
<div id="s5_social_wrap">
<?php if ($s5_facebook != "") { ?>
<div id="s5_facebook" onclick="window.open('<?php echo $s5_facebook; ?>')"></div>
<?php } ?>
<?php if ($s5_google != "") { ?>
<div id="s5_google" onclick="window.open('<?php echo $s5_google; ?>')"></div>
<?php } ?>
<?php if ($s5_twitter != "") { ?>
<div id="s5_twitter" onclick="window.open('<?php echo $s5_twitter; ?>')"></div>
<?php } ?>
<?php if ($s5_rss != "") { ?>
<div id="s5_rss" onclick="window.open('<?php echo $s5_rss; ?>')"></div>
<?php } ?>
<?php if ($s5_linkedin != "") { ?>
<div id="s5_linkedin" onclick="window.open('<?php echo $s5_linkedin; ?>')"></div>
<?php } ?>
</div>
<?php } ?>
What Was Added #1 $s5_linkedin !=""
<?php if ($s5_rss != "" || $s5_twitter != "" || $s5_facebook != "" || $s5_google != "" || $s5_linkedin !="") { ?>
What Was Added #2
<?php if ($s5_linkedin != "") { ?>
<div id="s5_linkedin" onclick="window.open('<?php echo $s5_linkedin; ?>')"></div>
<?php } ?>
#s5_facebook {
height:38px;
width:38px;
background:#3D5B99 url(../images/facebook.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}
#s5_facebook:hover {
background:#334C7F url(../images/facebook.png) no-repeat center center;
}
#s5_twitter {
height:38px;
width:38px;
background:#159CEB url(../images/twitter.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}
#s5_twitter:hover {
background:#1388CD url(../images/twitter.png) no-repeat center center;
}
#s5_google {
height:38px;
width:38px;
background:#DD4B39 url(../images/google.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}
#s5_google:hover {
background:#C04232 url(../images/google.png) no-repeat center center;
}
#s5_rss {
height:38px;
width:38px;
background:#FF6F14 url(../images/rss.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}
#s5_rss:hover {
background:#DF6111 url(../images/rss.png) no-repeat center center;
}
#s5_linkedin {
height:38px;
width:38px;
background:#00c10e url(../images/linkedin.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}
#s5_linkedin:hover {
background:#00990b url(../images/linkedin.png) no-repeat center center;}
#s5_linkedin {
height:38px;
width:38px;
background:#00c10e url(../images/linkedin.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}
#s5_linkedin:hover {
background:#00990b url(../images/linkedin.png) no-repeat center center;}
<field name="xml_s5_facebook" type="text" default="" label="TPL_FACEBOOK_LABEL" description="TPL_FACEBOOK_DESC" />
<field name="xml_s5_twitter" type="text" default="" label="TPL_TWITTER_LABEL" description="TPL_TWITTER_DESC" />
<field name="xml_s5_google" type="text" default="" label="TPL_GOOGLE_LABEL" description="TPL_GOOGLE_DESC" />
<field name="xml_s5_rss" type="text" default="" label="TPL_RSS_LABEL" description="TPL_RSS_DESC" />
<field name="xml_s5_linkedin" type="text" default="" label="TPL_LINKEDIN_LABEL" description="TPL_LINKEDIN_DESC" />
<field name="xml_s5_linkedin" type="text" default="" label="TPL_LINKEDIN_LABEL" description="TPL_LINKEDIN_DESC" />
TPL_FACEBOOK_LABEL="Facebook URL"
TPL_FACEBOOK_DESC="Enter the text you desire for the facebook button. To disable simply leave this field blank."
TPL_TWITTER_LABEL="Twitter URL"
TPL_TWITTER_DESC="Enter the url you desire for the twitter button. To disable simply leave this field blank."
TPL_GOOGLE_LABEL="Google +1 URL"
TPL_GOOGLE_DESC="Enter the url you desire for the google plus one button. To disable simply leave this field blank."
TPL_RSS_LABEL="RSS URL"
TPL_RSS_DESC="Enter the url you desire for the rss button. To disable simply leave this field blank."
TPL_LINKEDIN_LABEL="LinkedIn URL"
TPL_LINKEDIN_DESC="Enter the url you desire for the linkedin button. To disable simply leave this field blank."
TPL_LINKEDIN_LABEL="LinkedIn URL"
TPL_LINKEDIN_DESC="Enter the url you desire for the linkedin button. To disable simply leave this field blank."