Some projects require you to add social share buttons for their pages. I’m gonna show you a simple way to do this using the Socialitejs JavaScript library.

First you’re gonna have to download the Socialitejs library, save it to your bundle Resources/public/js folder and publish the assets.

If you have a general layout that is inherited by all your specific page templates (like it’s usually the case), just add the share code in it like so:

<script type="text/javascript" src="{{ asset('bundles/acmedemo/js/tmort-Socialite-6d9da1d/socialite.js') }}"></script>

<!--...-->

<ul class="social-buttons cf">
    <li>
        <a href="http://twitter.com/share" class="socialite twitter-share" data-text="Socialite.js" data-url="{{ app.request.getUri }}" data-count="vertical" rel="nofollow" target="_blank"><span class="vhidden">Share on Twitter</span></a>
    </li>
    <li>
        <a href="https://plus.google.com/share?url={{ app.request.getUri }}" class="socialite googleplus-one" data-size="tall" data-href="{{ app.request.getUri }}" rel="nofollow" target="_blank"><span class="vhidden">Share on Google+</span></a>
    </li>
    <li>
        <a href="http://www.facebook.com/sharer.php?u={{ app.request.getUri }}&t={{ page.name|url_encode() }}" class="socialite facebook-like" data-href="{{ app.request.getUri }}" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank"><span class="vhidden">Share on Facebook</span></a>
    </li>
</ul>

<!--...-->

<script>
    $(document).ready(function() {
        Socialite.load();
    });
</script>

As you can see, this code will generate specific URLs for each page using the app.request.getUri code.

You can also use the following CSS as a starting point if you need to customize the buttons:

.social-buttons {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
.social-buttons li {
  display: inline-block;
}