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

Retail design in Olbia
Retail design in Olbia

As mentioned in a previous article, within a business or company we find the graphic work of a professional who, with the purpose of involving the customer, creates images or ad hoc messages for that space. W...

Read more

Website creation in Olbia - Custom Websites
Website creation in Olbia - Custom Websites

Do you need a new website in Olbia or want to upgrade your old website? Do you need to develop an eCommerce site? dodify specializes in the creation and implementation of web sites in Olbia. For years customer...

Read more

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

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.