How to create customized Facebook, Twitter, GooglePlus, WhatsApp, Linkedin or Pinterest sharing buttons

2016-11-27 David Fancello posted:

Do you need to share your post on Facebook, Twitter, Google+, Linkedin, Pinterest or WhatsApp, but you don’t want to use the long and complicated API functions provided by the social media companies? Today’s guide will explain how to do so without using specific APIs.

This guide requires some knowledge of HTML and CSS.

For each social media network it is sufficient to generate a specific link, to which you then pass specific values that you want to publish.

Facebook

For Facebook sharing, you need to use this link: http://www.facebook.com/sharer.php?u=[URL_FULL] where, instead of [URL_FULL] you write the full URL of the page.

Twitter

Twitter sharing gives us more values: http://twitter.com/share?text=$[TITLE]&url=[URL_FULL]&hashtags=[HASHTAG], where we can pass a title ([TITLE]), the full address of the page ([URL_FULL]) and add more hashtags ([HASTAG]) divided by a comma.

Pinterest

Pinterest sharing allows you to create a Pin using this link: http://pinterest.com/pin/create/button/?url=[URL_FULL]&description=[DESCRIPTION]. Besides providing the address of the page you would like to share, you can also give a description ([DESCRIPTION]).

Google+

For Google+ sharing you can use https://plus.google.com/share?url=[URL_FULL] where you only need to give the full address of the page.

LinkedIn

LinkedIn sharing gives you better customization: https://www.linkedin.com/shareArticle?mini=true&url=[URL_FULL]&title=[TITLE]&source=[SITE_NAME]; here you pass the full address of the page ([URL_FULL]), a title ([TITLE]), and the site name ([SITE_NAME]).

WhatsApp

For WhatsApp sharing, you can use whatsapp://send?&text=[TITLE] [URL_FULL], writing the title ([TITLE]) or text of your choice and the full address of the page ([URL_FULL]).

For the graphic design, we generally choose to use vectorial icons provided from Font Awesome.

You can find below a complete script similar to what we use on our own websites.

For the icons to work you must include in the head of your HTML page this style: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css.

The HTML code is as follows:

<div id="socialSharing">
    <a href="http://www.facebook.com/sharer.php?u=[URL_FULL]">
        <span id="facebook" class="fa-stack fa-lg">
            <i class="fa fa-facebook fa-stack-1x"></i>
        </span>
    </a>
    <a href="http://twitter.com/share?text=[TITLE]&url=[URL_FULL]&hashtags=[HASTAG]">
        <span id="twitter" class="fa-stack fa-lg">
            <i class="fa fa-twitter fa-stack-1x"></i>
        </span>
    </a>
    <a href="http://pinterest.com/pin/create/button/?url=[URL_FULL]&description=[TITLE]" class="pin-it-button" count-layout="horizontal">
        <span id="pinterest" class="fa-stack fa-lg">
            <i class="fa fa-pinterest-p fa-stack-1x"></i>
        </span>
    </a>
    <a href="https://plus.google.com/share?url=[URL_FULL]">
        <span id="googleplus" class="fa-stack fa-lg">
            <i class="fa fa-google-plus fa-stack-1x"></i>
        </span>
    </a>
    <a href="https://www.linkedin.com/shareArticle?mini=true&url=[URL_FULL]&title=[TITLE]&source=[SITE_NAME]">
        <span id="linkedin" class="fa-stack fa-lg">
            <i class="fa fa-linkedin fa-stack-1x"></i>
        </span>
    </a>
    <a href="whatsapp://send?&text=[TITLE] [URL_FULL]" data-action="share/whatsapp/share">
        <span id="whatsapp" class="fa-stack fa-lg">
            <i class="fa fa-whatsapp fa-stack-1x"></i>
        </span>
    </a>
</div>

The CSS code:

div#socialSharing a span.fa-lg {
    border-radius: 50%;
    margin: 1%;
    color: #FFFFFF;
}

div#socialSharing a span.fa-lg i {
    font-style: normal;
}

div#socialSharing a span#facebook {
    background-color: #3b5998;
}

div#socialSharing a span#facebook:hover {
    background-color: #133783;
}

div#socialSharing a span#twitter {
    background-color: #1da1f2;
}

div#socialSharing a span#twitter:hover {
    background-color: #2582bb;
}

div#socialSharing a span#pinterest {
    background-color: #bd081c;
}

div#socialSharing a span#pinterest:hover {
    background-color: #880e1c;
}

div#socialSharing a span#googleplus {
    background-color: #db4437;
}

div#socialSharing a span#googleplus:hover {
    background-color: #cf1808;
}

div#socialSharing a span#linkedin {
    background-color: #0077b5;
}

div#socialSharing a span#linkedin:hover {
    background-color: #02689d;
}

div#socialSharing a span#whatsapp {
    background-color: #00E676;
}

div#socialSharing a span#whatsapp:hover {
    background-color: #03c164;
}

We recommend showing WhatsApp sharing only on mobile devices.

If you want to see an example of how we use the social sharing code for our clients, you can visit the Gallura Disinfestazioni website or Renney and Co. website.

Bare in mind that for a complete customization whilst sharing posts, you also have to insert in the HTML code Open Graph tags, that we will explain in an upcoming post.

Sign up to our newsletter and stay in touch with us on our social networks if you would like to be notified when we publish new guides.

Highlights

SEO 101
SEO 101

There’s a high chance that you’ve heard the term SEO before but while you may have heard of these three letters (short for Search Engine Optimization) do you know what it is and why exactly it’s so important for websites?...

Read more

dodify looks for technical intern
dodify looks for technical intern

dodify Ltd. is a Graphic and Web Design agency based in Olbia and London. We are seeking candidates to join the team for an internship (candidates are required to have already completed their compulsory schooling under current It...

Read more

Fighting the Bad Guys: Dark Patterns
Fighting the Bad Guys: Dark Patterns

We spend a lot of time browsing websites and a lot of day-to-day routines are tied to the internet, whether it’s online shopping, signing up for bills or talking to friends and family. In spending so much time online we’ve di...

Read more

Contact Us

If you would like to contact us, need assistance or information about our services please drop us an email at info@dodify.com or use the form below.

Your contact details will be used in accordance with our privacy policy.