SCEditor Auto-Embed Button

Suggest box:

Code:

/*
* -- SCEditor Auto-Embed Button --
* Version: 1.20 EN (2018-08-12)
* Author: Wecoc
* Description: BBCode to insert embed codes using the URL directly
 
* Available sites (with example links):
 
  Facebook
https://www.facebook.com/20531316728/posts/10154009990506729
https://www.facebook.com/facebook/videos/10153231379946729
https://www.facebook.com/zuck/posts/10102577175875681?comment_id=1193531464007751
https://www.facebook.com/zuck/posts/10102577175875681?comment_id=1193531464007751&reply_comment_id=654912701278942
 
  Twitter
https://twitter.com/IJasonAlexander/status/526635414338023424
 
  Instagram
https://www.instagram.com/p/fA9uwTtkSN/

  Imgur
http://imgur.com/AsQ0K3P
http://imgur.com/a/9UGCL
http://imgur.com/gallery/9UGCL
http://i.imgur.com/u7Yo0Vy.gifv
http://i.imgur.com/UO1UrIx.mp4

  Soundcloud
https://soundcloud.com/the-bugle/bugle-179-playas-gon-play
https://soundcloud.com/tenaciousd/sets/rize-of-the-fenix/

  Flickr
https://www.flickr.com/photos/babsphotosecosse/29042463337/in/explore-2018-08-11/

*/
 
$(function() {
 
  // Install here custom plugins
  installFacebookEmbedPlugin();
  installTwitterEmbedPlugin();
 
  /*--------------------- CONFIGURATION ---------------------*/
 
  var embed_codes = {
    // Facebook
    facebook_post: {
      site: "Facebook",
      type: "Post",
      match: /facebook.com\/(.+?)\/posts\/(.+?)(\/)?$/,
      code: '<div class="fb-post" data-href="{LINK}" data-width="500" data-show-text="true"></div>'
    },
    facebook_comment: {
      site: "Facebook",
      type: "Comment",
      match: /facebook.com\/(.+?)\/posts\/(.+?)\?comment_id=(.+?)(&reply_comment_id=(.+?))?$/,
      code: '<div class="fb-comment-embed" data-href="{LINK}" data-width="560" data-include-parent="true"></div>'
    },
    facebook_photo: {
      site: "Facebook",
      type: "Photo",
      match: /facebook.com\/((.+?)\/)?photo(s)?(\/)?(.+?)(\/)?$/,
      code: '<div class="fb-post" data-href="{LINK}" data-width="500" data-show-text="false"></div>'
    },
    facebook_video: {
      site: "Facebook",
      type: "Video",
      match: /facebook.com\/((.+?)\/)?video(s)?(\/)?(.+?)(\/)?$/,
      code: '<div class="fb-video" data-href="{LINK}" data-width="500" data-show-text="false"></div>'
    },
    // Twitter
    twitter: {
      site: "Twitter",
      type: "Tweet",
      match: /twitter.com\/(.+?)\/(\d+)/,
      code: '<div class="embed-tweet" tweet_link="{LINK}" tweet_id="{M2}"></div>'
    },
    // Instagram
    instagram: {
      site: "Instagram",
      type: "Post",
      match: /instagram.com\/p\/(.+?)\//,
      code: '<div class="embed-instagram" insta_link="{LINK}" insta_id="{M1}"></div>'
    },
    // Imgur
    imgur: {
      site: "Imgur",
      type: "Post",
      match: /imgur.com\/(.+?)(\.|$)/,
      code: '<div class="embed-imgur" imgur_link="{LINK}" imgur_id="{M1}"></div>'
    },
    // Soundcloud
    soundcloud: {
      site: "Soundcloud",
      type: "Song",
      match: /soundcloud.com/,
      code: '<div class="embed-soundcloud" soundcloud_link="{LINK}"></div>'
    },
    // Flickr
    flickr: {
      site: "Flickr",
      type: "Photo",
      match: /flickr.com\/photos\/(.+?)\/(\d+?)(\/)/,
      code: '<div class="embed-flickr" flickr_link="{LINK}" flickr_id="{M2}"></div>'
    },
  },
  lang = {
    tooltip: "Embed sites",
    insert:  "Insert",
    url:    "URL"
  };
 
  /*------------------ END OF CONFIGURATION ------------------*/
 
  if (!$.sceditor || !window.toolbar) return;
  $('head').append('<style type="text/css">' +
    '.sceditor-button-embed div{ background-image: url(https://i62.servimg.com/u/f62/14/49/87/10/embed_10.png) !important }' +
  '</style>');
 
  $.sceditor.command.set('embed', {
    dropDown : function(editor, caller, callback) {
      // Create shortcut select
      var content = $(
      '<div>' +
      '  <div>' +
      '    <label unselectable="on">' + lang.url + '</label>' +
      '    <input type="text" class="embed-url" placeholder="http://" value="" />' +
      '  </div>' +
      '  <div>' +
      '    <input type="button" class="button" value="' + lang.insert + '" />' +
      '  </div>' +
      '</div>'
      );
      content.find('.button').click(function(e) {
        callback(content.find('.embed-url').val());
        editor.closeDropDown(true);
      });
      editor.createDropDown(caller, 'embed', content);
    },
    // wysiwyg
    exec : function(caller) {
      var editor = this; $.sceditor.command.get('embed').dropDown(editor, caller, function(text) {
        var result, result_match;
        for (i in embed_codes){
          result_match = text.match(embed_codes[i].match);
          if (result_match){
            result = embed_codes[i].code;
            result = result.replace(new RegExp('{LINK}', "gm"), text);
            result = result.replace(new RegExp('{M1}', "gm"), result_match[1]);
            result = result.replace(new RegExp('{M2}', "gm"), result_match[2]);
            result = result.replace("<", "&"+"#60;").replace(">", "&"+"#62;");
            editor.insert(result, '', true, true, true);
            return;
          }
        }
        editor.insert(text, '', true, true, true);
      });
    },
 
    // source
    txtExec : function(caller) {
      var editor = this; $.sceditor.command.get('embed').dropDown(editor, caller, function(text) {
        var result, result_match;
        for (i in embed_codes){
          result_match = text.match(embed_codes[i].match);
          if (result_match){
            result = embed_codes[i].code;
            result = result.replace(new RegExp('{LINK}', "gm"), text);
            result = result.replace(new RegExp('{M1}', "gm"), result_match[1]);
            result = result.replace(new RegExp('{M2}', "gm"), result_match[2]);
            editor.insert(result, '', true, true, true);
            return;
          }
        }
        editor.insert(text, '', true, true, true);
      });
    },
    tooltip : lang.tooltip
  });
  toolbar = toolbar.replace(/youtube/,'embed,youtube'); // add the button to the toolbar
});
 
