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

[beansbaxter]

Thanks for the feedback. I've been working in the Developer Console Log and have worked through all the errors, except for one...

I see where vBSEO is adding the <base href...> tag, however when I remove it, then the forum's CSS and Style doesn't load... not sure if there is a workaround...

This the last issue I need to resolve to validate AMP.

[NeutralizeR]

Originally Posted by beansbaxter

Thanks for the feedback. I've been working in the Developer Console Log and have worked through all the errors, except for one...

I see where vBSEO is adding the <base href...> tag, however when I remove it, then the forum's CSS and Style doesn't load... not sure if there is a workaround...

This the last issue I need to resolve to validate AMP.

Open vbseo\includes\functions_vbseo.php, find

$durl = 'http://'.$_SERVER['HTTP_HOST'];

right below this line there is a line starting with $newtext.

Replace:

$newtext = preg_replace('#<head>#i', "$0\n".'<base href="'.$durl.(defined('VBSEO_BASE_URL')?VBSEO_BASE_URL:'').'/" /><!--[if IE]></base><![endif]-->', $newtext, 1);

width:

if(THIS_SCRIPT != 'amp')
{$newtext = preg_replace('#<head>#i', "$0\n".'<base href="'.$durl.(defined('VBSEO_BASE_URL')?VBSEO_BASE_URL:'').'/" /><!--[if IE]></base><![endif]-->', $newtext, 1);}

[beansbaxter]

Originally Posted by NeutralizeR

Open vbseo\includes\functions_vbseo.php, find

$durl = 'http://'.$_SERVER['HTTP_HOST'];

right below this line there is a line starting with $newtext.

Replace:

$newtext = preg_replace('#<head>#i', "$0\n".'<base href="'.$durl.(defined('VBSEO_BASE_URL')?VBSEO_BASE_URL:'').'/" /><!--[if IE]></base><![endif]-->', $newtext, 1);

width:

if(THIS_SCRIPT != 'amp')
{$newtext = preg_replace('#<head>#i', "$0\n".'<base href="'.$durl.(defined('VBSEO_BASE_URL')?VBSEO_BASE_URL:'').'/" /><!--[if IE]></base><![endif]-->', $newtext, 1);}

Thank you so much! I tried several things and couldn't get it to work. And this worked great!

AMP is now being validated.

Thanks again. I appreciate your help.

[NeutralizeR]

You are welcome

[nw-fotografie]

Great stuff!

How can we put a link in the thread tools section?

Thanks for support!

Greetings

Klaus

[nw-fotografie]

Ok, validation makes some problems:

The attribute 'nowrap' may not appear in tag 'td'.
The attribute 'style' may not appear in tag 'div'.
The attribute 'style' may not appear in tag 'td'.
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? 585 https://www.ampproject.org/docs/reference/amp-img.html
The attribute 'style' may not appear in tag 'div'.
The attribute 'nowrap' may not appear in tag 'td'.
The tag 'script' is disallowed except in specific forms.

Any idea how to fix this?

[NeutralizeR]

Originally Posted by nw-fotografie

Ok, validation makes some problems:

The attribute 'nowrap' may not appear in tag 'td'.
The attribute 'style' may not appear in tag 'div'.
The attribute 'style' may not appear in tag 'td'.
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'? 585 https://www.ampproject.org/docs/reference/amp-img.html
The attribute 'style' may not appear in tag 'div'.
The attribute 'nowrap' may not appear in tag 'td'.
The tag 'script' is disallowed except in specific forms.

Any idea how to fix this?

Helped via PM.

Note: I can't answer all questions via PM but I'll try to help you fix the validation issues. I believe we covered most of them. Some plugins globally add codes/lines to many vB pages, including AMP. You should exclude them for AMP threads.

[unp]

I have "Missing structured data element" in google webmasters.

I checked your pages and found this:

xxxxx
  "@id":"https://www.msxlabs.org/forum/amp/505911.html",
  "mainEntityOfPage":"https://www.msxlabs.org/forum/amp/505911.html",
  "datePublished":"2016-10-29T03:33:19+03:00",
  "dateModified":"2016-10-29T19:41:46+03:00",
xxxxx

I need some help with this datePublished and DateModified.

with $threadinfo[dateline & lastpost] I get unix date format.

Regards,

[NeutralizeR]

http://searchengineland.com/amp-page...console-255016

You can check this example regarding dates in unix format:

$datepublished = date('c', $post['dateline']);

[Masterix]

Originally Posted by NeutralizeR

You don't actually need to rewrite AMP pages. AMP pages will be served by Google once they are crawled.

You can try these Custom Rewrite Rules for vBSEO:

'^amp\.php\?t=(\d+)' => 'amp/$1.html'

or

'^amp\.php\?t=(\d+)&page=(\d+)$' => 'amp/$1-$2.html'

Thanks, Google is crawling now