Part 6. How to add social media buttons

Read the following tutorial and learn how you can add social media actions to Sliced Plone theme.

Social media buttons can be inserted into any place on the page using portlets. Choose Static Text portlet from the “Add portlet..” drop down menu. Add portlet title, e.g. Find Us On. In the TinyMCE click the HTML (Edit HTML Source) button and add the following code:

<ul class="social-icons"> 
<li class="btn-social"><a href="#" class="fa fa-facebook btn-social btn-facebook"></a></li>
<li class="btn-social"><a href="#" class="fa fa-twitter btn-twitter" ></a></li>
<li class="btn-social"><a href="#" class="fa fa-linkedin btn-linkedin"></a></li>
<li class="btn-social"><a href="#" class="fa fa-google-plus btn-google-plus"></a></li>
<li class="btn-social"><a href="#" class="fa fa-pinterest btn-pinterest"></a></li>
<li class="btn-social"><a href="#" class="fa fa-reddit btn-reddit"></a></li>
<li class="btn-social"><a href="#" class="fa fa-dropbox btn-dropbox"></a></li>
</ul>

You can use ready-made icons from Bootstrap. Go to http://lipis.github.io/bootstrap-social and copy classes of social icons you want to see.

Add only those social media buttons you need, in any order. Insert your preferred URLs. Save portlet. Your visitors can now follow you on social media platforms of their choice.

Sliced Plone theme social icons

Follow