*/ ?>

Adding a Facebook 'like' button to your concrete 5 website

I previously posted about how to add a like 'box' to your website, here's how to add a like button to web pages in your concrete 5 website.  This approach hard codes the button into your theme instead of using a block.

The first thing that we need to do is incorporate the open graphs tags into the header.  You can either do this with the new Open Graph Tags Lite or by manually editing your header_required.php as I've outlined here.  We need these to communicate back with the server about what page is being liked.

Next off we want to create a facebook application ID.  You can do this here.  All you should need to enter is a name for the application.  After you hit continue you should see a screen with the app ID on it.  Make a note of this as you will need it later.

Next you will want to generate out some sample like button code to use as our starting point when we add our buttons.  Thankfully there's an app for this too, you can go here and configure your button to look exactly like you want for it to look.  Once you have the look and feel that you want, hit the "Get Code" button to generate out some sample code.  There will be a little dropdown at the top of the popup that allows you to select the app ID you will be using - make sure it matches up with the new application you created if you have more than one facebook app under your login.

Now that we have our app ID and and some sample code it's time to update our page templates.  Since we're not using a block to add the button to our pages we'll be making edits to the actual page type files.  This will be different in every theme, but first off you want to add the javascript portion and then you want to add the code for the button.

The code for the javascript looks like this and goes right after the opening body tag.  You can really put it wherever you want in the code but right after the body tag is recommended. 

  1. <div id="fb-root"></div>
  2. <script>(function(d, s, id) {
  3. var js, fjs = d.getElementsByTagName(s)[0];
  4. if (d.getElementById(id)) return;
  5. js = d.createElement(s); js.id = id;
  6. js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=330938240306886";
  7. fjs.parentNode.insertBefore(js, fjs);
  8. }(document, 'script', 'facebook-jssdk'));</script>

Next we want to add the actual button.  You want to make sure that it's not too close to the bottom of your page, I did this on one site and the popups generated by the button go past the bottom of the screen so you can't see them - they didn't make the popups location aware so they would toggle to the other side when close to an edge. 

The code to actually output the button looks like this:

  1. <?php
  2. $c = Page::getCurrentPage();
  3. $nh = Loader::helper('navigation');
  4. $like_url = $nh->getLinkToCollection($c, true);?>
  5. <div class="fb-like" data-href="<?php echo $like_url;?>" data-send="true" data-width="450" data-show-faces="false"></div>

The only thing that's different from the code generated out by the customization widget from facebook is that we're setting the URL to the current page's url.  Passing in true as the second argument to the navigation helper means that it will generate out the full URL rather than just a relative URL. 

That's really all the more that there is to it.  Once the code is in place you should have a like button on all the pages that you've edited.  The opengraph tags help keep the data valid as well.

I'm not sure how these pages shown as likes show up on people's profile though.  You can see the list of likes showing how many people have liked a particular item but when I looked back at my profile and what items I'd liked I didn't see the URLs I liked using like buttons.  Actually looking at it closer now I can't even find the list of likes on my profile any more but liking one of the pages with this added showed up on my post stream so I guess it's working the way that it's intended.

There might be easier ways to do this but I don't know of any. 

blog comments powered by Disqus