{"id":964,"date":"2015-01-13T14:01:02","date_gmt":"2015-01-13T14:01:02","guid":{"rendered":"https:\/\/intelligentbee.com\/blog\/?p=964"},"modified":"2024-10-25T08:58:55","modified_gmt":"2024-10-25T08:58:55","slug":"how-to-add-share-buttons-to-symfony2-generated-web-pages","status":"publish","type":"post","link":"https:\/\/intelligentbee.com\/blog\/how-to-add-share-buttons-to-symfony2-generated-web-pages\/","title":{"rendered":"How to Add Share Buttons to Symfony2 Generated Web Pages"},"content":{"rendered":"

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<\/a>\u00a0JavaScript library.<\/span><\/p>\n

First you’re gonna\u00a0have to download<\/a> the Socialitejs library, save it to your bundle Resources\/public\/js<\/code> folder and publish the assets.<\/p>\n

If\u00a0you 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:<\/span><\/p>\n

<script type=\"text\/javascript\" src=\"{{ asset('bundles\/acmedemo\/js\/tmort-Socialite-6d9da1d\/socialite.js') }}\"><\/script>\r\n\r\n<!--...-->\r\n\r\n<ul class=\"social-buttons cf\">\r\n    <li>\r\n        <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>\r\n    <\/li>\r\n    <li>\r\n        <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>\r\n    <\/li>\r\n    <li>\r\n        <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>\r\n    <\/li>\r\n<\/ul>\r\n\r\n<!--...-->\r\n\r\n<script>\r\n    $(document).ready(function() {\r\n        Socialite.load();\r\n    });\r\n<\/script><\/pre>\n
 <\/p>\n
Add share buttons to symfony2 generated web pages<\/h2>\n
As you can see, this code will generate specific URLs for each page using the app.request.getUri<\/code> code.<\/p>\n
You\u00a0can also use the following CSS as a starting point if you need to customize the buttons:<\/p>\n
.social-buttons {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin-top: 20px;\r\n}\r\n.social-buttons li {\r\n  display: inline-block;\r\n}<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Some projects require you to add social share buttons for their pages. I’m gonna show you a simple way to […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[227,230,238],"yst_prominent_words":[6,394],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/964"}],"collection":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/comments?post=964"}],"version-history":[{"count":3,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/964\/revisions"}],"predecessor-version":[{"id":133268,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/964\/revisions\/133268"}],"wp:attachment":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/media?parent=964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/categories?post=964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/tags?post=964"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}