How to Add Share Buttons to Symfony2 Generated Web Pages

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>

Add share buttons to symfony2 generated web pages

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