Social Media Buttons

Social media buttons allow visitors to click through from your website to your various social media profiles, where from they may follow you or take whatever socially appropriate action. This tutorial follows on from a discussion in our forum.

In this tutorial, I will present you some coded patterns and implementations that you may use to add social media buttons to your Backlight website.


Custom Page Footer

One method you can use is to create a custom page footer, then put your social media links there, along with whatever else; maybe some About copy. For an example, scroll to the bottom of this page.

This technique requires adding code via both Custom CSS and PHPlugins, as below.


Custom CSS

/* Custom_Footer 
   ========================================================================== */

.custom_footer {
    background-color: #333;
    border: 0 solid #191919;
    border-width: 2px 0;
    color: #fff;
}

.custom_footer > .content {
    font-size: 0.857rem;
    max-width: 1140px;
    padding: 0 24px;
}

.custom_footer ul {
    padding:0;
}

.custom_footer ul li {
    font-size: 0.857rem;
    list-style: none;
    padding: 0;
}

.custom_footer a {
    color: #90CAF9;
    text-decoration: none;
}

.custom_footer a:hover {
    color: #2196F3;
    text-decoration: underline;
}

PHPlugins

function ttg_footer_top( $style, $path ) { 
    echo '
<div class="custom_footer">
<div class="content clearfix">

    <p style="margin-bottom:0;"><strong>Custom Page Footer</strong></p>

    <div class="grid_12">

        <div class="col_9 alpha">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat nibh velit, ac maximus velit rhoncus id. Mauris pharetra risus urna, tincidunt sagittis lorem accumsan sit amet. Pellentesque consequat hendrerit lacus, id facilisis tortor ultricies vitae. Vestibulum elementum et augue vulputate bibendum. Donec ut quam nibh. In id mattis sem.</p>

            <p>

                <a target="_blank" href="https://www.facebook.com/user/"><span>Facebook</span></a>
                -
                <a target="_blank" href="https://twitter.com/user"><span>Twitter</span></a>
                -
                <a target="_blank" href="https://www.instagram.com/user/"><span>Instagram</span></a>

            </p>

        </div>     

        <div class="col_3 omega">

            <ul><!--

                --><li><a target="_blank" href="https://www.facebook.com/user/"><span>Facebook</span></a></li><!--
                --><li><a target="_blank" href="https://twitter.com/user"><span>Twitter</span></a></li><!--
                --><li><a target="_blank" href="https://www.instagram.com/user/"><span>Instagram</span></a></li><!--

            --></ul>

        </div>     

    </div><!-- .grid_12 --> 

</div>
</div><!-- .my_footer -->
    ';
    return true;
} // END

Make It Your Own

You will, of course, need to edit this code for your own use.

The code above puts social media links in two places; choose your preferred location, and delete the other.

For your chosen location, update the social media links to target your actual social media profiles.

Copy, paste and edit the hyperlinks for whatever social networks you want to use.

Edit the CSS to change colors, underlines, etc.

The HTML uses our responsive grid framework, so it's pretty easy to change the size or number of columns by editing the markup. If you want a three-column footer, or a wider paragraph for About copy, the grid framework can make that happen.

This is all pretty simple to do, but if you're feeling overwhelmed, ask questions in the forum. We will help you.