Adding Twitter and YouTube Results
To add Twitter and Youtube results to the page, you must follow five steps.
1. Get the platform authentication keys
To get Twitter oAuth keys visit the Twitter dev site for Single User OAuth tokens. To get a Youtube API key visit the Google Developers Console, register an application and generate keys.
2. Add the dependencies of the YouTube and Twitter platform.
Add the following dependencies to the /pom.xml file at the root of your project
<dependency>
<groupId>twigkit</groupId>
<artifactId>twigkit.youtube</artifactId>
<version>${project.parent.version}</version>
<exclusions>
<exclusion>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>twigkit</groupId>
<artifactId>twigkit.twitter</artifactId>
<version>${project.parent.version}</version>
</dependency>If you are running a local server, then you must restart. Restarting the app-studio script pulls down any new library dependencies.
3. Add configuration files
Because both the Youtube and Twitter platforms take various oAuth and API keys, it is advised to keep these in centralized configuration files. Create these files:
src/main/resources/conf/platforms/twitter.conf
name: twigkit.search.twitter.Twitter
oAuthConsumerKey: XXXXXXXXXX
oAuthConsumerSecret: XXXXXXXXXX
oAuthAccessToken: XXXXXXXXXX
oAuthAccessSecret: XXXXXXXXXXsrc/main/resources/conf/platforms/youtube.conf
name: twigkit.web.youtube.YouTube
apiKey: XXXXXXXXXX
channelId: XXXXXXXXXX4. Configure platform, query and response in your View
Next configure a platform, query, and response at the top of the page, as you would do with a standard search. You can copy/paste the below:
<!-- YouTube -->
<search:platform var="youtubePlatform" conf="platforms.fusion.youtube"></search:platform>
<search:query var="youtubeQuery" parameters="*" results-per-page="12"></search:query>
<search:response var="youtubeResponse" platform="youtubePlatform" query="youtubeQuery"></search:response>
<!-- Twitter -->
<search:platform var="twitterPlatform" conf="platforms.fusion.twitter"></search:platform>
<search:query var="twitterQuery" parameters="*" results-per-page="12"></search:query>
<search:response var="twitterResponse" platform="twitterPlatform" query="twitterQuery"></search:response>You can adjust the results-per-page to taste based on the number of results you want.
Currently both queries are set to search based on the current query (parameters="*"). Set this to an empty string to return just the latest videos/tweets accordingly.
5. Show results on the page
Add the following code to the same page where the platform, query and response were defined in the previous step:
<!-- YouTube results -->
<search:result-list response="youtubeResponse">
<search:result>
<search:field name="snippet.title" styling="title"></search:field>
<iframe width="400" height="300" id="player" ng-src="{{'https://www.youtube.com/embed/' + result.id }}" frameborder="0" ></iframe>
</search:result>
</search:result-list>
<!-- Twitter results -->
<search:result-list response="twitterResponse">
<search:result>
<search:field name="text" styling="title"></search:field>
<search:field name="user.screen_name" styling="description"></search:field>
</search:result>
</search:result-list>If embedding a YouTube video player like in the above example, you must also add the YouTube domain as a trusted site. To do this, add the following code to the /src/main/webapp/search/app/app.js file after the controller definitions:
.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.youtube.com/embed/**']);
});After adding the above block, the entire /src/main/webapp/search/app/app.js file should look similar to the following:
'use strict';
const BUILD_PATH = '/dist/';
const basePath = (document.getElementsByTagName('base')[0] || {href: ''}).href;
__webpack_public_path__ = window.__webpack_public_path__ = basePath.replace(/\/$/, '') + BUILD_PATH;
import '../../styles/twigkit.less';
import {RoutesModule} from './routes/routes.module.js';
import {SearchController} from './controllers/search.controller';
import {LoginController} from "./controllers/login.controller";
import {ServicesModule} from "./services/services.module";
import {DirectivesModule} from "./directives/directives.module.js";
let appModule = angular
.module('appStudioSearch', [
, 'ui.router'
, 'ngAnimate'
, 'lightning'
, RoutesModule.name
, DirectivesModule.name
, ServicesModule.name
])
.run(['$rootScope', '$window', '$twigkit', '$location', function ($rootScope, $window, $twigkit, $location ) {
$rootScope.$on('response_response_error', function (response) {
$rootScope.showErrorModal = true;
});
$rootScope.closeErrorModal = function () {
$rootScope.showErrorModal = false;
}
$rootScope.$on('httpInterceptorError', function (event, error) {
/**
* The tests here must match the tests in
* twigkit.security.springsecurity.matchers.NonAjaxRequestMatcher::matches
*/
if ((error.status == '401' || error.status == '403') &&
(error.config.url.indexOf('twigkit/api') !== -1 ||
error.config.url.indexOf('twigkit/services') !== -1 ||
error.config.url.indexOf('twigkit/secure/services') !== -1 ||
error.config.url.indexOf('views/') !== -1
)) {
// Error was a 403 and URL was a non-user facing path - redirect to login
$rootScope.$broadcast('twigkitApi403', { error: error, url: $location.url() });
var loginPath = $twigkit.getContextPath('/') + $twigkit.getConstant('loginPage', 'login/');
// If we are already on the login page, do not redirect
if ($window.location.pathname !== loginPath ) {
$window.location.href = loginPath;
}
}
});
}])
.controller('searchCtrl', SearchController)
.controller('loginCtrl', LoginController)
.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.youtube.com/embed/**']);
});
angular.bootstrap(document, ['appStudioSearch']);