// Load Facebook Embed
 
function installFacebookEmbedPlugin(){
  $('head').append('<div id="fb-root"></div>' +
  '<script>(function(d, s, id) {' +
    'var js, fjs = d.getElementsByTagName(s)[0];' +
    'if (d.getElementById(id)) return;' +
    'js = d.createElement(s); js.id = id;' +
    'js.src = "https://connect.facebook.net/ca_ES/sdk.js#xfbml=1&version=v3.0";' +
    'fjs.parentNode.insertBefore(js, fjs);' +
  '}(document, "script", "facebook-jssdk"));</script>');
};
 
// Load Twitter Embed
 
function installTwitterEmbedPlugin(){
  $('head').append('<script>window.twttr = (function(d, s, id) {' +
    'var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};' +
    'if (d.getElementById(id)) return t;' +
    'js = d.createElement(s); js.id = id;' +
    'js.src = "https://platform.twitter.com/widgets.js";' +
    'fjs.parentNode.insertBefore(js, fjs);' +
    't._e = []; t.ready = function(f) { t._e.push(f); }; return t;' +
  '}(document, "script", "twitter-wjs"));</script>');
};

function waitforTwitterEmbedPlugin(){
  setTimeout(function(){
    if (!window.twttr || !window.twttr.widgets){ waitforTwitterEmbedPlugin(); return; }
    $('div.embed-tweet').filter(function(){
      var current = this;
      var tweet_link = this.getAttribute("tweet_link");
      var tweet_id = this.getAttribute("tweet_id");
      twttr.widgets.createTweet(tweet_id, current);
    });
  }, 100);
};
 
$(document).ready(function() {
  $('head').append('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>');
  waitforTwitterEmbedPlugin();
});
 
// Load Insagram Embed
 
function waitforInstagramEmbedPlugin(){
  setTimeout(function(){
    if (!window.instgrm){ waitforInstagramEmbedPlugin(); return; }
    $('div.embed-instagram').filter(function(){
      var current = this;
      var insta_link = this.getAttribute("insta_link");
      var insta_id = this.getAttribute("insta_id");
      insta_link = insta_link.replace("www.", "");
      insta_link = insta_link.replace("instagram", "instagr.am");
      insta_link = insta_link.replace(".com", "");
      var oembed = "https://api.instagram.com/oembed?url=" + String(insta_link);
      $.get(oembed, function(data){
        $(current).after(data.html);
        instgrm.Embeds.process();
      });
    });
  }, 100);
};
 
