How to create embed code for other sites

Question

I have a service of job portal which other users can use for their sites and blogs. they copy embed code from my site, paste it in their site and display job board in their webpage. how create this embed code anyone can help me.

Here is example monster.com publisher website.

click Get sample code button.

<div id="MonsterJobSearchResultPlaceHolderIy8AAA_e_e" class="xmns_distroph"></div>
<script type="text/javascript">
(function() {
  var oScript = document.createElement('script');
  oScript.type = 'text/javascript';
  oScript.async = true;
  oScript.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'publisher.monster.com/Services/WidgetHandler.ashx?WidgetID=EAAQgDMlA5vzabXFzuv86ZpLpA--&Verb=Initialize';
  var oParent = document.getElementsByTagName('script')[0];
  oParent.parentNode.insertBefore(oScript, oParent);
})();
</script>
<a id="monsterBrowseLinkIy8AAA_e_e" class="monsterBrowseLink fnt4" href="http://jobsearch.monster.com/browse/">View More Job Search Results</a>

It really depends on what you want your embed code to look like. How should it look? — Evan Hahn, Dec 31 '12 at 07:49
Just offer your embeds via iframe. It's good enough for youtube, it should be good enough for any other site. — pp19dd, Dec 31 '12 at 07:53

score 30 · Accepted Answer · answered Dec 31 '12 at 08:20

30

there are many ways to reach your goal. As you didn't explain your need explicitly, I just provide a simple example:

<script type='text/javascript' charset='utf-8'>     
   var iframe = document.createElement('iframe');       
   document.body.appendChild(iframe);

   iframe.src = 'URL OF CONTENT YOU WANT TO PROVIDE';       
   iframe.width = 'THE WIDTH YOU WANT';
   iframe.height = 'THE HEIGHT YOU WANT';
</script>

modify the code according to your need
escape this code in your html
have fun with your awesome embedded widget!

answered Dec 31 '12 at 08:20

Brian

30,156
15
86
87

I believe it's a problem from your css. you can wrap this script with a div and modify the position of the div. – Brian Jan 02 '13 at 12:17
1

hey @user1939164, have you got your embedded widget properly? If this answer solved your problem, please remember to accept it :) – Brian Jan 05 '13 at 08:19
there is something wrong with this demo? https://jsbin.com/capesewati/edit?html,console,output Uncaught TypeError: Cannot read property 'appendChild' of null – user455318 Apr 26 '16 at 14:46
you should put this snippet of code at the end of you file. You put it at the top, so the code can not get "body", which is not generated yet. – Brian Apr 27 '16 at 08:06

score 2 · Answer 2 · edited Sep 01 '17 at 04:55

How To Create Embed With Javascript in .cs

Note: localhost:3197/website/js/embed/form.js'; // give your js path

FormBuilder(921,'MjEzNjkxMjU='); in this method first parameter give your form height and second your form name or Id. there Id is encoded format

StringBuilder sb = new StringBuilder();
    sb.Append("<script type='text/javascript'>");
    sb.Append("(function(d, t) { var s = d.createElement(t), options = {");
    sb.Append("'async':true };");
    sb.Append("s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'localhost:3197/website/js/embed/form.js';");
    sb.Append("s.onload = s.onreadystatechange = function() {");
    sb.Append("var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;");
    sb.Append("try { frm = new FormBuilder("+Form Height+",'"+FormId+"');frm.initialize(options);frm.display(); }");
    sb.Append("catch (e) {}};");
    sb.Append("var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);");
    sb.Append("})(document, 'script');</script>");

    txtjavascript.Value = sb.ToString();  // text box name

After Create embed script Simple and Easy Way Paste this script where you want to show in other page after that

(function(d, t) { var s = d.createElement(t), options = {'async':true }; s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'localhost:3197/website/js/embed/form.js'; s.onload = s.onreadystatechange = function() {var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return; try { frm = new FormBuilder(921,'MjEzNjkxMjU='); frm.initialize(options); frm.display(); }catch (e) {}}; var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);})(document, 'script');

After That in your js file Create fuction like this and create iFrame ans create querystring where you fetch the form from database.

function FormBuilder(fHeight, formid) {

    var iframe = document.createElement('iframe');
    iframe.style = "height:" + fHeight + "px; width:100%; border:none";
    iframe.setAttribute('allowTransparency', true);
    iframe.frameBorder = "0";
    iframe.scrolling = "no";
    iframe.src = "http://localhost:3197/form/show-form?id="+ formid;
    document.body.appendChild(iframe);
}

How to create embed code for other sites

2 Answers2

Linked

Related