Read the following tutorial and learn how you can add social media actions to Domino Plone theme.
Social media icons 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-buttons">
<li class="social-button-item">
<a class="btn-facebook btn-social-icon btn" href="#">
<i class="fa-facebook fa"></i></a>
</li>
<li class="social-button-item">
<a class="btn-twitter btn-social-icon btn" href="#">
<i class="fa-twitter fa"></i></a>
</li>
<li class="social-button-item">
<a class="btn-linkedin btn-social-icon btn" href="#">
<i class="fa-linkedin fa"></i></a>
</li>
<li class="social-button-item">
<a class="btn-google-plus btn-social-icon btn" href="#">
<i class="fa-google-plus fa"></i></a>
</li>
<li class="social-button-item">
<a class="btn-pinterest btn-social-icon btn" href="#">
<i class="fa-pinterest fa"></i></a>
</li>
<li class="social-button-item">
<a class="btn-reddit btn-social-icon btn" href="#">
<i class="fa-reddit fa"></i></a>
</li>
<li class="social-button-item">
<a class="btn-dropbox btn-social-icon btn" href="#">
<i class="fa-dropbox fa"></i></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.
Domino offers option to add social icons to the top area of the website.
For this add panel in the footer. Choose Static Text portlet from the “Add portlet..” drop-down menu. In the TinyMCE click the HTML (Edit HTML Source) button and change the aforementioned code by adding another class to UL tag.
<ul class="header-social-buttons social-buttons">
<li class="social-button-item"><a class="btn btn-social-icon btn-facebook" href="#">
<i class="fa fa-facebook"></i> </a></li>
<li class="social-button-item"><a class="btn btn-social-icon btn-twitter" href="#">
<i class="fa fa-twitter"></i> </a></li>
<li class="social-button-item"><a class="btn btn-social-icon btn-linkedin" href="#">
<i class="fa fa-linkedin"></i> </a></li>
</ul>
Panel with this portlet will not be displayed in the footer, but icons will appear in the right corner of the top area.