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; }