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 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
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 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 ↘️