Part 7. How to Add Social Media

The following tutorial  will teach you how to add social media in Black Bee Responsive Theme  on a Plone 4.2 website.

Black Bee theme features social media to connect your business to the most popular social media which is essential today. First, you need to install quintagroup.portlet.static product and activate it via Site Setup -> Add-ons section. Select  Static Stylish Portlet* from Add portlet...  drop-down  menu. Insert the following piece of html code :

<ul class="social-icons">
<li> <a href="#" id="youtube">YouTube</a> </li>
<li> <a href="#" id="google">Google</a> </li>
<li> <a href="#" id="twitter">Twitter</a> </li>
<li> <a href="#" id="picasa">Picasa</a> </li>
<li> <a href="#" id="flickr">Flickr</a> </li>
<li> <a href="#" id="vimeo">Vimeo</a> </li>
<li> <a href="#" id="skype">Skype</a> </li>
<li> <a href="#" id="rrs">RSS</a> </li>
<li> <a href="#" id="linkedin">LinkedIn</a> </li>
<li> <a href="#" id="myspace">Myspace</a> </li>
<li> <a href="#" id="dribbble">Dribbble</a> </li>
<li> <a href="#" id="itunes">Itunes</a> </li>
<li> <a href="#" id="deviantart">Deviantart</a> </li>
<li> <a href="#" id="facebook">Facebook</a> </li>
</ul>


As you  can see each list element corresponds to some social network/media. Instead of # you need to insert the link to your social profile. You can configure the portlet the way you like and  select only those social networks that are suitable for you. It's simple as that, just edit the list.

Lastly, in Portlet style list choose Social icons and save it.

Each icon is highlighted to match the look of the corresponding social network. You can tweak the html code, adjust the column width and have it displayed the way you need.

Follow