Community @ The Turning Gate

mblanchette1

Member

From: Bedford, NH

Registered: 2012-10-15

Posts: 111

Website

TIPS and TRICKS: Add custom social media bar

If you’re in a rush to add social media icons to your Backlight site (without having to wait for later versions), you can easily add your own custom social media bar using PHPlugins and a custom stylesheet (just like the good old days).

On my test site (http://www.mabtesting.dreamhosters.com/home/), I added social media buttons at the top of the footer, above the copyright notice. In my case, I’m using 32x32 pixel icons, but you can choose any size you like as long as you change the width and length parameters in the PHPlugins code. And you can also revise the CSS code to align the buttons however you choose, although mine are centered on the page.

Below is the code I added to my PHPlugins file to support Facebook, Google Plus, Twitter, 500px, Instagram, and Flickr. I used the ttg_footer_top hook to add the buttons, but you can use any of the available hooks to locate the social media bar elsewhere on your pages. This code assumes a top-level folder on your site named “icons” to hold the social media buttons. And you’ll obviously have to change all links to social media sites. The sites are always opened in a separate window, but if you prefer to open them in the same window, just remove “target=_blank” from each of the lines below.

function ttg_footer_top( $style, $path ) { 
   echo '
   <div id=“socialbar">
      <a href="https://www.facebook.com/yourfacebook/" target="_blank"><img src="/icons/facebook.png" title="Facebook" width="32" height="32"/></a>
      <a href="https://plus.google.com/+yourgoogleplus” target="_blank"><img src="/icons/google.png" title="Google Plus" width="32" height="32"/></a>
      <a href="https://twitter.com/your twitter“ target="_blank"><img src="/icons/twitter.png" title="Twitter" width="32" height="32"/></a>
      <a href="https://500px.com/your500px” target="_blank"><img src="/icons/500px.png" title="500px" width="32" height="32/"></a>
      <a href="https://www.instagram.com/yourinstagram/“ target="_blank"><img src="/icons/instagram.png" title="Instagram" width="32" height="32"/></a>
      <a href="https://www.flickr.com/photos/yourflickr/“ target="_blank"><img src="/icons/flickr.png" title="Flickr" width="32" height="32"/></a></div>
   ';
   return true;
} // END ttg_footer_top

Below is the code I added to my custom CSS. I start by centering the standard copyright notice on the page.

div.copyright p
{
   text-align: center;
}

And then, I add code to center the social media bar, adding a margin at top to separate the buttons from the rest of the page.

#socialbar {
   text-align: center;
   margin-top: 24px;
   display: block;
}

Last edited by mblanchette1 (2016-05-13 20:42:23)