Use html scripting

Posted by Helmut_pdorf on 22 Sep 2008 10:58, last edited by Helmut_pdorf on 20 Aug 2022 13:10

: anobii embed html iframe javascript

rating: +55

This "howto" explains how it is possible to use any HTML scripting on a Wikidot page.

On 2nd March 2010, Wikidot.com released a new feature that allows this to be done much easier than was previously possible. To understand this feature, you can read more about it on the Wiki Syntax documentation page.

Example: aNobii embedded HTML code

An example of the code that aNobii might give you:

<!-- This is the HTML section of the badge -->
<div id="badge">
<script type="text/javascript" src="http://www.anobii.com/anobi/badge_generator.php?p=012d64e5c2a5327d15&language=2,4&tag=0,11,9,1,8,5,6,4,10,3&count=5&recent=1&progress=3&title=title&subtitle=0&author=0&img=small&link_to=1&az_site=&a_id="></script>
</div>
<!-- Badge ends -->

To use this in your Wikidot page, simply surround it with the [[html]][[/html]] syntax!

[[html]]
<!-- This is the HTML section of the badge -->
<div id="badge">
<script type="text/javascript" src="http://www.anobii.com/anobi/badge_generator.php?p=012d64e5c2a5327d15&language=2,4&tag=0,11,9,1,8,5,6,4,10,3&count=5&recent=1&progress=3&title=title&subtitle=0&author=0&img=small&link_to=1&az_site=&a_id="></script>
</div>
<!-- Badge ends -->
[[/html]]

In action:

[フレーム]

Example: Other examples

puresolso:
(thanks to Shane)

[[html]]
<scriptsrc="http://puresolo.com/javascripts/embed.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript"charset="utf-8">new PureSolo.Widget({ partnerID: 47, link: '#puresolo_popup_link'});</script><ahref="#"id="puresolo_popup_link">View my PureSolo tracks</a>
[[/html]]

gives: (click on the link "View my pure solo tracks" with right mouse button and open it in a new window!)

[フレーム]


Note: Some of these examples may use the old method of a HTML code block and Iframe. Note that this method is now redundant and the [[html]] method should be used instead as it makes the page's source code easier to understand for other users.

Backlinks

These pages link to this page:

Authors

Helmut_pdorf Helmut_pdorf . Please visit his/her userPage.

leiger leiger . Please visit his/her userPage.

If you want to comment on this page, there is a "Discuss" button at the bottom-right of the page (in the page options section)


Related articles

Comments

Vanguard Vanguard 14 Nov 2008 10:14

If "refreshing" is an issue as in, the code block is changed periodically and you want the users to "see" the latest version of it, add the following to your code block:

<head><metahttp-equiv="Pragma"content="no-cache"><metahttp-equiv="expires"content="0"></head>
by Vanguard Vanguard , 14 Nov 2008 10:14
gerdami gerdami 16 Nov 2008 01:39

I am afraid the following tags

[[code type="html"]]
...
[[/code]]

are missing in section 3 of the howto…

by gerdami gerdami , 16 Nov 2008 01:39
Re:
Helmut_pdorf Helmut_pdorf 16 Nov 2008 14:58

Thanks, I changed it…


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 16 Nov 2008 14:58
Re:
mkaterina mkaterina 04 Apr 2009 08:50

thank you!

by mkaterina mkaterina , 04 Apr 2009 08:50
I don't understand!
Isabelleyang Isabelleyang 27 Jun 2009 23:08

Srry for all the drama in need for help Helmuti_pdorf but…

I NEED HELP!!!

I am trying to put up a Google Gadget which is Quote Of The Day thing but the code is in HTML.I put the [[codetype="html"]]…[[/code]] but it wouldn't work!This is exactly what I put up:

<script src="http://www.gmodules.com/ig/ifr?url=http://quotes4all.net/quotes.xml&amp;up_quote_color=000000&amp;up_quote_background=FFFFFF&amp;up_quote_align=center&amp;up_quote_font=arial&amp;up_quote_fontsize=10&amp;up_quote_fontstyle=plain&amp;up_image=left&amp;up_author_color=0000FF&amp;up_author_align=center&amp;up_author_font=arial&amp;up_author_fontsize=10&amp;up_author_fontstyle=plain&amp;synd=open&amp;w=320&amp;h=150&amp;title=Quote+Of+The+Day&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

when you said about the [[codetype="html"]]…[[/code]] blocks did you mean that ppl can copy and paste it for their website or is it actually HTML for YOUR site??Thanks!!!

by Isabelleyang Isabelleyang , 27 Jun 2009 23:08
Re: I don't understand!
RobElliott RobElliott 27 Jun 2009 23:19

There is a wikidot embed solution for google gadgets, so all you need to do is to put the code inside [[embed]]..[[/embed]] tags:

[[embed]]
<script src="http://www.gmodules.com/ig/ifr?url=http://quotes4all.net/quotes.xml&amp;up_quote_color=468259&amp;up_quote_background=dddddd&amp;up_quote_align=center&amp;up_quote_font=arial&amp;up_quote_fontsize=10&amp;up_quote_fontstyle=plain&amp;up_image=left&amp;up_author_color=0000FF&amp;up_author_align=center&amp;up_author_font=arial&amp;up_author_fontsize=10&amp;up_author_fontstyle=plain&amp;synd=open&amp;w=320&amp;h=150&amp;title=Quote+Of+The+Day&amp;border=%23468259%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
[[/embed]]

