v4 version (for cool people)
FROM 2.1.1 USE V5 code: https://www.axew3.com/w3/2020/01/phpbb-wordpress-template-integration-iframe-v5/
OLD CODE: cool people moved to V5
FROM 2.1.1 USE V5 code: https://www.axew3.com/w3/2020/01/phpbb-wordpress-template-integration-iframe-v5/
SINCE 2.1.1 the following code, even if still working with his related page-forum (linked below) into any plugin version, is now obsolete.
PAGE HELP – JS code – UPDATED on 15 Gen 2020
(related addons/page-forum.php – updated on 14 Gen 2020)
wp-w3all-phpbb-integration/tags/2.1.0/addons/page-forum.php
wp_w3all plugin 1.9.9 until 2.1.0
phpBB SEO mods compatible – (READ ALL this page)
wp_w3all responsive iframe procedure
WordPress phpBB iframe template integration
MEMO: to update to latest v4 code, you’ll need to rebuild page-forum.php (or whatever you named it) via plugin admin, OR manually substitute it into your active WP template folder, with the new one that you find/copy into /wp-content/plugins/wp-w3all-phpbb-integration/addons. You’ll need to update also the iframeResizer.contentWindow.min.js file you added into phpBB root, with the new one you find into /wp-content/plugins/wp-w3all-phpbb-integration/addons/resizer folder. Done this, substitute the phpBB overall_header.html and overall_footer.html code (re-adding needed values) with the new v4 code here below. Do not forget to rebuild phpBB template to make phpBB template modifications take effect.
Domain/subdomains installations it’s REQUIRED to read this: How to Domain/subdomain iframe template integration
WP_w3all template integration steps
After you built/create the WP forum template page via option
WP_w3all phpBB embedded on WordPress Template
on WP_w3all admin config page, and the blank page on WordPress Admin -> Pages -> Add New, titled the same of created wp_w3all template page, so forum or board etc (then you’ll have into your active WordPress template folder a file named page-forum.php or page-board.php etc), to complete the procedure and get the responsive iframe height for the embedded/iframed phpBB into WordPress template page you need:
overall_footer.html code
Open with a text editor your phpBB template file overall_footer.html
and just before the closing </body> tag, add this code (do not select rows numbers on copied code):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 |
<script> if(window.self !== window.top){ // EDIT values to fit yours document.domain = 'localhost'; // MANDATORY! // Set/Change this value to your domain (example: axew3.com (or leave localhost if on localhost)) var wordpress_url_page_forum = 'https://localhost/wp53/forums'; // MANDATORY! // (DO NOT ADD/INCLUDE final slash here) Url that point to your iframed wordpress forum page (the one you created blank in wp) var w3all_scroll_top = 100; // To fit your theme header distance: change this value (pixels). This is the distance you want to scroll to by the WordPress Top header. The forum Top distance gap. // END EDIT var w3all_doc_domain = document.domain; var w3allappend = false; var boardU = "{BOARD_URL}"; // Lightbox correct scroll fix: // https://www.axew3.com/w3/forums/viewtopic.php?f=13&t=885 // remove /* and */ to activate, also more below to complete ... /* $(".postimage").on("click", function(event) { var pos = event.pageY - 100; $(parent.window).scrollTop( 200 ); var el = document.getElementById("lightbox"); $("#lightboxOverlay").on("click", function() { $(parent.window).scrollTop( pos ); }); $(".lb-close").on("click", function() { $(parent.window).scrollTop( pos ); }); $(".lightbox").on("click", function() { $(parent.window).scrollTop( pos ); }); }); */ function w3allNormalize_phpBBUrl(href){ // try to 'normalize' passed relative links: needed all after last slash / // exception are kind of passed urls like: /phpbb323/app.php/help/faq // and if SEO mods that may assign some different kind of links values // by the way, SEO absolute urls http(s) should be (all?) already considered here ... var phpbbRUrl = href.split(/^.+?(\w+.+)$/); if( href.indexOf('app.php') > -1 ){ // since the previous not 'normalize' this type of passed value (and may miss something else) phpbburl = href.split(/^.+?(app\.php.+)$/); w3allappend = phpbburl[1]; } else if ( /^https?/ig.exec(href) !== null ){ // absolute http(s) passed: try to 'normalize' a possible seo mod phpbburl = href.split(boardU); w3allappend = phpbburl[1]; } else if ( phpbbRUrl[1] && phpbbRUrl[1].length > 1 ){ // 'normalize' any other w3allappend = phpbbRUrl[1]; } else if ( phpbbRUrl[0].length > 1 ){ w3allappend = phpbbRUrl[0]; } // ... if still not normalized if(/^\W/ig.exec(w3allappend) !== null){ w3allappend = w3allappend.split(/^.+?(\w+.+)$/); if(w3allappend[1]){ w3allappend = w3allappend[1]; } if ( w3allappend[1] && w3allappend[1].charAt(0) == '/' ){ w3allappend = w3allappend[1].substr(1); } } return w3allappend; } $(document).on("click", "a", function(e) { var href = $(this).attr("href"); if( /[^-0-9A-Za-z\._#\:\?\/=&%]/ig.exec(href) !== null ){ return; } if( /\/adm\//ig.exec(href) !== null ){ e.preventDefault(); window.open(href,'_blank'); return; } if (href.indexOf('view=print') > -1 !== false){ e.preventDefault(); window.open(href,'_blank'); return; } if( /posting\.php\?mode=[reply|post|bump]/ig.exec(href) !== null || /mcp\.php\?/ig.exec(href) !== null ){ w3allappend = boardU; } // check if link point to external resource if ((this.href.indexOf(boardU) > -1) != true){ if(/^(f|ht)tps?:\/\//i.test(href)){ e.preventDefault(); // prevent inside parent.location.replace(href); return; } } // check for # short links like on FAQ page if ( href.charAt(0) == '#' ){ return; } w3allappend = w3allNormalize_phpBBUrl(href); var w3all_parent_element_id = $(this).parent().get( 0 ).id; // detect click x ... (ex: return ID smiley-box, onclick post smiles) ... // detect and avoid/allow certain behaviors var w3all_onclick_smile = (w3all_parent_element_id.indexOf('smiley-box') > -1); var w3all_onview_topic = (href.indexOf('viewtopic.php') > -1); var w3all_onview_attach = (href.indexOf('file.php') > -1); var w3all_onreview_post = /#[review]+/ig.exec(href); var w3all_ck_quickmod = (href.indexOf('quickmod') > -1); var w3all_onreply_topic = (href.indexOf('mode=reply') > -1); var w3all_ck_onindex = (href.indexOf('index.php') > -1); // Lightbox: if not working on repositioning img view // complete Lightbox correct attachment display // activate removing /* and */ // also useful to open attachments in a new Tab /* if(w3all_onview_attach !== false){ e.preventDefault(); window.open(href,'_blank'); return; } */ if ( href.indexOf('quickmod') > -1 ) { if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,w3all_scroll_top); } if ('parentIFrame' in window){ if( typeof w3allNOappend == 'undefined' ){ window.parentIFrame.sendMessage(w3allappend); } } }); // END /////////////////////////////////////////////////////////////////////////// // w3all Ajax UPDATES for phpBB events var pmn = "{PRIVATE_MESSAGE_COUNT}"; var w3all_phpbb_u_logged = "{S_USER_LOGGED_IN}"; var hash = window.location.hash.substr(1); location.hash = "#" + hash; var w3all_lochash = ''; if( location.hash.length < 2 ){ w3all_lochash = 0; } else if ( typeof ($(location.hash).offset() ) != 'undefined' ) { // #preview js error fix w3all_lochash = $(location.hash).offset().top; } // to wp var w3appendevents = '#w3all_phpbbpmcount=' + pmn + '#w3all_phpbb_u_logged=' + w3all_phpbb_u_logged + '#w3all_lochash=' + w3all_lochash; if(w3appendevents.indexOf('w3allmchatif') == -1){ //if(parent.location.href.indexOf(wordpress_url_page_forum) > -1){ $( window ).on( "load", function() { parent.w3all_ajaxup_from_phpbb(w3appendevents); }); //} } // fix vertical iframe centered on viewtopic.php, preview or where # anchor etc (but skip on iOS) var w3iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); if(w3iOS == false){ $(window).on( "load", function() { var bd = document.getElementsByTagName("body"); for (var i = 0; i < bd.length; i++) { var bdID = bd[i].getAttribute("id"); } var elt = document.getElementById(bdID); elt.setAttribute("style", "position:fixed;top:0%;left:0%;width:100%;margin:0px;"); }); } // If not using/applied the overall_header.html Javascript code, may un-comment this (may not) /* $( "a" ).contextmenu(function() { var ohref = $(this).attr("href"); var href = this.href; // treath like an external because only open New tab or New window d = w3allNormalize_phpBBUrl(href); hrefEnc = window.btoa(unescape(encodeURIComponent(d))); href1 = wordpress_url_page_forum + '/?w3=' + hrefEnc; $(this).attr("href", href1); // send out encoded $(this).mouseleave(function() { // reset (replaced 'mouseup') $(this).attr("href", ohref); }); }); */ } // END if(window.self !== window.top){ </script> <script type="text/javascript" src="https://localhost/phpBB3/iframeResizer.contentWindow.min.js" defer></script> |
after you pasted this code into phpBB overall_footer.html
edit following lines:
1 2 3 4 5 |
// EDIT values to fit yours document.domain = 'localhost'; // MANDATORY! // Set/Change this value to your domain (example: axew3.com (or leave localhost if on localhost)) var wordpress_url_page_forum = 'https://localhost/wp53/forums'; // MANDATORY! // (DO NOT ADD/INCLUDE final slash here) Url that point to your iframed wordpress forum page (the one you created blank in wp) var w3all_scroll_top = 100; // To fit your theme header distance: change this value (pixels). This is the distance you want to scroll to by the WordPress Top header. The forum Top distance gap. // END EDIT |
change localhost to fit your domain name (example axew3.com)
do NOT add http(s):// OR the point in front nor anything else, just add
yourdomain.com or set it as localhost if on localhost test. If phpBB is at subdomain.domain.com, add domain.com as value
(MANDATORY!) or resizer won’t work
now check the other line to change:
1 |
var wordpress_url_page_forum = 'https://localhost/wp53/forum'; // MANDATORY! (DO NOT INCLUDE final slash here) Url that point to your wordpress forum page (without final slash) |
change value
https://localhost/wp53/forum
on this line, to point to the URL of the WordPress created/named forum page (do not add final slash and change http or https as needed)
MANDATORY!
Finally, check this line
1 |
<script type="text/javascript" src="https://localhost/phpBB/iframeResizer.contentWindow.min.js" defer></script> |
in the code you added (last line): this should correctly point to the iframeResizer.contentWindow.min.js file that you’ll go to add into phpBB root folder. You need to use the absolute URL (use http or https as needed, and adjust the url to fit your needs)
(MANDATORY!) or resizer won’t work
1 |
src="https://www.yoursite.com/your-phpbb-folder/iframeResizer.contentWindow.min.js" |
AFTER EDITED, save and load the modified overall_footer.html into your phpBB style folder, overwriting the default one, and so
load through ftp on the phpBB root folder (or copy/paste), the file
iframeResizer.contentWindow.min.js
that is contained inside folder
wp/wp-content/plugins/wp-w3all-phpbb-integration/addons/resizer
After this, phpBB require to recompile the template, or modifications to template files not affect (to overall_footer.html in this case). Open phpBB ACP, and so under:
Server Configuration -> Load settings -> Recompile stale style components set to YES and save. Load one time a phpBB full forum page. Leave as is at moment, especially if you follow adding also the code on overall_header.html (more below) to redirect any phpBB direct URL to the iframed WP page: then after tested that all work fine, return to ACP, and reset to NO and save. This step is needed to load the template modifications on phpBB (and any time you edit a phpBB template file to for modifications take effect), but this option should be ever set to NO into an online/production site to save server resources. It is normally set to yes only for testing/devel purpose or to apply modifications on phpBB templates files.
overall_header.html code
The new V4 w3all iframe code do not use anymore htaccess to force redirects, but use pure Javascript (reload) code, that as you may imagine, lead to some different result: you’ll not have to edit phpBB notification links on phpBB notification files as on V1 or V2 code, to force users redirect to iframe when they click (for example) on notification email link or some other forum’s link. But in this case, any user except bots, will be redirected (as code is, but it can be easily changed to assume different behaviors, may excluding admins or moderators etc) to the WP iframed page, if the forum accessed via real phpBB url.
If you want phpBB email notification links or any phpBB direct url to be redirected to the wp iframed forum page follow this step:
Open with a text editor your phpBB template file overall_header.html
and just immediately after this code (or by the way, just before the closing tag </head>)
1 2 3 4 5 6 7 8 9 10 |
<!-- IF U_CANONICAL --> <link rel="canonical" href="{U_CANONICAL}"> <!-- ENDIF --> <!-- phpBB style name: prosilver Based on style: prosilver (this is the default phpBB3 style) Original author: Tom Beddard ( http://www.subBlue.com/ ) Modified by: --> |
add the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!-- IF not S_IS_BOT --><script> // START force w3all to iframe redirect var wordpress_url_page_f = 'https://localhost/wp5/forum'; // MANDATORY! // (DO NOT ADD/INCLUDE final slash here) Url that point to your iframed wordpress forum page function w3all0Normalize_phpBBUrl(u){ var bu = "{BOARD_URL}"; w3allappend = "{BOARD_URL}"; if ( /^https?/ig.exec(u) !== null ){ phpbburl = u.split(bu); w3allappend = phpbburl[1]; } if(/^\W/ig.exec(w3allappend) !== null){ w3allappend = w3allappend.split(/^.+?(\w+.+)$/); if(w3allappend[1]){ w3allappend = w3allappend[1]; } if ( w3allappend[1] && w3allappend[1].charAt(0) == '/' ){ w3allappend = w3allappend[1].substr(1); } } return w3allappend; } if ((window.self !== window.top) != true) { //(or get loop) if(/adm\//ig.exec(window.location.href) === null){ // avoid x ACP var w3all_r = window.location.href.replace(/sid=.+/gi, ''); w3all_r = w3all0Normalize_phpBBUrl(w3all_r); hrefEnc = window.btoa(unescape(encodeURIComponent(w3all_r))); href0 = wordpress_url_page_f + '/?w3=' + hrefEnc; document.location.replace(href0); }} // END force w3all to iframe redirect </script> <!-- ENDIF --> |
On added code, change URL on the line where (line 3):
1 |
var wordpress_url_page_f = 'https://localhost/wp5/forum'; |
to fit/point to the WordPress iframed forum page: DO NOT ADD final slash and setup as http or https as needed.
All working!?
Reset to No the Recompile phpBB template option, here we go!
NOTE: if you added the code above into phpBB overall_header.html then you’ll never activate (it is not active by default) this part of the code you added into the overall_footer.html:
1 2 3 4 5 6 7 8 9 10 11 12 |
$( "a" ).contextmenu(function() { var ohref = $(this).attr("href"); var href = this.href; // treath like an external because only open New tab or New window d = w3allNormalize_phpBBUrl(href); hrefEnc = window.btoa(unescape(encodeURIComponent(d))); href1 = wordpress_url_page_forum + '/?w3=' + hrefEnc; $(this).attr("href", href1); // send out encoded $(this).mouseleave(function() { // reset (replaced 'mouseup') $(this).attr("href", ohref); }); }); |
P.s – whenever you want: to get the iframe responsive for ACP phpBB admin panel, read this post. My (personal) suggestion is to stop here and try to use the integration leaving ACP out of iframe joke. If by the way you want to follow, before to apply then you’ll have to little change the above code for overall_footer.html and overall_header.html in this way:
on code for overall_footer.html remove this part:
1 2 3 4 5 |
if( /\/adm\//ig.exec(href) !== null ){ e.preventDefault(); window.open(href,'_blank'); return; } |
on code for overall_header.html remove this part:
1 2 3 4 5 6 7 |
if ((window.self !== window.top) != true) { //(or get loop) if(/adm\//ig.exec(window.location.href) === null){ // avoid x ACP var w3all_r = window.location.href.replace(/sid=.+/gi, ''); w3all_r = w3all0Normalize_phpBBUrl(w3all_r); hrefEnc = window.btoa(unescape(encodeURIComponent(w3all_r))); href0 = wordpress_url_page_f + '/?w3=' + hrefEnc; document.location.replace(href0); }} // END force w3all to iframe redirect |
change into:
1 2 3 4 5 6 |
if ((window.self !== window.top) != true) { //(or get loop) w3all_r = window.location.href.replace(/sid=.+/gi, ''); w3all_r = w3all0Normalize_phpBBUrl(w3all_r); hrefEnc = window.btoa(unescape(encodeURIComponent(w3all_r))); href0 = wordpress_url_page_f + '/?w3=' + hrefEnc; document.location.replace(href0); } // END force w3all to iframe redirect |
* For domain/subdomain installations
READ THIS HOW TO:
How to Domain/subdomain iframe template integration
Refer to v2 or v1 code for htaccess old solution editing phpBB notifications files.