Simple Social Sharing Icons Widget for Weebly

Nowadays social sharing is an essential part of any website. They allow users to spread the word instantly with few clicks by sharing your article. While social media marketing is a popular topic, site builders like Weebly does not offer social sharing widget for users. Sadly even the business plan users on Weebly will not have decent social sharing icons on their site after paying almost $25 per month. In this article we will create a custom CSS social sharing widget for Weebly site and explain how to add it on your Weebly site with social sharing links.

Unfortunately this is to be done on each page by adding the page URL. Check out our separate article on how to add default social icons and a special spinning icons widget basically for adding social profiles on your Weebly site.

Custom CSS Social Sharing Icons Widget

Since the objective of this article is not discussing the design aspect we will provide the complete CSS code as shown below. Basically we use font awesome icons for social icons with the container width as 300px to accommodate five social icons – Facebook, Twitter, Google+, Pinterest and LinkedIn.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
/* Container */
.column {
width: 300px;
}
/* Individual Icons with first Box for Facebook */
.box {
background-color: #3b5998;
color: rgba(251, 244, 217, 0.99);
display: block;
width: 17%;
text-align: center;
float: left;
margin-right: 1px;
border-radius: 50%;
}

/* Twitter */
.box:first-child + .box {
background-color: #55acee;
}

/* Google+ */
.box:first-child + .box + .box {
background-color: #dc4e41;
}

/* Pinterest */
.box:first-child + .box + .box + .box {
background-color: #bd081c;
}

/* LinkedIn */
.box:first-child + .box + .box + .box +.box {
background-color: #0077b5;
}

/* Link Effects */
.column a {
text-decoration: none;
color: #ffffff;
outline: none;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}

/*Font Awesome Icons Effects */
.box .fa {
margin: 10px;
display: block;
font-size: 26px;
}

/* Box Hover Effects */
.box:hover {
opacity: 0.7;
}

</style>

HTML for Social Sharing Icons Widget

Below is the HTML code along with sharing URL for the social widget:

<div class="column">
<a href="https://www.facebook.com/sharer/sharer.php?u=www.webnots.com" class="box">
<div class="fa fa-facebook"></div>
</a>
<a href="https://twitter.com/home?status=www.webnots.com" class="box">
<div class="fa fa-twitter"></div>
</a>
<a href="https://plus.google.com/share?url=www.webnots.com" class="box">
<div class="fa fa-google-plus"></div>
</a>
<a href="https://pinterest.com/pin/create/button/?url=http%3A//img.webnots.com/2015/06/header_logo_home_2x.png&media=www.webnots.com&description=" class="box">
<div class="fa fa-pinterest"></div>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=www.webnots.com&title=YOUR%20TITLE%20HERE&summary=&source=" class="box">
<div class="fa fa-linkedin"></div>
</a>
</div>

The widget will look like below on the published site:

We used this site URL, ensure to replace the relevant content as indicated below from the HTML:

• Facebook, Twitter and Google+ – replace the site URL with your own.
• Pinterest – replace the image and URL.
• LinkedIn – replace site URL and title.

In case if you want to use as a “follow us” widget, just replace the URLs within “href” part with your own social profile links.

Adding CSS and HTML on Weebly

• Paste the CSS under “Header Code” section of the page you need or place it under the “Settings” for the code to be effective on site level. Learn more on how to add CSS in Weebly site.

• Add the HTML content on a page where you want to place the icons, using “Embed Code” element.
• Publish your site to see the sharing icons in action.

Customizing the Widget

• Though we explained with five icons, you can add any number of icons. Refer the social icons color codes to pickup the color for your icons.
• The width of the full container is 300px to align the icons automatically on mobile devices. In case you are adding more icons, ensure to use @media queries to align the icons on mobile appropriately.
• Individual icon’s width is 17% in “.box” CSS class which you can reduce or increase as per your need.
• The icon size is 26px with the CSS class “.box .fa” which you can change as per your need.
• If you add more icons, just add “+ .box” and define the background color of the icons.