Add and Customize Social Icons in Weebly Site

Social media platforms are one of the easy ways for Weebly website owners to drive traffic to their site. Weebly offers “Social Icons” element to enable your social profiles anywhere on the site. This will help the visitors to easily follow your social content in Facebook, Twitter or YouTube. In this article, we will explain how to add social icons in Weebly and customize the appearance as per your need. Remember, this element only allows to add the follow link and not the share link. 

Add Social Icons in Weebly Site

Once you drag and drop the element in your content area, click on the “Manage Icons” option to enable or disable one of the available social links. Weebly offers the following social icons:

Different Ways to Add Social Icons in Weebly

You have many options to add social icons in Weebly site using default social element or embed code element:

• In the site header
• In the site content area
• In blog sidebar
• Using embed code element

In addition to this Weebly Pro users can add social icons element in site footer also. Below is an example of custom spinning social icons for Weebly, read on further to get the code.

                   

Enable Social Elements in Weebly Site Header

In your Weebly account select the site you want to edit. Under “Design” tab you can see “Design Elements” to enable or disable social media icons. Once you enable the option you can see four default icons visible in your site header. Align your social icons by moving it up or down or else remove it if you don’t want it. Click on the “Add more” option to enable more icons from the drop down list.

If you are using the responsive themes, you can simply drag and drop social icons in the header area. However, you can only add the icons if your theme support them in the main navigation. Check our article on how to add social icons and phone text in Weebly navigation section.

Enable Social Elements in Weebly Site Content

You also have an option to drag and drop a social icons element in your site’s content area. Social Icons element is available under More elements tab.

Some of the Weebly themes support only four basic social button like Facebook, Twitter, LinkedIn and RSS feed as shown below.

Change your site’s theme to the latest one in order to enable the complete list of social buttons which include Flickr, Pinterest, YouTube and much more. You can add only the icons you want and reorder the icons as you need.

Blog Sidebar Elements

If you add a blog page then you have an addition option to use Flicker badge and LinkedIn button in the blog sidebar. Twitter badge and Delicious linkroll elements available in the old interface were removed in the new interface.

Custom Spinning Social Icons for Weebly Site

Though you can add and remove social elements it is not possible to style the element as you need, making the default Weebly social icons set less attractive. Below is an example of spinning social icons on mouse hover.

                   

In order to add custom social icons set, you need to prepare images for your social links with approximate size of 60 x 60px. Upload the images under “Design > Edit HTML / CSS > Assets > Upload File(s)“. The URL of an uploaded image will be like below:

https://<Your Site Name>.weebly.com/files/theme/<Image Name>

If you want to add icons set on more than one page then add the following CSS code in “Design > Edit HTML / CSS > Assets > main.less“. If you want to add it only on particular pages then add it under “Pages > Select Page > Advanced Settings > Header Code“.

<style type="text/css">
p#socialicons img{ 
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>

Then drag and drop an “Embed Code” element and add the below HTML code by replacing the image URLs with your own.

<p id="socialicons">
<a href="https://facebook.com/WebNots">
<img border="0" src="https://img.webnots.com/2013/04/facebook_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://twitter.com/WebNots">
<img border="0" src="https://img.webnots.com/2013/04/twitter_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://pinterest.com/WebNots">
<img border="0" src="https://img.webnots.com/2013/04/pinterest_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://youtube.com/user/webnots">
<img border="0" src="https://img.webnots.com/2013/04/youtube_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://google.com/+WebNots">
<img border="0" src="https://img.webnots.com/2013/04/googleplus_social.png" /></a>
</p>

Note: Other than social icons element, Weebly also allows to add social sharing icons of Facebook and Twitter on blog posts.