Skip to content

Instantly share code, notes, and snippets.

@jshaw
Last active June 3, 2022 14:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jshaw/9694453 to your computer and use it in GitHub Desktop.
Save jshaw/9694453 to your computer and use it in GitHub Desktop.
Basic FB Share link example that allows custom image url and description for dynamic content. This content would be available in the JS somewhere... like the context.
Core.prototype._initializeFbShare = function() {
$('#Fb-share').on('click', _(this._handleFbShare).bind(this));
};
Core.prototype._handleFbShare = function(event) {
event.preventDefault();
var image_url = this.getPaletteImageUrl(this.picker.config.shade_array);
var palette_name = this.$inputPalName.val();
var lang = document.documentElement.lang;
var compiled_desctiption = this._getFBDescription(palette_name);
var params = {
method: 'feed',
link: 'http://#TODO-SHARELINK-URL##.com/' + lang + '/',
picture: image_url,
name: '#TODO-SHARE-TITLE',
caption: '#TODO-ADDCOPY',
description: compiled_desctiption
};
var FB = global.FB;
FB.ui(params, function() {
// Nothing needs to happen here..
});
};
Core.prototype._getFBDescription = function(palette_name) {
var original_settings = _.templateSettings;
// Fixes the double %% in the django.po file when compiling a translation that is going to be used for templating
_.templateSettings = {
interpolate: /<<=(.+?)>>/g,
evaluate: /<<(.+?)>>/g
};
var template;
if(palette_name.length === 0) {
template = _.template( $('#FBShareMissingName').html() );
}
else {
template = _.template( $('#FBShareCopy').html() );
}
var compiled = template({description: palette_name});
_.templateSettings = original_settings;
return compiled;
};
Core.prototype.getPaletteImageUrl = function(palette_items) {
var base_url = 'http://' + global.location.host;
var lang = document.documentElement.lang;
if(palette_items.length < 4) {
return base_url + '/static/img/fb-share-' + lang + '.jpg';
}
return base_url + '/en/palette/<code>.png'.replace(/<code>/, palette_items.join('-'));
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment