Social media integration on Web Apps

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Social media integration on Web Apps

Business Catalyst allows you to integrate Facebook and Twitter functionality with your Web Apps. You can add Facebook Like, Facebook Comments, Facebook Send, and Twitter Tweet to your apps.

In order to start adding these social media modules to your Web Apps, you first need to obtain the code for the plugin.

  • For Facebook, follow the steps outlined here.
  • For Twitter, go to  dev.twitter.com/ to obtain the code.

Adding a Facebook Like button

The Facebook Like module will output a Facebook Like button on your Web App pages as shown below:
 

  1. Select Web Apps, and then select your Web App from the list.
  2. Click Edit Web App Settings, and then click the Layouts tab.
  3. From the Toolbox menu, select Social Media > Facebook Like Button
  4. Click Customize.
  5. In the URL to Like field, add one of the below: {tag_itemurl_withhost} or {tag_itemurl_nolink} The {tag_itemurl_withhost} will use the full URL of the module item, for example http://mysite.com/module-url. The {tag_itemurl_nolink} will generate a relative URL for the module, for example /module-url
  6. Customize any additonal options, and then click Insert.
  7. Click Save.

Adding Facebook Comments

The Facebook Comments module will output a Facebook Comments field as shown below:  

  1. Select Web Apps, and then select your Web App from the list.
  2. Click Edit Web App Settings, and then click the Layouts tab.
  3. From the Toolbox menu, select Social Media > Facebook Comments
  4. In the Url to comment on field, add one of the below: {tag_itemurl_withhost} or {tag_itemurl_nolink} The {tag_itemurl_withhost} will use the full URL of the module item, for example http://mysite.com/module-url. The {tag_itemurl_nolink} will generate a relative URL for the module, for example /module-url
  5. Customize any additonal options, and then click Insert.
  6. Click Save.

This will now allow customers to post comments on your Web App content using their own profile including the Facebook profile image. This is not integrated with the admin so moderation is not set from within the admin.

For additional information on Facebook Comments, refer to the  Facebook Comments FAQ .

Moderating Facebook Comments

To allow front end or admin users to moderate comments, you will need to add the below meta tag in your web page or site-wide templates, inside the <head> tag:

1  <meta property="fb:admins" content="FACEBOOK_USER_ID"/>

Where FACEBOOK_USER_ID is the actual ID of the Facebook user account. There are two ways in which you can find a Facebook ID:

  1. The URL of the Facebook account will be similar to - http://www.facebook.com/profile.php?id=100000000000 where the numbers preceding the id= will be the actual ID.
  2. The URL of the Facebook account will be similar to - http://www.facebook.com/username. In this case, you will need to copy the username and then enter the following URL in your web browsers - https://graph.facebook.com/username (replace username with the actual Facebook username). Here you will see the ID of this account. Copy this ID and place it within the above meta tag.

To add multiple moderators, separate the IDs by comma without spaces, e.g:

1 <meta property="fb:admins" content="100000000000,111111111111"/>

Once moderation is enabled, a moderator can go to the comments list and will have moderation options.

Adding a Facebook Send button

The Facebook Send module will output a Facebook Send button as shown below:
 

  1. Select Web Apps, and then select your Web App from the list.
  2. Click Edit Web App Settings, and then click the Layouts tab.
  3. From the Toolbox menu, select Social Media > Facebook Send Button.
  4. Click Customize.
  5. In the URL field, add one of the below: {tag_itemurl_withhost} or {tag_itemurl_nolink} The {tag_itemurl_withhost} will use the full URL of the module item, for example http://mysite.com/module-url. The {tag_itemurl_nolink} will generate a relative URL for the module, for example /module-url
  6. Customize any additonal options, and then click Insert.
  7. Click Save.

Adding a Twitter Tweet button

The first step in adding a Twitter Tweet button to your website is go to  dev.twitter.com/ and obtain the code for it. Then using the File Manager browse to Module Templates > Social Media >TwitterTweet >Default and select the container.html file. Add the code that you copied over from the Twitter website to it and hit Publish.

  1. Select Web Apps, and then select your Web App from the list.
  2. Click Edit Web App Settings, and then click the Layouts tab.
  3. From the Toolbox menu, select Social Media > Tweet This Button..
  4. Click Customize.
  5. In the URL field, add one of the below: {tag_itemurl_withhost} or {tag_itemurl_nolink} The {tag_itemurl_withhost} will use the full URL of the module item, for example http://mysite.com/module-url. The {tag_itemurl_nolink} will generate a relative URL for the module, for example /module-url
  6. Customize any additonal options, and then click Insert.
  7. Click Save.