MENU

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.

Share this article