EverWeb Codebox

Social Media Buttons

Nothing looks worse than a web page plastered with social media buttons. If you need social media to spread the word about your website then your SEO is not too good or your content sucks!

On the other hand, some website owners love these nasty buttons and have to have them so why not contain and control them and add some useful ones like email and phone?

The HTML is just a list of image links. Delete the ones you don't need and add the URLs to your own social media pages in the anchor tags.

You can use these icons by dragging them off the web page and into Assets in EasyWeb.

The phone link will work on smart phones and shows the phone number on mouse over when viewed on computers. Obviously you need to change the phone numbers to your own!

For the email button, enter you own email address and email subject.

CSS


Paste this into the page Head Code box...


<style type="text/css">

.social-icons img {margin: 0; padding: 0; width: 48px; height: 48px}

.vertical-social-icons {width: 50px}

.vertical-social-icons img {margin: 0; padding: 0; width: 48px; height: 48px;}

</style>


For a vertical column of buttons change <div class="social-icons"> to <div class="vertical-social-icons">


HTML


Paste this into an HTML Snippet...


<div class="social-icons">

<a href="http://twitter.com"><img src="{!-ASSETSPATH-!}Images/twitter2.png" alt="Twitter" /></a>

<a href="http://pinterest.com"><img src="{!-ASSETSPATH-!}Images/pinterest.png" alt="Pinterest" /></a>

<a href="http://feeds.feedburner.com/"><img src="{!-ASSETSPATH-!}Images/feedburner.png" alt="RSS" /></a>

<a href="http://www.youtube.com"><img src="{!-ASSETSPATH-!}Images/youtube.png" alt="YouTube" /></a>

<a href="http://www.linkedin.com"><img src="{!-ASSETSPATH-!}Images/linkedin1.png" alt="LinkedIn" /></a>

<a href="http://www.facebook.com"><img src="{!-ASSETSPATH-!}Images/facebook1.png" alt="Facebook" /></a>

<a href="tel:18881234321" title="(888) 123 4321"><img src="{!-ASSETSPATH-!}Images/phone.png" alt="Phone" /></a>

<a href="mailto:info@my-website.com?subject=Email Subject&body="><img src="{!-ASSETSPATH-!}Images/mail1.png" alt="email me" ></a>

</div>


After applying the HTML, adjust the snippet size using the Metrics inspector.