If you’re wanting to suggest social media content items on pages from non-social web collections, all components would need to be part of a meta collection and have recommendations enabled.
The seed item in your example would be the page you want the recommendations to be about (e.g. a course, or an event), and you’d want to set the scope parameter on your call to the recommender to be twitter, facebook, youtube or a comma-separated combination thereof.
The demonstration recommender collection at Showcase: Recommender was built using a single web collection, so it was only deriving recommendations from itself.
As for integrating this in your website - ideally, you’d have a small chunk of Javascript that:
- Knows the URL of the calling page
- Uses that URL as the
seedItem
- Asynchronously requests a response from the recommender endpoint
- Styles the responses accordingly
There’s a block of Javascript in that showcase demo that could be a useful starting point:
<script>
// Display recommendations modal, passing current result's URL as seed
var recommenderUrl = '/s/recommender/similarItems.json';
jQuery('#search-recommender-preview').on('show.bs.modal', function (event) {
var trigger = jQuery(event.relatedTarget),
seed = jQuery(trigger).parent().parent().parent().clone()
that = jQuery(this)
template = Handlebars.compile(jQuery('#search-recommender-item').html());
jQuery.getJSON(recommenderUrl, {
seedItem : jQuery(seed).find('[data-url]').attr('data-url'),
collection : 'showcase-recommender',
scope : '',
maxRecommendations: 3
}).done(function(data) {
if (!data.RecommendationResponse.recommendations.length) { noResults(); return; }
for (i = 0, len = data.RecommendationResponse.recommendations.length; i < len; i++) {
that.find('.search-recommender-list').append(template({
url: (data.RecommendationResponse.recommendations[i].itemID || ''),
title: (data.RecommendationResponse.recommendations[i].metaData['T'] || ''),
author: (data.RecommendationResponse.recommendations[i].metaData['a'] || '').replace(/\|/g, ', '),
desc: (data.RecommendationResponse.recommendations[i].metaData['c'] || ''),
img: (data.RecommendationResponse.recommendations[i].metaData['I'] || ''),
pages: (data.RecommendationResponse.recommendations[i].metaData['p'] || ''),
format: (data.RecommendationResponse.recommendations[i].metaData['f'] || ''),
lang: (data.RecommendationResponse.recommendations[i].metaData['l'] || '').replace(/\|/g, ', '),
isbn: (data.RecommendationResponse.recommendations[i].metaData['n'] || '')
}));
}
})
.fail(function() {
noResults();
}).always(function() {
that.find('.modal-loader').fadeOut();
});
jQuery(this).find('.search-recommender-seed').html(jQuery(seed)).find('.search-tags').remove();
jQuery(this).find('.search-recommender-seed-title').text(jQuery(trigger).text());
jQuery(this).find('.search-recommender-seed-author').text(jQuery(seed).find('[data-author]').text());
function noResults() {
that.find('.search-recommender-list').html('<div class="alert alert-info">No recommendations found</div>');
}
}).on('hidden.bs.modal', function(event) {
jQuery(this).find('.search-recommender-seed').empty();
jQuery(this).find('.search-recommender-seed-title').empty();
jQuery(this).find('.search-recommender-seed-author').empty();
jQuery(this).find('.search-recommender-list').empty();
jQuery(this).find('.modal-loader').fadeIn();
});
});
</script>