Add facebooklike service

Add facebooklike service and options

src/js/dialogs/facebooklike_dlg.js

@@ -0,0 +1 @@
+require('../../style/dialogs/facebooklike_dlg.less')

src/js/services/facebooklike.js

@@ -0,0 +1,135 @@
+'use strict'
+
+module.exports = function(shariff) {
+  var url = shariff.getURL()
+  var dialogTitle = shariff.getMeta('og:title') || document.title
+  var shariffLang = shariff.getOption('lang')
+  var dialogLocale = 'en_GB'
+  var dialogClose = 'Close'
+  var fbUrl = 'https://www.facebook.com/plugins/like.php?href=' +
+    encodeURIComponent(url) + shariff.getReferrerTrack()
+  var height = 20
+  var minWidth = 47
+  var dialogHtml = '<div>' + '<h1 class="dialogtitle">'
+  var fblikeOptions = shariff.getFacebooklikeOptions()
+  switch (shariffLang) {
+  case 'bg': dialogLocale = 'bg_BG'; dialogClose = 'Близо'; break
+  case 'da': dialogLocale = 'da_DK'; dialogClose = 'Luk'; break
+  case 'de': dialogLocale = 'de_DE'; dialogClose = 'Schließen'; break
+  case 'es': dialogLocale = 'es_ES'; dialogClose = 'Cerrar'; break
+  case 'fi': dialogLocale = 'fi_FI'; dialogClose = 'Sulje'; break
+  case 'fr': dialogLocale = 'fr_FR'; dialogClose = 'Fermer'; break
+  case 'hr': dialogLocale = 'hr_HR'; dialogClose = 'Zatvoriti'; break
+  case 'hu': dialogLocale = 'hu_HU'; dialogClose = 'Bezár'; break
+  case 'it': dialogLocale = 'it_IT'; dialogClose = 'Chiudi'; break
+  case 'ja': dialogLocale = 'ja_JP'; dialogClose = '閉じる'; break
+  case 'ko': dialogLocale = 'ko_KR'; dialogClose = '닫기'; break
+  case 'nl': dialogLocale = 'nl_NL'; dialogClose = 'Sluiten'; break
+  case 'no': dialogLocale = 'nb_NO'; dialogClose = 'Lukk'; break
+  case 'pl': dialogLocale = 'pl_PL'; dialogClose = 'Zamknij'; break
+  case 'pt': dialogLocale = 'pt_PT'; dialogClose = 'Fechar'; break
+  case 'ro': dialogLocale = 'ro_RO'; dialogClose = 'Închide'; break
+  case 'ru': dialogLocale = 'ru_RU'; dialogClose = 'Закрыть'; break
+  case 'sk': dialogLocale = 'sk_SK'; dialogClose = 'Zatvoriť'; break
+  case 'sl': dialogLocale = 'sl_SI'; dialogClose = 'Zapri'; break
+  // Serbian latin is not suppported by Facebook Graph API, they only have kyrillic.
+  // case 'sr': dialogLocale = 'sr_RS'; dialogClose = 'Close'; break
+  case 'sv': dialogLocale = 'sv_SE'; dialogClose = 'Stäng'; break
+  case 'tr': dialogLocale = 'tr_TR'; dialogClose = 'Kapatın'; break
+  case 'zh': dialogLocale = 'zh_CN'; dialogClose = '关闭'; break
+  }
+  switch (fblikeOptions.layout) {
+  case 'standard':
+    if (fblikeOptions.show_faces) {
+      height = 80
+    } else {
+      height = 35
+    }
+    minWidth = 225
+    break
+  case 'box_count':
+    height = 65
+    minWidth = 55
+    break
+  case 'button_count':
+    minWidth = 90
+    break
+  }
+  fblikeOptions.width = fblikeOptions.width < minWidth ? minWidth : fblikeOptions.width
+  fblikeOptions.appId = fblikeOptions.appId || (shariff.getMeta('fb:app_id') || null)
+  for (var opt in fblikeOptions) {
+    if (fblikeOptions.hasOwnProperty(opt) && fblikeOptions[opt] !== null) {
+      fbUrl += '&' + opt + '=' + fblikeOptions[opt]
+    }
+  }
+  fbUrl += '&height=' + height + '&locale=' + dialogLocale
+  dialogHtml += dialogTitle + '</h1>' +
+      '<a class="dialoglink" href="' + url + '">' +
+      url + '</a></div>' +
+      '<div class="facebooklike"><iframe src="' + fbUrl + '" ' +
+      'width="' + fblikeOptions.width + '" height="' + height + '" style="border:none;overflow:hidden" ' +
+      'scrolling="no" frameborder="0" allowTransparency="true"></iframe></div>' +
+      '<div>' +
+      '<button class="dialogbutton" onclick="self.close()">' +
+      dialogClose + '</button></div>'
+  return {
+    popup: true,
+    shareText: {
+      'bg': 'харесвам',
+      'da': 'synes godt om',
+      'de': 'gefällt mir',
+      'en': 'like',
+      'es': 'me gusta',
+      'fi': 'tykkää',
+      'fr': 'j’aime',
+      'hr': 'sviđa mi se',
+      'hu': 'tetszik',
+      'it': 'mi piace',
+      'ja': 'いいね！',
+      'ko': '좋아요',
+      'nl': 'vind ik leuk',
+      'no': 'liker',
+      'pl': 'lubię to!',
+      'pt': 'gosto',
+      'ro': 'îmi place',
+      'ru': 'нравится',
+      'sk': 'páči sa mi to',
+      'sl': 'všeč mi je',
+      'sr': 'свиђа ми се',
+      'sv': 'gilla',
+      'tr': 'beğen',
+      'zh': '赞'
+    },
+    name: 'facebooklike',
+    faName: 'fa-thumbs-up',
+    title: {
+      'bg': 'Харесвам/Вече не харесвам във Facebook',
+      'da': 'Synes godt om/Fjern Synes godt om på Facebook',
+      'de': 'Gefällt mir/Gefällt mir nicht mehr bei Facebook',
+      'en': 'Like/Unlike on Facebook',
+      'es': 'Me gusta/Ya no me gusta en Facebook',
+      'fi': 'Tykkää/En tykkääkään Facebookissa',
+      'fr': 'J’aime/Je n’aime plus sur Facebook',
+      'hr': 'Sviđa mi se/Ne sviđa mi se na Facebooku',
+      'hu': 'Tetszik/Mégsem tetszik a Facebookon',
+      'it': 'Mi piace/Non mi piace più su Facebook',
+      'ja': 'フェイスブック上 いいね！/「いいね！」を取り消す',
+      'ko': '페이스북에서 좋아요/싫어함',
+      'nl': 'Vind ik leuk/Vind ik niet meer leuk op Facebook',
+      'no': 'Liker/Slutt å like på Facebook',
+      'pl': 'Lubię to!/Nie lubię na Facebooku',
+      'pt': 'Gosto/Não gosto no Facebook',
+      'ro': 'Îmi place/Nu-mi mai place pe Facebook',
+      'ru': 'Нравится/Не нравится на Facebook',
+      'sk': 'Páči sa mi to/Zrušiť Páči sa mi to na Facebooku',
+      'sl': 'Všeč mi je/Ni mi všeč na Facebooku',
+      'sr': 'Свиђа ми се/Не свиђа ми се на Фацебооку',
+      'sv': 'Gilla/Sluta gilla på Facebook',
+      'tr': 'Facebook\'ta Beğen/Beğenmekten Vazgeç',
+      'zh': 'Facebook上的赞/取消赞'
+    },
+    shareUrl: 'javascript:void(0);',
+    dialogHtml: dialogHtml,
+    dialogCssUrl: shariff.getDialogsMediaUrl() + '/facebooklike_dlg.css'
+  }
+}

