Often required feature is social share. It is not that hard to build it but always makes me googling for "x share button" - and worst of all, they have a different ways of doing same thing.

Scripts free social share buttons

Here I will try not to use libraries or sdk-s, and write as less as possible javascript. This post calls them fat-free social buttons. So if this can be done with a simple links I will do it that way. Also simple links are easier to customize, change icons etc, they are under your control.

Official documentation sometimes does not provide a way of building a share url. Pinterest, for example, is encouraging people to include their library pinit.js (it works without it). And I couldn't find official docs of using facebook's sharer.php simple link without scripts, but again - they work. If you have javascript disabled they all have a fallback, and that is what are we going to use (abuse?). They suggest us to use the scripts to enhance the user experience but that can be handled with a custom simple javascript code.

Building it

I will show this example on a new created Laravel project, so I will create one with laravel new social-buttons.

Open resources/views/welcome.blade.php and add link to the FontAwesome library - simple way of adding social icons. If you have custom designed icons you can use that.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Create partial view that will hold all social links in resources/views/components/share.blade.php and add simple link. Function urlencode will sanitize the query parameter.

<div class="social-buttons">
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($url) }}"
       target="_blank">
       <i class="fa fa-facebook-official"></i>
    </a>
</div>

And include it in the welcome.blade.php page.

@include('components.share', ['url' => 'http://blog.damirmiladinov.com/'])

Parameter url will hold the url of what do we want to share. It's all good now except we open new tab to share the content. We can solve that with JavaScript and jQuery. Put the following code before closing </body> tag.

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>

    var popupSize = {
        width: 780,
        height: 550
    };

    $(document).on('click', '.social-buttons > a', function(e){

        var
            verticalPos = Math.floor(($(window).width() - popupSize.width) / 2),
            horisontalPos = Math.floor(($(window).height() - popupSize.height) / 2);

        var popup = window.open($(this).prop('href'), 'social',
            'width='+popupSize.width+',height='+popupSize.height+
            ',left='+verticalPos+',top='+horisontalPos+
            ',location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1');

        if (popup) {
            popup.focus();
            e.preventDefault();
        }

    });
</script>

Now we will get a nice smaller window instead of a new tab. Add twitter and google options in the same manner. For pinterest we need to provide description and image. So we need to pass those parameter to the share component. If we want to get the url of the current page we can use request()->fullUrl().

@include('components.share', [
    'url' => request()->fullUrl(),
    'description' => 'This is really cool link',
    'image' => 'http://placehold.it/300x300?text=Cool+link'
])

These can be dynamic data, like part of the post and first image in the post. These parameters will be used to build the share button.

<div class="social-buttons">
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($url) }}"
       target="_blank">
       <i class="fa fa-facebook-official"></i>
    </a>
    <a href="https://twitter.com/intent/tweet?url={{ urlencode($url) }}"
       target="_blank">
        <i class="fa fa-twitter-square"></i>
    </a>
    <a href="https://plus.google.com/share?url={{ urlencode($url) }}"
       target="_blank">
       <i class="fa fa-google-plus-square"></i>
    </a>
    <a href="https://pinterest.com/pin/create/button/?{{ 
        http_build_query([
            'url' => $url,
            'media' => $image,
            'description' => $description
        ]) 
        }}" target="_blank">
        <i class="fa fa-pinterest-square"></i>
    </a>
</div>

The thing is you can use this component on every page you need social share buttons. Additional logic can be applied if needed, for example if an image is not set ignore pinterest share etc.

References:

Laravel 5.2 Social buttons

Scripts free social share buttons

Building it