User_Notes_vbulletin

vbulletin forum platform integration

Users of vbulletin based forums can integrate the pgn4web chessboard in their posts using a custom bbcode for PGN games, like this:

[pgn] ... PGN data ... [/pgn]

The integration code has been validated with the vbulletin demo facility.

Look at the users sites gallery for examples.

screenshot

integration guidelines

The forum administrator should create a new BBcode with BBcode tag name as pgn

The reccomended value for the HTML replacement string is:

<script type='text/javascript'>
"use strict";
var pgn4webPath = "/pgn4web";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
document.write("<textarea id='" + pgn4webTextareaId +"' style='display: none;'>");
</script>
{param}
</textarea>
<script type='text/javascript'>
"use strict";
document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ').replace(/\[(FONT[^\]]*|[^\]]*FONT)\]/gi, ' ');
var height = 268;
var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
if (multiGamesRegexp.test(document.getElementById(pgn4webTextareaId).value)) { height += 34; }
document.write("<iframe src='" + pgn4webPath + "/board.html?am=l&amp;d=3000&amp;ss=26&amp;ps=d&amp;pf=d&amp;lcs=____&amp;dcs=RsCo&amp;bbcs=RsCo&amp;hm=b&amp;hcs=FpBE&amp;bd=c&amp;cbcs=YKqR&amp;ctcs=BoBo&amp;hd=j&amp;md=f&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=VtCE&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=____&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;pi=" + pgn4webTextareaId + "' frameborder=0 width=100% height=" + height + " scrolling='no' marginheight='0' marginwidth='0'>your web browser and/or your host do not support iframes as required to display the chessboard</iframe>");
</script>

Please remember to set the variable pgn4webPath above to the path of the pgn4web folder on your site.

Please note these settings apply a predefined set of colors and options to match the default vbulletin template; if you need to change any of the colors and options (the parameters after board.html in the code above) you can refer to the board widget instructions wiki page or ask for support.

It is recommended to switch on the following options for the pgn BBcode tag: Remove Tag If Empty, Disable BB Code Within This BB Code and Disable Smilies Within This BB Code.
The icon below can be used as button image:

The instructions above require pgn4web 1.91 or later and requires that vbulletin and pgn4web are on the same domain.

In case you need to install vbulletin and pgn4web on different domains, please use the following alternative value for the HTML replacement string. Please note that this alternative solution limits the size of the PGN data to approximately 2000 characters:

<script type="text/javascript">
"use strict";
var pgn4webURL = "http://pgn4web.casaschi.net";
if (!document.getElementById("pgn4webEncoderScript")) { document.write('<script id="pgn4webEncoderScript" type="text/javascript" src="' + pgn4webURL + '/pgn-encoder.js"><!--' + 'script-->'); }
</script>
<script type='text/javascript'>
"use strict";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
document.write("<textarea id='" + pgn4webTextareaId +"' style='display: none;'>");
</script>
{param}
</textarea>
<script type='text/javascript'>
"use strict";
var pgnText = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
pgnText = pgnText.replace(/\[(FONT[^\]]*|[^\]]*FONT)\]/gi, ' ');
var height = 268;
var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
if (multiGamesRegexp.test(pgnText)) { height += 34; }
document.write("<iframe src='" + pgn4webURL + "/board.html?am=l&amp;d=3000&amp;ss=26&amp;ps=d&amp;pf=d&amp;lcs=____&amp;dcs=RsCo&amp;bbcs=RsCo&amp;hm=b&amp;hcs=FpBE&amp;bd=c&amp;cbcs=YKqR&amp;ctcs=BoBo&amp;hd=j&amp;md=f&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=VtCE&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=____&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;pe=" + EncodePGN(pgnText) + "' frameborder=0 width=100% height=" + height + " scrolling='no' marginheight='0' marginwidth='0'>your web browser and/or your host do not support iframes as required to display the chessboard</iframe>");
</script>

Please remember to set the variable pgn4webURL above to the URL of the pgn4web server you plan to use.

caveats

• HTML tags are stripped from the PGN data, removing all text between < and > characters; please make sure your PGN data does not contain < and > characters.
• with certain server configurations, vbulletin might display a blank page when saving an edited post
  • issue: there is a malfunctioning of vbulleting related to editing posts containing the [pgn] bbcode. After editing an existing post containing a [pgn] tag, when using the save command, vbulletin displays a blank page while endlessly trying to load the next page. Please note that the modifications to the post are actually saved, just the transition to the next vbulletin page fails.
  • workaround: three alternative options are available:
  • in the forum admin control panel navigate to Settings -> Options -> General Settings -> Disable AJAX Features and change the item Disable AJAX Features from the default Enable ALL AJAX Features to Disable Problematic AJAX Features, or
  • use the go advanced command instead of the save command when editing a post, or
  • live with the blank page, manually going back to vbulletin after saving changes to a post.

further customizations

With minor modifications to the integration guidelines described above other bbcode tags can be created for specialized applications, for instance taking advantage of the board widget puzzle support.

[Anonymous]

Originally posted by: pa...@casaschi.net

how to stop the games from autoplaying

Some forum administrators prefer the chessboard to load without automatically starting autoplaying the games. In order to achieve that, simply replace in the bbcode definition am=l with am=n

[Anonymous]

Originally posted by: pa...@casaschi.net

the puzzle tag

The pgn tag can be easily modified into a tag optimized for puzzles, hiding the move text until the user clicks on the prompt in order to show the puzzle solution. In order to achieve that, simply replace in the bbcode definition am=l with am=n, hd=j with hd=v and md=f with md=p.