src/js/services/index.js

@@ -2,6 +2,7 @@ module.exports = {
   addthis: require('./addthis'),
   diaspora: require('./diaspora'),
   facebook: require('./facebook'),
+  facebooklike: require('./facebooklike'),
   flattr: require('./flattr'),
   googleplus: require('./googleplus'),
   info: require('./info'),

src/js/shariff.js

@@ -6,6 +6,11 @@ const $ = require('./dom')
 const services = require('./services')
 const url = require('url')
 
+const shariffScript = document.currentScript ||
+  document.querySelector('script[src$="shariff.js"]') ||
+  document.querySelector('script[src$="shariff.min.js"]')
+const shariffPath = shariffScript ? shariffScript.src.split('/').slice(0, -1).join('/') : ''
+
 // Defaults may be overridden either by passing "options" to Shariff constructor
 // or by setting data attributes.
 const Defaults = {
@@ -44,6 +49,12 @@ const Defaults = {
   // services to be enabled in the following order
   services: ['twitter', 'facebook', 'googleplus', 'info'],
 
+  dialogsMediaUrl: shariffPath,
+
+  facebookCountBtn: 'both',
+
+  facebooklikeOptions: { width: 450, layout: 'standard', action: 'like', size: 'large', show_faces: true, share: true, appId: null },
+
   title: function() {
     return $('head title').text()
   },
@@ -155,20 +166,43 @@ class Shariff {
     return $.getJSON(url.format(baseUrl), callback)
   }
 
+  getDialogsMediaUrl() {
+    return this.options.dialogsMediaUrl || ''
+  }
+
+  getFacebooklikeOptions() {
+    return this.options.facebooklikeOptions
+  }
+
   // add value of shares for each service
   _updateCounts(data, status, xhr) {
     if (!data) return
+    var fbValue = null
     $.each(data, (serviceName, value) => {
       if (!this.isEnabledService(serviceName)) {
         return
       }
       if (value >= 1000) {
         value = Math.round(value / 1000) + 'k'
       }
-      $(this.element)
-        .find(`.${serviceName} a`)
-        .append($('<span/>').addClass('share_count').text(value))
+      var doAppend = true
+      if (serviceName === 'facebook') {
+        fbValue = value
+        if (this.options.facebookCountBtn === 'like') {
+          doAppend = false
+        }
+      }
+      if (doAppend) {
+        $(this.element)
+          .find(`.${serviceName} a`)
+          .append($('<span/>').addClass('share_count').text(value))
+      }
     })
+    if (this.isEnabledService('facebooklike') && (fbValue !== null) && this.options.facebookCountBtn !== 'share') {
+      $(this.element)
+        .find(`.facebooklike a`)
+        .append($('<span/>').addClass('share_count').text(fbValue))
+    }
   }
 
   // add html for button-container
@@ -179,6 +213,8 @@ class Shariff {
       'col-' + this.options.services.length
     ].join(' '))
 
+    var dialogServices = []
+
     // add html for service-links
     this.services.forEach(service => {
       var $li = $('<li/>').addClass(`shariff-button ${service.name}`)
@@ -194,6 +230,11 @@ class Shariff {
         $shareLink.prepend($('<span/>').addClass(`fa ${service.faName}`))
       }
 
+      if (service.shareUrl.match(/javascript:/) && typeof service.dialogHtml !== 'undefined') {
+        $shareLink.attr('data-dlg-idx', dialogServices.length)
+        dialogServices[dialogServices.length] = service
+      }
+
       if (service.popup) {
         $shareLink.attr('data-rel', 'popup')
       } else if (service.blank) {
@@ -225,6 +266,21 @@ class Shariff {
         }
       }
 
+      var dialogIdx = $(this).attr('data-dlg-idx')
+
+      if (dialogIdx && !isNaN(dialogIdx) && typeof dialogServices[dialogIdx].dialogHtml !== 'undefined') {
+        var title = $(this).attr('title')
+        var headInnerHTML = '<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
+          '<title>' + title + '</title>'
+        if (typeof dialogServices[dialogIdx].dialogCssUrl !== 'undefined' && dialogServices[dialogIdx].dialogCssUrl) {
+          headInnerHTML += '<link rel="stylesheet" href="' + dialogServices[dialogIdx].dialogCssUrl + '">'
+        }
+        var newWin = global.window.open('', '_blank', 'width=600,height=460')
+        newWin.document.head.innerHTML = headInnerHTML
+        newWin.document.body.innerHTML = dialogServices[dialogIdx].dialogHtml
+        return
+      }
+
       global.window.open(url, '_blank', 'width=600,height=460')
     })
 

src/style/dialogs/facebooklike_dlg.less

@@ -0,0 +1,24 @@
+html {
+	font-size: 100%;
+}
+body {
+	margin: 0;
+	padding: 16px;
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 13px;
+	line-height: 18px;
+}
+h1.dialogtitle {
+	font-size: 24px;
+	font-weight: 500;
+	line-height: 26px;
+}
+div.facebooklike {
+	margin-top: 16px;
+}
+button.dialogbutton {
+	padding: 8px;
+	text-align: center;
+	vertical-align: middle;
+	font-weight: 500;
+}

src/style/services/facebooklike.less

@@ -0,0 +1,30 @@
+.shariff {
+    .facebooklike {
+        a {
+            background-color: #3b5998;
+            &:hover {
+                background-color: #4273c8;
+            }
+        }
+        .fa-thumbs-up {
+            font-size: 22px;
+        }
+        .share_count {
+            color: #183a75;
+            background-color: #99adcf;
+        }
+    }
+    .theme-white {
+        .facebooklike a {
+            color: #3b5998;
+        }
+    }
+}
+
+@media only screen and (min-width: 600px) {
+    .shariff {
+        .facebooklike .fa-thumbs-up {
+            font-size: 19px;
+        }
+    }
+}

src/style/shariff-services.less

@@ -1,6 +1,7 @@
 @import "services/addthis";
 @import "services/diaspora";
 @import "services/facebook";
+@import "services/facebooklike";
 @import "services/flattr";
 @import "services/googleplus";
 @import "services/info";

webpack.config.js

@@ -80,4 +80,9 @@ module.exports = [
       './dom': 'jQuery',
     },
   }),
+  Object.assign({}, baseConf, {
+    entry: {
+      'facebooklike_dlg': './src/js/dialogs/facebooklike_dlg',
+    }
+  }),
 ]