On this forum, there's just a bank of social media buttons and the copyright notice, which is just HTML with links.
I've just recreated the social media buttons on my own site, and I'll post how to add them horizontally, lined up. It might not be what you're after, but it'll at least show you.
Facebook & Twitter's buttons infamously don't sit well together, and you need to get them side-by-side. So this will explain how to do that.
Social media button alignment
You need to grab the code for your Facebook and Twitter buttons from their sites.
Edit theme
First of all, the Facebook code has two sections. There's a script to be called in the Body tag of the forum's theme HTML. You'll need to add that to header.tpl in your theme folder. Paste it in after:
<body class="{bodyClass}">
Save, and exit.
Open a new HTML Widget in ACP > Extend > Widgets and add to Global Footer. Now, I'm adding a couple of div containers to hold each button, with another wrapping them both up.
If you add the official Twitter and Facebook buttons, as they are, they don't align properly. So I added some code.
The structure looks like this:
<div class="social">
<div class="twitter">Add your Twitter button code in here</div>
<div class="facebook">Add your Facebook button code in here</div>
</div>
So, for my forum, the code looks like this:
<div class="social">
<div class="twitter"><a href="https://twitter.com/OnlyAnExcuse" class="twitter-follow-button" data-show-count="false">Follow @OnlyAnExcuse</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="facebook">
<div class="fb-like" data-href="https://facebook.com/OnlyAnExcuse" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
</div>
</div>
Once that's done, save your widgets page. Still one bit to do.
Styling it
Go to ACP > Appearance > Custom HTML/CSS, and choose Custom CSS
I used the following code to line up the buttons, space them a little and centre them.
.social {
text-align:center;
margin-left:auto;
margin-right:auto;
} /* Aligns the buttons in the centre of the page */
.twitter {
display: inline-block;
vertical-align: middle;
margin:4px 4px 0 0;
} /* Aligns buttons next to each other. Margin compensates for misaligned buttons */
.facebook {
display: inline-block;
vertical-align: middle;
}
That's that done. You should have two social media buttons aligned together like those at the bottom of the page. If you add more (pinterest or G+ for example), add another class, and copy the display and vertical-align over to them. Use margin to align if required.
The Copyright text
You can use a Text widget in the Footer area, or HTML. Entirely up to you. I used HTML.
ACP > Extend > Widgets > add the HTML widget to footer.
Code:
<div class="social">Copyright © 2016 <a href="OnlyAnExcuse.com">OnlyAnExcuse.com</a></div>
As you can see, I just reused the "social" class for centering the text.