von Christoph Kaun Wednesday, 9th September 2015

Umbraco: Create Social Media Share Buttons in your Corporate Design

 

Social Media logos like facebook or twitter are legally protected. You’re actually not allowed to change that design. I’m going to show you a simple and free of charge way how it’s possible anyway to create those logos in your own design.

Font-Awesome

Go to Font Awsome and download the zip-file. Include "font-awesome.css" or "font-awesome.min.css" into your website. We also need to save the "fonts" folder under a "css"-folder on our website.

HTML-Markup

 

<ul class="share_list">
<li>
<a class="social_media_link" href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a class="social_media_link" href="https://twitter.com/intent/tweet?url=" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a class="social_media_link" href="https://plus.google.com/share?url=" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a class="social_media_link" href="https://www.linkedin.com/cws/share?url=" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>

You can style the icons as you like. The links refer to the "share"-URL of the social media website such as facebook, twitter, Google+, LinkedIn. Add your current URL to those Links. Your current URL needs to be encoded. To do that use jQuery.

 

jQuery Script

 

var unencoded_url = $(location).attr('href');
var encodedUrl = encodeURIComponent(unencoded_url);
$('.social_media_link').each(function() {
this.href += encodedUrl;
});

Summary: You take your current URL, encode it and add it to „.social_media_link"'s. This way your current page gets adapted to the share buttons each time.

Send us a comment, feedback or a question.



Follow us legal notice Contact info@lundp.de | +49-5131-4932-0