Integration with vBulletin - Accelerated Mobile Pages for vBulletin

What is AMP?
https://www.ampproject.org/

Info
When Google announced AMP, I realized I'd eventually need AMP support for my vBulletin forum. After reading the AMP implementation docs, I decided to modify printthread.php file since It only displays the basic elements and contents of a thread. So, you got the idea...

Implementation

1. You will upload 1 file to forum root: amp.php
2. You will edit /includes/class_bbcode.php and edit/replace a few lines.
3. You will add two new templates, and edit a few.
4. You will probably want to customize the <style amp-custom> CSS in ampthread template.

Demo

1. Visit any thread from https://www.msxlabs.org homepage.
2. Scroll down to footer; you will see the AMP link at the left bottom corner, click on it. It will open the AMP version of the thread.
3. The link is there for quick access to AMP version of a thread, It is not mandatory, nor It is used by AMP recognation.

Installation

1. Download and extract the ZIP file.
2. Upload the amp.php file to your forum root folder (same folder with showthread.php)
3. Add a new template called "ampthread" and copy the template content from ampthread_template.txt file.
4. Add a new template called "ampthreadbit" and copy the template content from ampthreadbit_template.txt file.
5. Edit your bbcode_quote template and replace It's content with bbcode_quote.txt file's.
6. Edit includes/class_bbcode.php, find:
   PHP Code:

   if ($do_imgcode AND ($this->registry->userinfo['userid'] == 0 OR $this->registry->userinfo['showimages'])) 

   replace with:
   PHP Code:

   if ($do_imgcode AND ($this->registry->userinfo['userid'] == 0 OR $this->registry->userinfo['showimages']) OR THIS_SCRIPT == 'amp') //amp hack 

   find:
   PHP Code:

   return '<img src="' .  $link . '" border="0" alt="" />'; 

   replace with:

   if (THIS_SCRIPT == 'amp') {    return '<amp-img layout="responsive" src="' .  $link . '" width="300" height="250" alt=""></amp-img>';}    else { return '<img src="' .  $link . '" border="0" alt="" />';    } //amp hack

7. Save and upload class_bbcode.php (overwrite).
8. Edit SHOWTHREAD template and add

   <link rel="amphtml" href="http://www.vbulletin.com/amp.php?t=$threadid<if condition="$pagenumber>1">&amp;page=$pagenumber</if>" />

   before </head>. Don't forget to change "yourforum.com" URL with yours.
9. Edit ampthread template and change "vbulletin.com" with your forum URL:

   <link rel="canonical" href="http://www.vbulletin.com/showthread.php?t=$threadinfo[threadid]<if condition="$pagenumber>1">&page=$pagenumber</if>" />

10. You will find some comments in amp.php and ampthread template; modify them according to your needs (optional).

Notes
I installed a fresh vBulletin 3.8 to my localhost and tested this mod. It should work just fine unless your vBulletin is highly modified. If you get validation errors, I believe you can fix them by looking at the examples (comments).


Does it work?

1. Open a thread from your forum.
2. Replace the "showthread.php" with "amp.php" in the address bar, hit enter.
3. Add "#development=1" at the end of the URL and refresh the page.
4. Open Chrome DevTools, check the console log, it should say "AMP validation successful."

Screenshots
Snap2.png

Snap3.png

Snap4.png

Snap5.png

Credits
Accelerated Mobile Pages for vBulletin 3.8 is created by NeutralizeR from https://www.msxlabs.org

[NeutralizeR]

Template edits for validation.

Page Navigation Templates > pagenav
remove:

style="font-weight:normal"

[Brandon Sheley]

It's crazy to see a vbulletin 3 mod released, thanks for sharing NeutralizeR

[attilio]

Can this mod work with vbulletin 4.2.4?

[NeutralizeR]

Originally Posted by attilio

Can this mod work with vbulletin 4.2.4?

It is possible. I guess somebody else can create a vB 4 version of this mod.

I'll do it when I have time, if nobody else is willing to do...

[zorcocuq]

Thanks NeutralizeR.

[Nas.er]

Thanks NeutralizeR

[Goomzee]

I am using 3.8.2 and not works

[Wana Maly]

thank you too much
I added it to my forum with some edits
example: http://vb.elmstba.com/amp.php?t=28465

http://vb.elmstba.com/t28465.html

[NeutralizeR]

Originally Posted by Goomzee

I am using 3.8.2 and not works

Need more detail... Check the examples in the code.

Originally Posted by Wana Maly

thank you too much
I added it to my forum with some edits
example: http://vb.elmstba.com/amp.php?t=28465

http://vb.elmstba.com/t28465.html

You need to fix the validation errors:
Attachment 155427

For example, you can't use "style" on elements. Add a "class" instead.

<td class="vbmenu_control" style="font-weight:normal">

<td class="vbmenu_control normalfont">

and add your style as ".normalfont {font-weight:normal}" to your "ampthread" template.

I guess that part comes from pagination template. You can edit and remove the "style" part, too.