The Facebook Like button is perhaps the most iconic instrument of social networking. You can add a Like button easily to your Caspio apps and drive traffic to your site and directly to individual details pages in your apps.

There are two ways to implement a Facebook Like button:

  • Iframe
  • XFBML – Facebook XML

The iframe format can be used to Like individual details pages. With the XFBML implementation you can also add meta data including a thumbnail image to further customize your apps “identity” on Facebook.

This article takes you through both implementations.

Steps to add an iframe Like button to search pages and Forms:

In this section, you add an iframe Like button to the search pages and forms.

1. Customize the iframe object

  • First, customize the following iframe object or have Facebook an iframe object for you. Facebook has a tool to generate an iframe Like button object automatically:

http://developers.facebook.com/docs/reference/plugins/like
Alternatively you can customize the following object:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2FURL&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
  • Replace “URL” with the webpage URL that is hosting your DataPage. Do not include the protocol because it is already included (http://). Example: www.sitename.com

Note: Be sure to replace all slashes (/) with “%2F”. For example: www.sitename.com/sales/index.html becomes www.sitename.com%2Fsales%2Findex.html. Spaces should be replaced with plus signs (+). If you have trouble, you can use an online URL decoder.

2. Include the link in the DataPage footer

  • Open the DataPage wizard by selecting your DataPage and clicking Edit. Proceed to the Configure Fields screen. Using the Insert button at the lower-right hand corner of the DataPage Elements panel, insert Header and Footer elements into your DataPage.
    Add_a_facebook_like_button_to_your_DataPage_1
  • Copy and paste the iframe object into your DataPage footer.
  • Click Finish to save your DataPage.

The Like button is now available for your users. Test your Like button by clicking Like and then going to your Facebook page and clicking the post that appears in your profile.

Add an iframe Like button to details pages

You can add a Like button on the details page of your Report DataPages. This allows users to Like specific records. This can be useful, especially if your records represent specific products, articles, or services. Best of all, when new records are added, the Like button is included and immediately available to your end-users.

This method requires an understanding of query string parameters and using pre-defined criteria in a Report. Your base table must include a unique ID field such as an AutoNumber. If you do not have an AutoNumber field you can add one at any time in the table design view.

Add_a_facebook_like_button_to_your_DataPage_2

You will also need to create a webpage to host a new Details Report. When a user clicks Like, other Facebook users will soon click on the “I Like This” post. These Facebook users will be directed to a special webpage with an embedded Details Report which will display the details of the originally “Liked” record.

Note: To use this technique you must not add Open Graph meta data to your web page.

Steps to add an iframe Like button to details pages:

1. Create a Details Report

  1. First, create a Details Report. Navigate to the DataPages listing in an app and click New DataPage. Select the Reports type DataPage option and choose Details.
  2. On the DataPage DataSource screen, select your data source, style and localization. Be sure to enable advanced options and parameters.
  3. On the Search Type screen, select Filter data based on your pre-defined criteria. Check Allow parameters in search criteria and choose the Bridge and External Parameters radio button.
  4. On the Select Filtering Fields screen, move your unique ID field to the right hand panel.
  5. Now you must include your Unique ID field and configure it to receive the parameter from the Like button link. On the Configure Filtering Fields screen, click the Advanced Tab. Select External Parameter from the On load dropdown and enter the parameter name. Also select If empty, match all records. This will avoid the “no records found” message in the event that no parameter is received.

 

Add_a_facebook_like_button_to_your_DataPage_3

 

Add_a_facebook_like_button_to_your_DataPage_4

6. Now you can format your details page as normal. Click Finish to save your DataPage.

7. Deploy the Details Report using the embedded method and note the URL of the host webpage. Remember that this webpage might be the first-contact page for Facebook users. Be sure to include navigation options to easily access other areas of your site.

2. Create or customize an iframe object:

  • To create an iframe object use Facebook’s Like button generator:

http://developers.facebook.com/docs/reference/plugins/like

  • Type in the URL that is hosting your Details Report. Add a demo query string to the end of the URL. For example: www.yoursite.com?Unique_ID=AAAAA. Unique ID should be replaced with the parameter name from step 1. AAAAA is used because it will be easy for you to see and replace once the iframe object has been pasted into your DataPage footer.

You can also customize the following sample:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2FURL%3FUniqueID%3D[@field:UniqueID]&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
  • Replace the URL with the URL of your destination page (where the Details Report is hosted). Be sure to replace all slashes (/) with %2F and replace all spaces with plus signs (+).
  • Replace UniqueID with the field name of your AutoNumber or unique ID field.

3. Paste the iframe into your DataPage footer

Open the DataPage wizard for your original Report. Make sure that advanced options and Parameters are enabled. Proceed to the Configure Details Page Fields screen. Using the Insert button below the bottom right corner of the DataPage Elements panel add header and footer sections. Paste the iframe object into the footer of the DataPage.

4. Replace the parameter in the URL

If you are using a Facebook generated iframe object, use the HTML panel’s Insert button at the bottom right to replace AAAAA with the parameter for your unique ID field. Make sure that the parameter is in string format. Click Finish to save your DataPage.

Now the Like button is available to your users. Test the Like button by clicking on Like and following the link that is generated in your Facebook profile. The link should direct you to the new webpage and display the details of the record that was “Liked”.

The XFBML Like button

The XFBML Like button has some additional features that allow you to customize your apps “identity” on Facebook. One disadvantage of the XFBML Like button is that you will not be able to link directly to individual details pages.

 

Steps to creating a XFBML Like button:

1. Register your site with Facebook.

To create a XFBML Like button you will need to register your site with Facebook: http://developers.facebook.com/setup/. Facebook will give you an app id that can be used to load Facebook’s JavaScript SDK.

2. Add the JavaScript SDK to your DataPage

Open the DataPage wizard and proceed to a Configure Fields screen. Insert header and footer sections. Copy and paste the following code into your DataPage footer:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'http://connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like></fb:like>

Replace the “your app id” text with the app id you received from registering you site with Facebook. Press finish to save your DataPage. The Like button is now available for your end users.

3. Add additional metadata to your webpage

By default this button will use your webpage URL and Title tag to create “I Like This” posts. To take full advantage of the XFBML Like button you will need to add additional meta data to your webpage. Facebook uses the Open Graph protocol to add data about the topic of your webpage. Fill in the content attribute of each of these six meta tags. Then include them in your webpage’s head section. You will need to repeat this process for each webpage that has a Like button.

<meta property="og:title" content=" "/>
<meta property="og:type" content=" "/>
<meta property="og:image" content=" "/>
<meta property="og:url" content=" "/>
<meta property="og:site_name" content=" "/>
<meta property="og:admins" content=" "/>
  1. Title refers to what is actually being liked. This is likely either the name or function of your DataPage.
  2. Type determines how your site should be grouped with other Likes. Are you promoting an activity, an organization, a place? A full list of types is available on Facebook’s documentation site.
  3. Image is a static URL of an image that represents your site. The image must be at least 50 x 50 pixels and should be hosted on your web server.
  4. URL is the address that Facebook users will be directed when they click on the “I Like This” link.
  5. Site_name is a human readable name for your entire website.
  6. Admins is a list of Facebook ID’s of the people considered administrators of your site. Each Facebook ID should be separated by commas.

More information about the Open Graph API is available on Facebook’s documentation site.

Once the meta data has been added your web pages you can test the XFBML Like button by clicking Like on a page and leaving a comment. You can see the post that is created in your Facebook page includes a thumbnail image.

Note Please note: This article references external HTML codes, JavaScript, or third-party solutions which are not built-in features of Caspio Bridge, and as such are provided “as is” without any warranties, support or guarantees. These tips are provided as samples to assist you in the customization of your applications, and you will need a basic understanding of these languages in order to implement successfully.