which will give:

Rob


Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Last edited on 28 Jun 2009 00:11 by RobElliott
by RobElliott RobElliott , 27 Jun 2009 23:19
Re: I don't understand!
Isabelleyang Isabelleyang 28 Jun 2009 00:12

Thanks sooooooo much!!!It worked!!

by Isabelleyang Isabelleyang , 28 Jun 2009 00:12
stacita stacita 31 Oct 2009 12:39

Best thing ever.

by stacita stacita , 31 Oct 2009 12:39
This does not work.
Brunhilda Brunhilda 21 May 2010 17:11

Look at my front page. There should be Amazon e-store in the side bar, but there isn't. There is only a blank space. I have the amazon code in html code and it does not work.

On the other hand, I also have html code at this page, which is then included in many other pages from the category knjizara (like here, for example), and there is no problem with showing the code…

This doesn't work either.

[!--
[[code type="html"]]
<script type="text/javascript"><!--
amazon_ad_tag="istorijskabib-21"; 
amazon_ad_width="728"; 
amazon_ad_height="90"; 
amazon_color_background="EFEFCC"; 
amazon_color_border="A43907"; 
amazon_color_logo="EDE0E0"; 
amazon_color_link="A43907"; 
amazon_ad_logo="hide"; 
amazon_ad_link_target="new"; 
amazon_ad_border="hide"; 
amazon_ad_title="Књижара Историјске библиотеке"; //--></script>
<script type="text/javascript" src="http://www.assoc-amazon.co.uk/s/asw.js"></script>
[[/code]]
--]
[[=]]
[[iframe http://istorijska-biblioteka.wikidot.com/knjizara:knjizara/code/1 width="450px" height="376px" frameborder="0"]]
[[/=]]

You can see it here at this page:
http://istorijska-biblioteka.wikidot.com/knjizara:knjizara


If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney

Last edited on 21 May 2010 17:36 by Brunhilda
by Brunhilda Brunhilda , 21 May 2010 17:11
Re: This does not work.
leiger leiger 22 May 2010 01:32

Posted a bug report: http://feedback.wikidot.com/bug:140


~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

by leiger leiger , 22 May 2010 01:32
Making Audio Players
Poppenhoffer Poppenhoffer 25 Feb 2014 15:02

Hey, I was wondering if anyone knew how to embed an audio player into a page and set it to autoplay. Any help would be much appreciated!

by Poppenhoffer Poppenhoffer , 25 Feb 2014 15:02
Re: Making Audio Players
RobElliott RobElliott 25 Feb 2014 15:14

Welcome to Wikidot. Have a look at http://snippets.wikidot.com/code:mp3


Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

by RobElliott RobElliott , 25 Feb 2014 15:14
Auto-execute code on page load
h3llo_w0rld h3llo_w0rld 30 May 2019 13:01

I'm trying to get a few lines of code to run when I open a webpage. I've tried the "<body onload="function()">, but that doesn't seem to work. Send help please

by h3llo_w0rld h3llo_w0rld , 30 May 2019 13:01
Re: Auto-execute code on page load
Helmut_pdorf Helmut_pdorf 31 May 2019 08:40

You need to be aware that any html (=iframe) code will be inserted on a wiki page at that point as a single window, without ANY connections outside this window & Code.

You can do a lot inside this iframe / html code but that will be alone inside this window!
See also
https://www.wikidot.com/doc-wiki-syntax:html-blocks

https://www.wikidot.com/doc-wiki-syntax:embedding-code


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Last edited on 31 May 2019 08:42 by Helmut_pdorf
by Helmut_pdorf Helmut_pdorf , 31 May 2019 08:40
Re: Auto-execute code on page load
h3llo_w0rld h3llo_w0rld 31 May 2019 13:31

welp, That makes my job a lot more complicated.

Trying to program a page to change its contents after a certain date…

looks like Ill just have to dump everything into the frame and go from there.

wait… so how can I have wikidot parsing in the frame?

Last edited on 31 May 2019 14:21 by h3llo_w0rld
by h3llo_w0rld h3llo_w0rld , 31 May 2019 13:31
Helmut_pdorf Helmut_pdorf 31 May 2019 15:57

Trying to program a page to change its contents after a certain date

This could be easy inside a html block / iframe block on the top of a wikidot page … but only showing a depending text/body inside the iframe and not changing the outside…

how can I have wikidot parsing in the frame?

Wikidot is not parsing the frane witjh html codes - this is done by the browser on the client. Wikidot is only delivering the frame holding that block ( scrolling, borders a,s,o)


Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 31 May 2019 15:57
Cool
Zhao Jx Zhao Jx 25 Sep 2021 07:27

It's so cool!
But I don’t think I can fully grasp it lol.


by Zhao Jx Zhao Jx , 25 Sep 2021 07:27
renjey renjey 27 Sep 2022 07:20

Thanks for sharing such useful information. I just started to learn HTML and some things are somrtimes very scaring)

by renjey renjey , 27 Sep 2022 07:20
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.
Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
If you want to discuss contents of this page - this is the easiest way to do it.
View and manage file attachments for this page.
A few useful tools to manage this Site.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).
Notify administrators if there is objectionable content in this page.
Something does not work as expected? Find out what you can do.
General Wikidot.com documentation and help section.
Wikidot.com Terms of Service - what you can, what you should not etc.
Wikidot.com Privacy Policy.

AltStyle によって変換されたページ (->オリジナル) /