Adding Facebook "Like" buttons to pages or portal elements (Page Manager)

This article refers to our legacy product, Page Manager. For the best Finalsite experience, we recommend using our newest product, Composer. To find out how to upgrade your site, talk to your Client Success Manager or learn more on our website.

While the Facebook element for Portal pages can include content from your Facebook Wall on your Portal, it will not add a "Like" button. To do that, you'll need to get some code from Facebook. This code is called a "plugin" and it's added to your Finalsite page to add that Facebook functionality to your site. There are actually two kinds of "Like" plugin, so make sure you select the correct one to add to your page - click that link for an explanation of the differences. The short version is that a "Like box" displays content from your Facebook page on your site; a "Like button," on the other hand, does the reverse. Adding a Like button to a page on your site will allow site visitors to create a link to that page from their Facebook page, a link that their Facebook friends will be able to see and click on.

Placing a Like Box on a Portal page 

This is what a "Like Box" looks like on your site; it shows a snippet of content from your organization's Facebook page, and invites users to become fans. To create a Like Box, start at the "Like" Box page on the Facebook Developers site.

You'll need to set the following parameters. As you adjust the settings, the preview pane on the right will update to reflect your edits.

  • Facebook Page URL: the address of your Facebook page. Typically,[yourschool]

  • Width: this should match the available width of your Portal page column, in pixels. The minimum is 292.

  • Height: you can leave this blank if you want the Like Box to vary in height depending on the content shown, or restrict it to a specified height in pixels.

  • Color Scheme: this control gives you the option to switch between blue text on a white background, or light gray text over dark gray. Set it to whichever one best matches with your Portal's color scheme.

  • Show Faces: if selected, the profile pictures of 10 of your site's fans will be displayed in the Like Box. You cannot control which pictures are shown.

  • Border color: Use hexadecimal colors to define the border that's displayed around the Like Box. Note that if both Faces and Stream are hidden, the border will be hidden as well. Don't forget to include the '#' symbol at the beginning of the hex code!

  • Show Stream: Select this checkbox to display the most recent posts to your Facebook wall. Comments will not be displayed.

  • Show header: this checkbox toggles the "Find us on Facebook" text at the top of the Like Box on and off.

When you've got the Like Box configured the way you want it to appear, click on the "Get Code" button, and follow the directions below to add the Like Box to your Portal page.

When you're done, the Facebook Like Box will now appear in an element on your Portal page. By clicking on that button, users will "Like" your Facebook page and will become a "fan" of your organization on Facebook. You can add some text to the Portal element around the Like box as well, if you wish.

Placing a Like Button on a Portal page

Above is an example of a "Like Button." This lets users create link from their own Facebook pages to your website.

As with the Like Box, start at the Facebook Developers page for the Like Button. You'll see a similar tool used to create the various attributes of the Like Button, as well as a live preview pane on the right.

  • URL to Like: Enter the web address of the page that you want users to "Like" or recommend to their Facebook friends.

  • Send Button: You can give Facebook users the option to include a message along with the notification that they have "Liked" this page; that's done with a "Send" button that you can toggle on or off with this control.

  • Layout Style: There are three options here:

    • Standard: displays the "Like" button, along with a message about how many Facebook users have "Liked" the linked page previously ("XX people like this. Be the first of your friends.")

    • button_count: Displays just the Like button (and the Send button, if selected) and a small counter to the right indicating the number of Facebook users who have "Liked" the linked page already.

    • box_count: Similar to "button_count," but slightly larger and in a vertically-oriented format.

  • Width: Sets the horizontal width of the Button on your webpage

  • Show Faces: When selected, the profile pictures of some users who have "Liked" the link page previously will appear; you cannot control whose pictures are shown.

  • Verb to display: Choose between showing a "Like" button and a "Recommend" button.

  • Color Scheme: Set either a white background or a dark gray background for the button plugin.

  • Font: Select the font for the button text and associated message.

As with the Like Box, click on the "Get Code" button and then follow the directions below to add the plugin to your site.

When you're done, visitors to your Portal page will be able to click this button to add an endorsement of a page on your site to their own Facebook Wall.

Note: You don't have to place the "Like Button" in a Portal element - you can add it to a Bottom Banner or directly to the Page Content section of a regular site page in Page Manager. You might want to do this for the landing page of the Admission or Athletics sections of your website, for instance. If you add a Like Button to a Portal page, then users navigating in from Facebook probably will not have the login credentials they'd need to actually see that page.

Placing a Facebook plugin on a Portal page

After setting the parameters for your Like Box or Like Button plugin, click the "Get Code" box. A new window will pop open with two pieces of code.

The first (red arrow) should be pasted into the "Script and Style Code" section of the Page Layout that's used for your Portal page.

To determine the Page Layout:

  1. Go to your Portal page and view it in Page Manager

  2. Scroll down to the "Page Banners and Layout" section, and click "display" to show the detailed view.

  3. The last item on the list shows the currently selected Page Layout.

  4. Open up the Site Manager menu, and click "Page Layouts" in the Design section

  5. Navigate to the Layout identified in step 3.

  6. Scroll down to the "Script and Style Code" section, and paste the Facebook code in there. You might see other code already pasted into this section; that's fine. Just scroll to the end and hit "Enter" a few times to add some whitespace, and paste the Facebook code in at the end (this will help other users, and Support, to identify what's been pasted in there if that ever becomes necessary later on).

This code captures all of the information that Facebook will need to correctly process what should happen when a site visitor clicks the Like Box on your site. The next step is to add the code that will actually create the graphic and the link for the Facebook plugin (blue arrow) to your site. (The instructions below demonstrate how to add a "Like" plugin to an element on a Portal page, but again, a plugin could also be added to Banner element or to a regular Site Page instead - this would probably be preferred for a Like Button, as you would want users to endorse a page that is not limited only to members of a certain role but rather a page that is publicly accessible to any visitor coming in from Facebook.)

  1. Go back to your Portal page.

  2. Create a new Content element, and place it on your page in the location where you want the Facebook plugin to appear.

  3. Edit the Content element, and click the "HTML" button to open the HTML code editor.

  4. Paste the 2nd piece of code you got from the Facebook plugin page into the HTML editor.

Like Buttons vs. Like Boxes

Although they look and sound similar, there's a key difference between Facebook Like Boxes and Like Buttons. One is used to generate traffic to your school's website; the other is used to generate "fans" for your school's Facebook page.

Let's say your school has a page on Facebook. You can put a "Like Box" plugin on a Portal page on your site, which will connect to your school's Facebook page. When another Facebook user visits the Portal and clicks the "Like" button you put there, then you've gained that user as a "fan" of your Facebook page. Hooray! More fans means more exposure and a wider audience for the content that you post to Facebook - now, when you update your Facebook page with new content, that user (and all of your other fans) will see your post appear on their own Facebook "Wall." Your Facebook fans can make comments on each post you make, and see comments from others.

But hold on, because there's another kind of "Like" option you could implement. This one, called the "Like Button" plugin, is also a blue 'thumbs-up' icon that you post on your school's website but it serves a slightly different function. Visitors who view your site can click that button, and a little note will appear on their own Facebook Wall - "So and so likes Finalsite Academy" - with a link back to your website and a shortened snippet of the content from the page that they "Liked." This is essentially a one-time vote or endorsement; it's a way for that user to indicate that they visited your site and they want to tell their Facebook friends about it. But that's all - they won't receive any notice when you update the page that they Liked, and that user won't become a "fan" of your school's Facebook page.

Was this article helpful?
5 out of 6 found this helpful



Please Sign in to leave a comment if you don't see the comment box below.