$(document).ready(function() {
  var insta_embedSDK = "https://www.instagram.com/static/bundles/base/EmbedSDK.js/17c189f82307.js";
  $('head').append('<script async src="' + insta_embedSDK + '" charset="utf-8"></script>');
  waitforInstagramEmbedPlugin();
});
 
// Load Imgur Embed
 
$(document).ready(function() {
  $('div.embed-imgur').filter(function(){
    var current = this;
    var imgur_link = this.getAttribute("imgur_link");
    var imgur_id = this.getAttribute("imgur_id");
    imgur_id = imgur_id.replace("gallery", "a");
    $(current).after('<blockquote class="imgur-embed-pub" lang="en" data-id="' + imgur_id + '"></blockquote>');
    $('head').append('<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>');
  });
});

// Load Soundcloud Embed

$(document).ready(function() {
  $('div.embed-soundcloud').filter(function(){
    var current = this;
    var sc_link = this.getAttribute("soundcloud_link");
    var h = (sc_link.match(/\/sets\//)) ? 450 : 166;
    $(current).after('<iframe data-s9e-mediaembed="soundcloud" scrolling="no"' +
    'src="https://w.soundcloud.com/player/?url=' + sc_link + '" style="border:0;height:' + h + 'px;' +
    'max-width:900px;width:100%"></iframe>');
  });
});

// Load Flickr Embed

$(document).ready(function() {
  $('div.embed-flickr').filter(function(){
    var current = this;
    var flickr_link = this.getAttribute("flickr_link");
    var flickr_id = this.getAttribute("flickr_id");
    $(current).after('<div style="overflow:hidden;position:relative;padding-bottom:100%">' +
    '<iframe scrolling="no" src="https://www.flickr.com/photos/_/' + flickr_id + '/player/"' +
    'style="border:0;max-width:900px;height:100%;left:0;position:absolute;width:100%"></iframe></div>');
  });
});

Spoiler:

Extended Response:

Screenshot:

Wecoc wrote:Thank you for testing it, guys.

@SLGray Good question, I think this requires an extended explanation on how embeds work in Forumotion.
For everyone interested in this question, read the spoiler below.

Extended Response:

Long story short, the new button solves that but if you insert the default embed code directly in the textarea, the issue may still happen.

Wecoc wrote:New version 1.1 now available!
Imgur included to the list, see examples in the code description.

@TonnyKamper Try the new version, please. If the issue isn't fixed I'll need a link to that topic.
Also I would like to know if the same happens with Twitter, Instagram or Imgur embeds (you only have to test one of them) or it's just a problem with Facebook embeds.

Wecoc wrote:@skouliki So the problem is solved now? I didn't found any incompatibility so far, if there is any please let me know.

@TonnyKamper Thank you for your tests, if this happens in other embeds I think this may be a CSS problem.
Please make that category visible for guests (for now I can't access it) and I'll try some CSS changes to fix that bug.
For now try adding this in your CSS page:

Code: .postbody { max-width: 76%; }

Code:

.postbody { max-width: 76%; }

Spoiler:

SLGray wrote:What happens if you move the profile to the left side?

Wecoc wrote:It wasn't a CSS issue, you can delete the code I said before, sorry.

It looks like for some reason when the postbody includes an embed, postprofile and p.right (those little arrows) are appended inside the postbody instead of just after it as default. They shouldn't change their position at all and my code doesn't refer them ever, so that's weird.
For now this issue only happens in your forum, the only explanation I find to this would probably be an incompatibility with another Javascript.
In this case I'm not sure this can be fixed at all... If you can think of another possible cause please tell me.

Code:

.postbody { max-width: 76%; }

skouliki wrote:Can you post the first version of the code just to test it also ..to see if i have different console errors

Code:

/*
* -- SCEditor Auto-Embed Button --
* Version: 1.0 EN (2018-05-14)
* Author: Wecoc
* Description: BBCode to insert embed codes using the URL directly
* Available sites (with example links):
 
  Facebook
https://www.facebook.com/20531316728/posts/10154009990506729
https://www.facebook.com/facebook/videos/10153231379946729
https://www.facebook.com/zuck/posts/10102577175875681?comment_id=1193531464007751
https://www.facebook.com/zuck/posts/10102577175875681?comment_id=1193531464007751&reply_comment_id=654912701278942
 
  Twitter
https://twitter.com/IJasonAlexander/statuses/526635414338023424
 
  Instagram
https://www.instagram.com/p/fA9uwTtkSN/
 
*/
 
$(function() {
 
  // Install here custom plugins
  installFacebookEmbedPlugin();
  installTwitterEmbedPlugin();
 
  /*--------------------- CONFIGURATION ---------------------*/
 
  var embed_codes = {
    // Facebook
    facebook_post: {
      site: "Facebook",
      type: "Posts",
      match: /facebook.com\/(.+?)\/posts\/(.+?)(\/)?$/,
      code: '<div class="fb-post" data-href="{LINK}" data-width="500" data-show-text="true"></div>'
    },
    facebook_comment: {
      site: "Facebook",
      type: "Comment",
      match: /facebook.com\/(.+?)\/posts\/(.+?)\?comment_id=(.+?)(&reply_comment_id=(.+?))?$/,
      code: '<div class="fb-comment-embed" data-href="{LINK}" data-width="560" data-include-parent="true"></div>'
    },
    facebook_photo: {
      site: "Facebook",
      type: "Photo",
      match: /facebook.com\/((.+?)\/)?photo(s)?(\/)?(.+?)(\/)?$/,
      code: '<div class="fb-post" data-href="{LINK}" data-width="500" data-show-text="false"></div>'
    },
    facebook_video: {
      site: "Facebook",
      type: "Video",
      match: /facebook.com\/((.+?)\/)?video(s)?(\/)?(.+?)(\/)?$/,
      code: '<div class="fb-video" data-href="{LINK}" data-width="500" data-show-text="false"></div>'
    },
    twitter: {
      site: "Twitter",
      type: "Tweet",
      match: /twitter.com\/(.+?)\/(\d+)/,
      code: '<div class="embed-tweet" tweet_link="{LINK}" tweet_id="{M2}"></div>'
    },
    instagram: {
      site: "Instagram",
      type: "Post",
      match: /instagram.com\/p\/(.+?)\//,
      code: '<div class="embed-instagram" insta_link="{LINK}" insta_id="{M1}"></div>'
    }
  };
  lang = {
    tooltip: "Embed sites",
    insert:  "Insert",
    url:    "URL"
  };
 
  /*------------------ END OF CONFIGURATION ------------------*/
 
  if (!$.sceditor) return;
  $('head').append($('<style>', {
    text: '.sceditor-button-embed div{background-image: url(https://i62.servimg.com/u/f62/14/49/87/10/embed_10.png) !important}'
  }));
 
  $.sceditor.command.set('embed', {
    dropDown : function(editor, caller, callback) {
      // Create shortcut select
      var a = document.createElement('DIV'), b = document.createElement('INPUT'), i;
      a.innerHTML = '<label unselectable="on">' + lang.url + '</label>';
      $(b).addClass("embed-url");
      b.placeholder = "http://";
      a.append(b);
      editor.createDropDown(caller, 'embed', a);
 
      // Create insert button
      var c = document.createElement('DIV');
      c.innerHTML = '<input type="button" class="button" value="' + lang.insert + '">';
      c.onclick = function() {
        callback(b.value);
        editor.closeDropDown(true);
        return false;
      };
      a.append(c);
    },
    // wysiwyg
    exec : function(caller) {
      var editor = this; $.sceditor.command.get('embed').dropDown(editor, caller, function(text) {
        var result, result_match;
        for (i in embed_codes){
          result_match = text.match(embed_codes[i].match);
          if (result_match){
            result = embed_codes[i].code;
            result = result.replace(new RegExp('{LINK}', "gm"), text);
            result = result.replace(new RegExp('{M1}', "gm"), result_match[1]);
            result = result.replace(new RegExp('{M2}', "gm"), result_match[2]);
            result = result.replace("<", "&"+"#60;").replace(">", "&"+"#62;");
            editor.insert(result, '', true, true, true);
            return;
          }
        }
        text = text.replace("<", "&"+"#60;").replace(">", "&"+"#62;");
        editor.insert(text, '', true, true, true);
      });
    },
 
    // source
    txtExec : function(caller) {
      var editor = this; $.sceditor.command.get('embed').dropDown(editor, caller, function(text) {
        var result, result_match;
        for (i in embed_codes){
          result_match = text.match(embed_codes[i].match);
          if (result_match){
            result = embed_codes[i].code;
            result = result.replace(new RegExp('{LINK}', "gm"), text);
            result = result.replace(new RegExp('{M1}', "gm"), result_match[1]);
            result = result.replace(new RegExp('{M2}', "gm"), result_match[2]);
            editor.insert(result, '', true, true, true);
            return;
          }
        }
        editor.insert(text, '', true, true, true);
      });
    },
    tooltip : lang.tooltip;
  });
  toolbar = toolbar.replace(/youtube/,'embed,youtube'); // add the button to the toolbar
});
 
// Load Facebook Embed
 
function installFacebookEmbedPlugin(){
  $('head').append('<div id="fb-root"></div>' +
  '<script>(function(d, s, id) {' +
    'var js, fjs = d.getElementsByTagName(s)[0];' +
    'if (d.getElementById(id)) return;' +
    'js = d.createElement(s); js.id = id;' +
    'js.src = \'https://connect.facebook.net/ca_ES/sdk.js#xfbml=1&version=v3.0\';' +
    'fjs.parentNode.insertBefore(js, fjs);' +
  '}(document, \'script\', \'facebook-jssdk\'));</script>');
};
 
// Load Twitter Embed
 
function installTwitterEmbedPlugin(){
  $('head').append('<script>window.twttr = (function(d, s, id) {' +
    'var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {};' +
    'if (d.getElementById(id)) return t;' +
    'js = d.createElement(s); js.id = id;' +
    'js.src = "https://platform.twitter.com/widgets.js";' +
    'fjs.parentNode.insertBefore(js, fjs);' +
    't._e = []; t.ready = function(f) { t._e.push(f); }; return t;' +
  '}(document, "script", "twitter-wjs"));</script>');
};
 
$(document).ready(function() {
  $('head').append('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>');
  setTimeout(function(){
    $('div.embed-tweet').filter(function(){
      var tweet_link = this.getAttribute("tweet_link");
      var tweet_id = this.getAttribute("tweet_id");
      twttr.widgets.createTweet(tweet_id, this);
    });
  }, 500);
});
 
// Load Insagram Embed
 
$(document).ready(function() {
  $.getScript("https://www.instagram.com/static/bundles/base/EmbedSDK.js/92d4a7f14747.js");
  setTimeout(function(){
    $('div.embed-instagram').filter(function(){
      var current = this;
      var insta_link = this.getAttribute("insta_link");
      insta_link = insta_link.replace("https", "http");
      insta_link = insta_link.replace("www.", "");
      insta_link = insta_link.replace("instagram", "instagr.am");
      insta_link = insta_link.replace(".com", "");
      var insta_id = this.getAttribute("insta_id");
      var oembed = "https://api.instagram.com/oembed?url=" + String(insta_link);
      $.get(oembed, function(data){
        console.log(data.html);
        $(current).after(data.html);
        instgrm.Embeds.process();
      });
    });
  }, 500);
});

Wecoc wrote:Ok I changed the code a little, but some of these bugs I still don't know why they happen.
I listed the bugs to make it easier to follow.

1 - Sometimes the button doesn't appear at all:
This may be an incompatibility, but I don't understand the problem well enough yet.
If this occurs please check the console box, maybe the error displayed there helps me understand why that happens.

2 - The embed moves postprofile inside postbody:
This is not version-related since I made the code in a phpBB3 forum and that doesn't occur. It might be an incompatibility as well.
I tried fixing everything that might cause an incompatibility but there wasn't much to change.
I found and fixed a mistake not directly related to this but maybe if we're lucky...

3 - The Twitter embeds don't show up anymore:
Yes, I see why. I still have saved the previous version, I only did one modification in the Twitter embed on that new version, so now I just changed it back. Should be fixed now.

The code isn't very different now but maybe these little changes together make the difference

Wecoc wrote:I updated the code again, sorry I didn't think there would be so many problems

1 - Should be fixed now. That screen has been very useful. The 'bad guy' there was that TypeError, and it was caused by the Imgur 'Plugin' I was using for embed, so now I use a simpler one. I tested that in 3 different forums and it works fine in all them. I should have used this from the very start, simpler is better.

2 - This bug is still a mystery, I can't even recreate it... I tried this in 2 different phpBB3 forums and no bug was found (and the console is completely empty)
Default embed codes insterted directly in the textarea cause the same issue, right?

3 - So this is already fixed, luckly this one was pretty easy to solve.

skouliki wrote:

@APE i know you have the same code... editor change theme ....like me so can you check Wecoc's code if its ok on your forum or you also have that conflict between those 2 codes ...to my forum the button is not appearing