Adding Social Media 'Follow us' buttons into non-WordPress Bespoke Website
A customer request has ‘arrived in my inbox’, requesting the addition of ‘follow us’ buttons and links to their Facebook and Instagram web pages.
The website is not WordPress based, but one of our legacy hand-crafted websites built a while back.
So the website addition required here, on the home page looks like:
The Font Awesome icon stylesheet library is incorporated in order to generate the social media icons.
This requires the inclusion of the stylesheet declared in the html header section of the home page:
<!– Add icon library –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
Then the links themselves need to be considered carefully as not to damage search engine optimisation (SEO) work.
A new browser tab is required to open for the social media page, so target=”_blank” is needed, but this on it’s own is considered by Google to be a security risk. Consequently, the additional attribute rel=”noopener” is added to the link.
The ‘noopener’ attribute prevents the new web page gaining any access to the originating page (i.e. our home page). So the security risk is prevented.
Listed here is the portion of html plus the associated CSS, including the styling of each button. The ‘rainbow’ styling of the Instagram button was sourced from a Stack Overflow solution.
The HTML code is as follows:
<div id=”socialmedia”>
<p>For all the latest news please follows us on Facebook and Instagram:</p>
<a href=”https://www.facebook.com/profile.php?id=<facebook-id>” class=”fa fa-facebook” title=”Follow us on Facebook” target=”_blank” rel=”noopener”></a>
<a href=”https://www.instagram.com/<instagram-identifier” class=”fa fa-instagram” title=”Follow us on Instagram” target=”_blank” rel=”noopener”></a>
</div>
And the CSS:
#socialmedia {
width:100%;
margin:10px 0;
background-color:#fff;
border-radius:5px;
}
#socialmedia a{
color:white;
font-style:none;
}
/* Style all font awesome icons */
#socialmedia .fa {
margin:10px;
padding: 10px;
font-size: 30px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 5px;
}
/* Add a hover effect */
#socialmedia .fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
#socialmedia .fa-facebook {
background: #3B5998;
color: white;
}
/* Instagram */
#socialmedia .fa-instagram {
background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);
color: white;
}
Links
Website: Quirky Huts
Portfolio page:
Plugin(s):
Tools: Adobe Dreamweaver (version 21.3)
Sources: Stack Overflow (Instagram button styling)
Further reading/external sites: Mozilla Firefox and a bit better privacy (rel noopener and noreferrer)
