Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Ceejayoz &amp; Joe have already covered the 2 basic options, <a href="https://stackoverflow.com/questions/1904152/how-to-offer-code-for-others-to-embed-your-content-into-their-html-pages/1904172#1904172">Javascript</a> or <a href="https://stackoverflow.com/questions/1904152/how-to-offer-code-for-others-to-embed-your-content-into-their-html-pages/1904173#1904173">IFrame</a>.</p> <p>If you want to check out some examples, take a look at the <a href="https://stackoverflow.com/users/flair">StackOverflow flair feature</a>, that does exactly what you are trying to do and allows a user to embed the StackOverflow user info box on their own website.</p> <p>If you want to see how it's implemented, check out the <a href="https://stackoverflow.com/users/flair/1.js">html</a> which a user would link to with an IFrame, or this <a href="https://stackoverflow.com/users/flair/1.html">Javascript</a>, which the user would call from their page. (see the notes under "how do I use it" on the SO <a href="https://stackoverflow.com/users/flair">flair</a> page.)</p> <p>[You need to insert your user number in those links to see the relevant html/js files for yourself.]</p> <p>In the case of SO, the js/html is generated specifically for each user. For completeness I've included the StackOverflow js/html that achieves this.</p> <p><strong>JavaScript:</strong> You can see when executed this basically writes a script element into the users html page that injects a link to the SO css file into the head. Then it just includes some fairly simple div/span tags which get styled by the css. Obviously, the user could in this case provide their own css instead if they wanted to style it differently.</p> <pre><code>document.write(' &lt;script&gt; var link = document.createElement(\"link\"); link.href = \"https://stackoverflow.com/content/flair-Default.StackOverflow.css\"; link.rel = \"stylesheet\"; link.type = \"text/css\"; var head = document.getElementsByTagName(\"head\")[0]; head.appendChild(link); &lt;/script&gt; &lt;div class=\"valuable-flair\"&gt; &lt;div class=\"gravatar\"&gt; &lt;a title=\"See my profile on Stack Overflow\" target=\"_blank\" href=\"https://stackoverflow.com/users/1/jeff-atwood\"&gt; &lt;img src=\"http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&amp;amp;d=identicon&amp;amp;r=PG\" height=\"50\" width=\"50\" alt=\"\"&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=\"userInfo\"&gt; &lt;span class=\"username\"&gt; &lt;img src=\"http://sstatic.net/so/favicon.ico\" /&gt; &lt;a href=\"https://stackoverflow.com/users/1/jeff-atwood\" target=\"_blank\"&gt;Jeff Atwood&lt;/a&gt; &lt;span class=\"mod-flair\" title=\"moderator\"&gt;&amp;#9830;&lt;/span&gt; &lt;/span&gt; &lt;br /&gt; &lt;span class=\"reputation-score\" title=\"reputation score\"&gt;16,907&lt;/span&gt; &lt;br /&gt; &lt;span title=\"5 gold badges\"&gt;&lt;span class=\"badge1\"&gt;&amp;#9679;&lt;/span&gt; &lt;span class=\"badgecount\"&gt;5&lt;/span&gt;&lt;/span&gt;&lt;span title=\"55 silver badges\"&gt; &lt;span class=\"badge2\"&gt;&amp;#9679;&lt;/span&gt;&lt;span class=\"badgecount\"&gt;55&lt;/span&gt;&lt;/span&gt; &lt;span title=\"72 bronze badges\"&gt;&lt;span class=\"badge3\"&gt;&amp;#9679;&lt;/span&gt; &lt;span class=\"badgecount\"&gt;72&lt;/span&gt;&lt;/span&gt;\r\n &lt;/div&gt;\r\n&lt;/div&gt;' ); </code></pre> <p><strong>Html</strong> - for an IFrame: You can see this is a full HTML document (XHTML actually to be pedantic) that includes everything needed including the link to the css in the head and the content in the body.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;link rel="stylesheet" href="http://sstatic.net/so/flair-Default.StackOverflow.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="valuable-flair"&gt; &lt;div class="gravatar"&gt; &lt;a title="See my profile on Stack Overflow" target="_blank" href="https://stackoverflow.com/users/1/jeff-atwood"&gt;&lt;img src="http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&amp;amp;d=identicon&amp;amp;r=PG" height="50" width="50" alt=""&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="userInfo"&gt; &lt;span class="username"&gt;&lt;img src="http://sstatic.net/so/favicon.ico" /&gt;&lt;a href="https://stackoverflow.com/users/1/jeff-atwood" target="_blank"&gt;Jeff Atwood&lt;/a&gt;&lt;span class="mod-flair" title="moderator"&gt;&amp;#9830;&lt;/span&gt;&lt;/span&gt; &lt;br /&gt; &lt;span class="reputation-score" title="reputation score"&gt;16,907&lt;/span&gt; &lt;br /&gt; &lt;span title="5 gold badges"&gt;&lt;span class="badge1"&gt;&amp;#9679;&lt;/span&gt;&lt;span class="badgecount"&gt;5&lt;/span&gt;&lt;/span&gt;&lt;span title="55 silver badges"&gt;&lt;span class="badge2"&gt;&amp;#9679;&lt;/span&gt;&lt;span class="badgecount"&gt;55&lt;/span&gt;&lt;/span&gt;&lt;span title="72 bronze badges"&gt;&lt;span class="badge3"&gt;&amp;#9679;&lt;/span&gt;&lt;span class="badgecount"&gt;72&lt;/span&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload