Weebly is a popular website builder that allows users to create and design their own websites without having to learn coding. One of the features that makes Weebly so popular is its ease of use; even those with no prior experience can create a professional-looking website in minutes.
One of the most common questions we get is “How do I add social media to Weebly?”
There are two ways to add social media icons to your Weebly site:
The first way is to use Weebly’s built-in social media icon element. To do this, simply drag and drop the element onto your page, then enter the URL of your social media profile in the corresponding field. Weebly will automatically display the appropriate icon for each social media platform.
The second way is to use HTML code to add social media icons to your site. This method is a bit more technical, but it gives you more control over how your icons look and where they’re positioned on your page.
To add social media icons using HTML code, you’ll first need to find or create an icon for each social media platform you want to add. Once you have your icons, upload them to a web server (you can use Weebly’s built-in hosting service for this) and copy the URL of each icon.
Next, open the Weebly editor and click on the “Edit HTML/CSS” button. Paste the following code into the “Head Code” box:
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">Replace “https://fonts.com/icon?family=Material+Icons” with the URL of the icon font you’re using. If you’re not using an icon font, you can delete this line of code.
Next, paste the following code into the “Body Code” box:
<ul class="social-icons">
<li><a href="http://facebook.com/yourusername">
<i class="material-icons"></i></a></li>
<li><a href="http://twitter.com/yourusername">
<i class="material-icons"></i></a></li>
<li><a href="http://plus.google.com/yourusername">
<i class="material-icons"></i></a></li>
<li><a href="http://instagram.com/yourusername">
<i class="material-icons"></i></a></li>
</ul>Replace “http://facebook.com/yourusername” with the URL of your Facebook profile, “http://twitter.com/yourusername” with the URL of your Twitter profile, etc. Be sure to leave the quotation marks in place! Finally, delete any lines of code for social media platforms you’re not using.
To style your icons, you can change the color and size of the Material Icons font by adding CSS code to the “Head Code” box.
If you want more control over how your social media icons look, you can use image files instead of an icon font.
To do this, first find or create image files for each social media platform you want to add.
Once you have your images, upload them to a web server (you can use Weebly’s built-in hosting service for this) and copy the URL of each image.
Next, open the Weebly editor and click on the “Edit HTML/CSS” button.
Paste the following code into the “Head Code” box:
<style>
.social-icons {
list-style: none; padding: 0;
}
.social-icons li {
display: inline-block;
}
.social-icons img {
width: 32px; height: 32px;
}</style>Paste the following code into the “Body Code” box:
<ul class="social-icons">
<li><a href="http://facebook.com/yourusername">
<img src="https://example.com/facebookicon"></a></li>
<li><a href="http://twitter.com/yourusername">
<img src="https://example.com/twittericon"></a></li>
<li><a href="http://instagram.com/yourusername">
<img src="https://example.com/instagramicon"></a></li>
</ul>Replace “http://facebook.com/yourusername” with the URL of your Facebook profile, “http://twitter.com/yourusername” with the URL of your Twitter profile, and “http://instagram.com/yourusername” with the URL of your Instagram profile. If you want to add a social media platform that is not listed, simply copy and paste one of the existing lines and replace the URL and icon image with the appropriate information.
Save your changes and preview your website to make sure the icons are displayed correctly. You can adjust the appearance of the icons by modifying the CSS code in the “Head Code” box. For example, you can change the size of the icons by adjusting the “width” and “height” values.
That’s it! You’ve successfully added social media icons to your Weebly website using HTML code. By following these steps, you can easily connect with your audience on social media and drive traffic to your site.
