Part 5. How to add social media icons

Read the following tutorial and learn how you can add social media actions to Green Bean theme on Plone 5.

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

Social media buttons can be inserted into any place on the page using portlets. Go to the desired location and click on the “Manage portlets” item on the toolbar. Select location for the portlet (Plone Leftcolumn, Plone Rightcolumn, or Plone Footerportlets). Choose Static Text Portlet from the “Add portlet…” drop down on the page. Add portlet title, e.g. Find Us On. Add the following HTML code (replacing '#' signs with your URLs):

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

 

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

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.

Green Bean Plone theme social icons

Connect with our experts Let's talk