Social media is becoming an important part of doing business today. Our layouts are written in HTML & CSS, so it’s simple to add in social media icons to opportunity documents that your customers can click when using approval.

Keep in mind that these links will only work in browsers. They won’t work in PDFs.

This is an advanced tutorial for folk who like to dig into the HTML & CSS that makes up our documents. If that’s not you, don’t worry! We offer a free document layout modification service so we’re happy to do this for you.

Grab social icons

There are lots of social icons online. rohitink on Github has created a simple set of icons that are open source and free to use commercially.

Grab link to rohitink’s icons in the Sociocons folder. Click into the social icon you’d like to use and hit the download button. 

The image should open in your browser. The link in the address bar is a link to the image online, we’ll use this in our code later.

If you’d like to use other icons, remember to check that you have permission to use them for your business. 

Add links to your documents

You can add images and links using the standard HTML image (<img> ) and hyperlink (<a> ) tags. 

In the example below, we’ve modified our standard document footer so that the page number is on the left and Facebook, Twitter, and YouTube icons are on the right:

<div class="social-icons section">
  Page <span class="page">1</span> of <span class="topage">1</span>
  <div style="float: right">
    <a href="https://www.facebook.com/currentrms" target="_blank">
      <img src="https://raw.githubusercontent.com/rohitink/sociocons/master/Sociocons/facebook-sociocon.png" style="max-height: 32px;" alt="Facebook">
    </a>
    <a href="https://twitter.com/currentrms" target="_blank">
      <img src="https://raw.githubusercontent.com/rohitink/sociocons/master/Sociocons/twitter-sociocon.png" style="max-height: 32px;" alt="Twitter">
    </a>
    <a href="https://www.youtube.com/channel/UCtr9hX3v4gp_rZ7RonxG7hA" target="_blank">
      <img src="https://raw.githubusercontent.com/rohitink/sociocons/master/Sociocons/youtube-sociocon.png" style="max-height: 32px;" alt="YouTube">
    </a>
  </div>
</div>

Customize this code

Change the links between the quotation marks after each href=  in the code above to change the webpages that you’d like to link to.

Change the links between the quotation marks after each src=  in the code above to change the social icons.

If you change the social icons, you’ll also want to change the corresponding alt=  text to the social service that you’re linking to. 

Need help?

Remember we offer a free document layout modification service, so we’re happy to help with document changes. Get in touch with us using the help bubble at the bottom-right if you need a hand  ↘️

Did this answer your question?