PT Social Media Version 1.0 Install

Back to PT Social Media

IMPORTANT: ADF 1.5 or greater is REQUIRED for this application.

Download

Download the Social Media Application from the Community Site Project or from the SVN Repository.

Extract the zip files into the following directory: /ADF/apps/pt_social_media/

Site Configuration

The Social Media Application is built within the ADF. The ADF 1.5 or greater must be installed in the site to run the Social Media Application, follow the ADF Installation instructions.

Make sure the ADF is setup and running on the site. If the ADF is not setup, then follow the instructions for ADF Installation.
Open the sites 'ADF.cfc' (See Site Configuration (ADF.cfc) for more info) file (located in your site's /_cs_apps/ directory) in a text editor. Locate the Load the ADF Application into application space comment in the file. Add (or uncomment) the following command under the comment section:

loadApp("ptSocialMedia");

Reset the ADF for the server and site.

Styles

There are several out of the box style options for the Social Media application. Most of the styles are defined in the following style sheets located in the /style directory within the ADF Social Media App directory:

/ADF/apps/pt_social_media/style/socialmedia.css

You have two options: you can either load them into your Base Plus One (recommended) or your can load them into the Social Media Template you create.

Note: the classes and styles defined for the Social Media app are targeted tightly for the layout generated by the Social Media application and should not interfere with your site styles. However, it is a good idea to give these styles sheets higher precedence in your style definitions.

Import Custom Elements

The Social Media App has several Custom Components defined within CommonSpot. These components are available in the Social Media's "exported-objects" folder located at the root of the Social Media application directory (e.g. /ADF/apps/pt_social_media/exported-objects/)

To import these objects, you will need to be an administrator for your site.

Create a "PT Social Media Elements" category and import all portions of each component in the order listed.

Import Custom Elements:

SocialMedia Selector (SocialMedia-Selector-Custom-Element.zip)
Facebook Pages (Facebook-Pages-Custom-Element.zip)
Twitter Accounts Keywords (Twitter-Accounts-Keywords-Selector-Custom-Element.zip)
WordPress Blogs (WordPress-Blogs-Custom-Element.zip)
YouTube Channels (YouTube-Channels-Custom-Element.zip)
ptSocialMedia Configuration (ptSocialMedia-Configuration-Custom-Element.zip)

Verify Imports

The imported components' render handlers and custom field types must be verified. During the import process, the render handler and custom field types paths may have been changed to reflect the current site's path.

Review and update these paths to reference the ADF path. In most cases, this will just require to be unlocked and a change in the path from the site name to 'ADF'. Check the paths for the custom field types that were imported with the custom elements by unlocking them and fixing the explicit paths to point to "/ADF/extensions/".

If the custom elements that are imported contain custom field types that are already in the site, the naming convention for the custom field type will be unique. To resolve this, unlock the field types and elements, and reassign the element field type to the pre-existing field type.

Example: The SocialMedia Selector custom element contains two uses of the General Chooser field type, if the General Chooser field type is already installed on the site then the import process will attempt to import another General Chooser but with a new name such as "General Chooser_import_1250003208472." To resolve this issue, open the custom element and assign the field type (General Chooser_import_1250003208472) to the field type with the simple name General Chooser. After reassigning the field type, delete the new imported field from the list of custom field types.

App Configuration

The Social Media App uses a custom element to store site specific configurations.

Most of these configuration fields will not need to be modified from their default values. Although, there are a few fields that the values will need to be customized for your specific install of the application. These fields are be listed below.

There are several configuration fields:

General Config Tab

ui_theme - The Social Media app utilizes jQueryUI Themes for styling of buttons, etc. There are some pre-installed themes that come with the ADF in the Thirdparty folder.

Facebook API Tab

apiFacebookAppID - The App ID you receive when you register your App on Facebook
apiFacebookAPIKey - The API Key you receive when you register your App on Facebook
apiFacebookAppSecret - The App Secret you receive when you register your App on Facebook

- Facebook App Registration Instructions

WordPress API Tab

wordPressServiceURL - URL of Blog Index page
wordPressServiceImage - A service image for Blog Index page
apiWordPressFeedSuffix - Suffix for the WordPress Blog RSS feed. ie. '?feed=rss2' or '/feed/' depending how your WordPress site is configured
apiWordPressContentWordLimit - Maximum number of words rendered from the blog post content. Default: 100. Use 0 (zero) to display all.

Note: The other API fields in the configuration element (not listed here) should NOT need to be modified from their default values unless one of the social media services changes their data feed format or feed URL and/or URL parameters.

Subsites

A specific subsite for social media pages is optional. The Social Media Feed page which in most cases will be a public facing page (or pages) can live anywhere on your site. But for this install we will create a socialmedia subsite for this page.

It is highly recommended to have a Web Admin subsite that contains a Social Media subsite that will contain the Management pages for for administrators. This allows security to be setup for the subsite to allow only administrators access for the webadmin subsite.

Your site may already have a webadmin subsite. The steps under 'Web Admin will add a socialmedia subsite into the webadmin subsite.

Social Media

Create a new subsite under the site root called socialmedia.

Web Admin

Create a new subsite under the site root called webadmin.
Create a new subsite under webadmin called socialmedia.
Configure the /webadmin/socialmedia/ subsite Content Security to give 'No Rights' to 'Anonymous Users' and 'Authenticated Users'.
Configure the /webadmin/socialmedia/ subsite Content Security to give permissions to the group of administrators who will manage the Forums.

Templates

Social Media Template - Optional

The Social Media template will be used to render Social Media pages.

Note: A Social Media templates are not critical for this application. A Social Media feeds page can be added to any page based on any template with a large main content column.

Create a CommonSpot page called 'Social Media' from the Base Plus One template. (The subsite for this is not critical but it may be a good idea to create a subsite called 'socialmedia').
Submit and activate the page.
Save the page as a template.
Submit the template for public use.

Web Admin Template - Optional

The Web Admin template will be used to render web admin management pages.

Create a CommonSpot page called 'Web Admin' from the Base Plus One template. (The subsite for this is not critical but it may be a good idea to create a subsite called webadmin).
Submit and activate the page.
Save the page as a template.
Submit the template for public use.

Admin Pages

Create these 3 Admin pages:

CCAPI Configuration
Manage App Configuration Page
Manage Service Accounts Page with Multiple Datasheets

You may also want to create this optional page for service feed debugging:

Social Media Stream Debug Page

CCAPI Configuration

The Social Media Application uses the ADF CCAPI to populate each of the social media service custom element records with moderation data. The CCAPI needs to be configured for the site and forums application.

First, follow the steps to set up the CCAPI Config file for the site. Once that configuration is complete, follow the steps below to set up the CCAPI config for the Photo Gallery application. Make sure to update the wsVars section with the correct URLs and username/password.

Create a new page called 'ccapiSocialMedia'. Recommend creating this page in the /webadmin/socialmedia/ subsite.
Add each of the following Forums elements to the page:

For each element that was added, click on the element indicator and go to 'more...'. Select 'Name' from the menu.
In the Element Name field, enter the appropriate name for each element:
1. ccapiFacebookPages
2. ccapiTwitterAccountsKeywords
3. ccapiWordPressBlogs
4. ccapiYouTubeChannels

Publish this page and view in read mode.
Edit the 'ccapi.cfm' file for the site and add the following xml blocks into the <elements> section:
1. an example 'ccapi.cfm' file is in the pt_social_media > site-files > _cs_apps > config folder

<FacebookPages>
  <pageID>#####</pageID>
  <subsiteID>##</subsiteID>
  <elementType>custom</elementType>
  <controlName>ccapiFacebookPages</controlName>
</FacebookPages>
<TwitterAccountsKeywords>
  <pageID>#####</pageID>
  <subsiteID>##</subsiteID>
  <elementType>custom</elementType>
  <controlName>ccapiTwitterAccountsKeywords</controlName>
</TwitterAccountsKeywords>
<WordPressBlogs>
  <pageID>#####</pageID>
  <subsiteID>##</subsiteID>
  <elementType>custom</elementType>
  <controlName>ccapiWordPressBlogs</controlName>
</WordPressBlogs>
<YouTubeChannels>
  <pageID>#####</pageID>
  <subsiteID>##</subsiteID>
  <elementType>custom</elementType>
  <controlName>ccapiYouTubeChannels</controlName>
</YouTubeChannels>

To populate the <pageID> and <subsiteID> tags, view the 'source' code for the 'ccapiSocialMedia' page that was just created.

Identify the following line in the source code and enter this numeric value into the <subsiteID> tag:

     var jsSubSiteID = ##;

Identify the following line in the source code and enter this numeric value into the <pageID> tag:

     var jsPageID = ####;

Manage App Configuration Page

The Social Media Configuration Page will be used to manage the ptSocialMedia Configuration custom element. Follow these steps to configure the datasheet and page for adding the configuration settings.

Create a new page called 'Configuration Manager' in the /webadmin/socialmedia/ subsite.
In the main content of the page, add a Custom Script element.
Enter the explicit module path for:
- /ADF/apps/pt_social_media/customcf/manage_configuration_header.cfm
Publish the page.

Create Social Media Configuration Record

We are creating a single Social Media Configuration element record to be used within the application.

Click the Add Configuration button
Submit the form to create a configuration record.

Doing this will save the default field values in the configuration record of the custom element.

You can also update the following fields:

General Config Tab
1. ui_theme
Facebook API Tab
1. apiFacebookAppID
2. apiFacebookAPIKey
3. apiFacebookAppSecret
WordPress API Tab
1. wordPressServiceURL
2. wordPressServiceImage
3. apiWordPressFeedSuffix
4. apiWordPressContentWordLimit

See the App Configuration portion of this page for more information on the fields and the correct values.

Reset the ADF for the server and site.

Manage Social Media Page with Multiple Datasheets

The Manage Social Media page is a page that contains the data management datasheets for the four social media custom elements. This page is build using a tabbed interface with one tab for each social media service datasheet.

Create a page from the Base Plus One (or a Web Admin) template titled 'Manage Social Media' with the page name 'index' in the /webadmin/socialmedia/ subsite.
In the main content area of the page, add a Custom Script element.
From the Custom Script element interface, click the "Edit" icon.
Enter the following text into the Explicit Module path:
- /ADF/apps/pt_social_media/customcf/manage_social_media_tabs.cfm

Facebook Tab

Click on the Facebook tab
1. From the Facebook tab's the Custom Script element interface, click the "Edit" icon.
2. Enter the following text into the Explicit Module path:
  - /ADF/apps/pt_social_media/customcf/manage_facebook_pages_header.cfm
From the Datasheet element interface, click the "Datasheet" icon.
From the "Datasheet Views" dialog, click the "Add Datasheet View" link.
Enter the following information and then click "Next":
1. Name: Facebook Pages View
2. Private: unchecked
3. Default View: checked
4. Description: View to manage the all Facebook Pages
5. Datasheet Source: Form Result/Custom Element Sheet
6. Click "Next"
From the Datasheet Source dialog choose the "Facebook Pages" custom element and click "Next"
From the Datasheet Columns Dialog select the columns UNIQUEID, FBPAGENAME, FBPAGELINK and FEEDACTIVE from the Available Columns list and move them to the Selected Columns list and then click "Finish" or "Save".
You will be brought to the Datasheet View page; click "Close" to return to your page.
You will see the datasheet element on this page now. Click the Datasheet element interface icon again and this time choose "Edit Columns".
Within the Datasheet View Column Properties dialog choose the UNIQUEID column and click "edit":
1. In the Render Handler field, select the 'Change' button. Enter the following value into the Explicit Module text box:
  - /ADF/extensions/datasheet-modules/1.0/edit-delete.cfm
2. Click Finish or Save.
3. In the Header field, switch the text to 'Edit/Delete'
4. Click Finish or Save
Now within the Datasheet View Column Properties dialog choose the FEEDACTIVE column and click "edit":
1. In the Render Handler field, select the 'Change' button. Enter the following value into the Explicit Module text box:
  - /ADF/extensions/datasheet-modules/1.0/value-to-yes-no.cfm
2. Click Finish or Save
3. In the Header field, switch the text to 'Active'
4. Click Finish
Close the Edit Column window.
Go back to the Datasheet element interface, select the Layout button
1. Default Sorting = FBPAGENAME Ascending
2. Uncheck "Show Alphabet Characters for Filtering"
3. Uncheck "Allow JavaScript data sorting"
4. Click Save

Twitter Tab

Click on the Twitter tab
1. From the Twitter Tab's the Custom Script element interface, click the "Edit" icon.
2. Enter the following text into the Explicit Module path:
  - /ADF/apps/pt_social_media/customcf/manage_twitter_accounts_keywords_header.cfm
From the Datasheet element interface, click the "Datasheet" icon.
From the "Datasheet Views" dialog, click the "Add Datasheet View" link.
Enter the following information and then click "Next":
1. Name: Twitter Accounts and Keywords View
2. Private: unchecked
3. Default View: checked
4. Description: View to manage the all Twitter Accounts and Keywords
5. Datasheet Source: Form Result/Custom Element Sheet
6. Click "Next"
From the Datasheet Source dialog choose the "Twitter Accounts Keywords" custom element and click "Next"
From the Datasheet Columns Dialog select the columns UNIQUEID, TWITTERACCOUNTKEYWORD, TYPE and FEEDACTIVE from the Available Columns list and move them to the Selected Columns list and then click "Finish" or "Save".
You will be brought to the Datasheet View page; click "Close" to return to your page.
You will see the datasheet element on this page now. Click the Datasheet element interface icon again and this time choose "Edit Columns".
Within the Datasheet View Column Properties dialog choose the UNIQUEID column and click "edit":
1. In the Render Handler field, select the 'Change' button. Enter the following value into the Explicit Module text box:
  - /ADF/extensions/datasheet-modules/1.0/edit-delete.cfm
2. Click Finish or Save.
3. In the Header field, switch the text to 'Edit/Delete'
4. Click Finish or Save
Now within the Datasheet View Column Properties dialog choose the FEEDACTIVE column and click "edit":
1. In the Render Handler field, select the 'Change' button. Enter the following value into the Explicit Module text box:
  - /ADF/extensions/datasheet-modules/1.0/value-to-yes-no.cfm
2. Click Finish or Save
3. In the Header field, switch the text to 'Active'
4. Click Finish
Close the Edit Column window.
Go back to the Datasheet element interface, select the Layout button
1. Default Sorting = TwitterAccountKeyword Ascending
2. Uncheck "Show Alphabet Characters for Filtering"
3. Uncheck "Allow JavaScript data sorting"
4. Click Save

YouTube Tab

Click on the YouTube tab
1. From the YouTube tab's the Custom Script element interface, click the "Edit" icon.
2. Enter the following text into the Explicit Module path:
  - /ADF/apps/pt_social_media/customcf/manage_yourtube_channels_header.cfm
From the Datasheet element interface, click the "Datasheet" icon.
From the "Datasheet Views" dialog, click the "Add Datasheet View" link.
Enter the following information and then click "Next":
1. Name: YouTube Channels View
2. Private: unchecked
3. Default View: checked
4. Description: View to manage the all YouTube Channels
5. Datasheet Source: Form Result/Custom Element Sheet
6. Click "Next"
From the Datasheet Source dialog choose the "YouTube Channels" custom element and click "Next"
From the Datasheet Columns Dialog select the columns UNIQUEID, CHANNELTITLE, CHANNELUSERNAME and FEEDACTIVE from the Available Columns list and move them to the Selected Columns list and then click "Finish" or "Save".
You will be brought to the Datasheet View page; click "Close" to return to your page.
You will see the datasheet element on this page now. Click the Datasheet element interface icon again and this time choose "Edit Columns".
Within the Datasheet View Column Properties dialog choose the UNIQUEID column and click "edit":
1. In the Render Handler field, select the 'Change' button. Enter the following value into the Explicit Module text box:
  - /ADF/extensions/datasheet-modules/1.0/edit-delete.cfm
2. Click Finish or Save.
3. In the Header field, switch the text to 'Edit/Delete'
4. Click Finish or Save
Now within the Datasheet View Column Properties dialog choose the FEEDACTIVE column and click "edit":
1. In the Render Handler field, select the 'Change' button. Enter the following value into the Explicit Module text box:
  - /ADF/extensions/datasheet-modules/1.0/value-to-yes-no.cfm
2. Click Finish or Save
3. In the Header field, switch the text to 'Active'
4. Click Finish
Close the Edit Column window.
Go back to the Datasheet element interface, select the Layout button
1. Default Sorting = CHANNELTITLE Ascending
2. Uncheck "Show Alphabet Characters for Filtering"
3. Uncheck "Allow JavaScript data sorting"
4. Click Save

WordPress Tab

Click on the WordPress tab
1. From the WordPress tab's the Custom Script element interface, click the "Edit" icon.
2. Enter the following text into the Explicit Module path:
  - /ADF/apps/pt_social_media/customcf/manage_wordpress_blogs_header.cfm
From the Datasheet element interface, click the "Datasheet" icon.
From the "Datasheet Views" dialog, click the "Add Datasheet View" link.
Enter the following information and then click "Next":
1. Name: WordPress Blogs View
2. Private: unchecked
3. Default View: checked
4. Description: View to manage the all WordPress Blogs
5. Datasheet Source: Form Result/Custom Element Sheet
6. Click "Next"
From the Datasheet Source dialog choose the "WordPress Blogs" custom element and click "Next"
From the Datasheet Columns Dialog select the columns UNIQUEID, BLOGTITLE and FEEDACTIVE from the Available Columns list and move them to the Selected Columns list and then click "Finish" or "Save".
You will be brought to the Datasheet View page; click "Close" to return to your page.
You will see the datasheet element on this page now. Click the Datasheet element interface icon again and this time choose "Edit Columns".
Within the Datasheet View Column Properties dialog choose the UNIQUEID column and click "edit":
1. In the Render Handler field, select the 'Change' button. Enter the following value into the Explicit Module text box:
  - /ADF/extensions/datasheet-modules/1.0/edit-delete.cfm
2. Click Finish or Save.
3. In the Header field, switch the text to 'Edit/Delete'
4. Click Finish or Save
Now within the Datasheet View Column Properties dialog choose the FEEDACTIVE column and click "edit":
1. In the Render Handler field, select the 'Change' button. Enter the following value into the Explicit Module text box:
  - /ADF/extensions/datasheet-modules/1.0/value-to-yes-no.cfm
2. Click Finish or Save
3. In the Header field, switch the text to 'Active'
4. Click Finish
Close the Edit Column window.
Go back to the Datasheet element interface, select the Layout button
1. Default Sorting = BLOGTITLE Ascending
2. Uncheck "Show Alphabet Characters for Filtering"
3. Uncheck "Allow JavaScript data sorting"
4. Click Save

Publish this page.

Social Media Stream Debug Page - Optional

Since the content for this page is primarily under the control of each of the Social Media Services you are receiving the posts from it maybe necessary to have deeper visualization into the raw data coming from these services.

This page is a version of the Social Media Stream Page with a debug tools header custom script. It may be best to go through the steps to create and configure a standard Social Media Stream page before creating this debugging page.

Social Media Stream Page
Configure the Social Media Stream Page section on the Getting Started page

It is also highly recommended that this debugging stream page be built in the Social Media Web Admin subsite so it will be protected by the Web Admin security settings.

To construct your Social Media Debugging Stream page complete the following steps:

Create a CommonSpot page with a name of 'Social Media Debug' and a title of 'Social Media Debug' using the Social Media template and place it in the '/webadmin/socialmedia/' subsite.
In the main content of the page, add a Custom Script element.
Enter the explicit module path for:
- /ADF/apps/pt_social_media/customcf/sm_debug_links.cfm
Place the SocialMedia Selector Custom Element on this page.
From the SocialMedia Selector element click More in the element interface.
Click the Custom Render Handlers menu option, and choose the Default or the Social Media Combined Stream Render Handler.
Submit the Page.

Usage

Once the page has been created and configured to display posts from the selected Social Media services you can use the debug tools checkboxes to select different raw data dump combinations and then click the link to reload the page.

When the page is fully reloaded, there will be Coldfusion data dumps visible above the posts that will display the raw data that is used to build the stream page.

If Social Media errors have occurred for the various services, links will be generated to allow access to open the error log files from the CommonSpot logs folder.

Social Media Stream Pages

For this install we will only create one main social media stream page. But many pages can be created throughout your site to meet your specific needs using this same method. For example, a separate page could be created for each of the social media services (ie. YouTube Channels page) or pages could be created for specific social media accounts.

The Social Media Stream Page is where the social media posts from the selected social media service pages, accounts and keywords display. These posts come from the live data feeds available from each service. The posts are not stored locally and with active social media account will possibly change with each page refresh.

To construct your Social Media Stream page complete the following steps. (Remember these steps can be adapted to a page created in any subsite using any template that has a large content area column.)

Create a CommonSpot page with a name of 'index' and a title of 'Social Media Stream' using the Social Media template and place it in the 'socialmedia' subsite.
Place the SocialMedia Selector Custom Element on this page.
From the SocialMedia Selector element click More in the element interface.
Click the Custom Render Handlers menu option, and choose the Default or the Social Media Combined Stream Render Handler.
Submit the Page.

Go to the Configure the Social Media Stream Page section on the Getting Started page for more info.

Reset the ADF

Reset the ADF for the server and site.

PT Social Media Version 1.0 Install

Contents

Download

Site Configuration

Styles

Import Custom Elements

Verify Imports

App Configuration

General Config Tab

Facebook API Tab

WordPress API Tab

Subsites

Social Media

Web Admin

Templates

Social Media Template - Optional

Web Admin Template - Optional

Admin Pages

CCAPI Configuration

Manage App Configuration Page

Manage Social Media Page with Multiple Datasheets

Social Media Stream Debug Page - Optional

Social Media Stream Pages

Reset the ADF

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Community

About the Framework

Using the ADF

Projects

About the Wiki

Tools