Hi there,

When using the "Videos Page" page template (demo site example), all video posts are loaded and displayed full-screen individually.

Since this is a multi-post template, next/prev buttons allow for navigating all the video posts that were pulled. When users click the next/prev buttons, one of two options will occur: (1) If AJAX is active, a custom script will run that grabs content and loads it on the page. (2) If AJAX is not active, the links will load page content like normal links do.

Here is the custom script from script/custom.js that runs if AJAX is turned on (lines 280-383 ...

/////////////////////////////
//AJAX -- GENERAL CLICK STUFF
/////////////////////////////
jQuery(document).on('click',"a",function(){

   //VAR SETUP
   var thisLink = jQuery(this),
       thisParent = thisLink.parent().attr('id'),
       url = thisLink.attr('href');

	//DETERMINE IF PROPER SITE LINK
	if(thisLink.attr('id') != 'link-rss' && url.indexOf(siteUrl) == 0 && thisParent != "load-more" && url.indexOf("#") == -1 && url.indexOf("wp-admin") == -1 && url.indexOf(".jpeg") == -1 && url.indexOf(".png") == -1 && url.indexOf(".gif") == -1 && url.indexOf(".jpg") == -1 && url.indexOf(".pdf") == -1 && url.indexOf(".zip") == -1 && url.indexOf("mailto") == -1 && theBody.hasClass('ajax-on')){

		//CLOSE SIDEBAR
		sideClose();

		//UPDATE LOADING BG
		loadingBg();

		//LOADING NOTICE
		loadingPage.stop(true,true).fadeIn(500,function(){

			//PAUSE BG VIDEO
			pauseBgVideo();

			//CLOSE SEARCH
			closeSearch();

			//UPDATE URL
			if(url!=window.location && history.pushState) window.history.pushState({path:url},'',url);

			//ADD/REMOVE THE AJAX CONTAINER
			jQuery("#ajax-content").remove();

			contentContainer.append('<div id="load-here"></div>');

			var loadHere = jQuery('#load-here');

			//POSITION THE AJAX CONTAINER
			loadHere.load(url + " #ajax-content",null, function() {

				//UPDATE PAGE TITLE
				document.title = jQuery('#page-info').data('page-title');

				//PLAY BG VIDEO
				playBgVideo();

				//CHECK IF CONTENT EXISTS
				if(loadHere.html().length > 0){		

					//WAIT FOR IMAGES TO LOAD
					loadHere.waitForImages(function() {

		    			//REMOVE WRAPPER
			    		loadHere.replaceWith(loadHere.html());

			    		//RESET SCROLL POSITION
						jQuery('.scroll-wrapper').scrollLeft(0);
						jQuery('.scroll-this > div').scrollTop(0);

			    		//LOADING NOTICE
			    		loadingPage.stop().fadeOut(800,function(){
			    			loadingBg();
			    		});

			    		//UPDATE CURRENT MENU ITEM
			    		if(!thisLink.hasClass('pagenav')){
			    			//REMOVE CURRENT CLASS
			   				jQuery('.current-menu-item').removeClass('current-menu-item');

			   				//CHECK IF URL MATCHES MENU ITEM URL
							jQuery('#dropmenu a').each(function(){
								if(jQuery(this).attr('href') == url){
									jQuery(this).parent().addClass('current-menu-item');
								}
							});
						}

						//RUN FUNCTION
						pageCenter();
						postsCenter();
						galleryCheck();
						postOverflowCheck();
						letMyPeopleScroll();
						scrollOnce();

						setTimeout(postsCenter, 1);
					});

				} else {

					//LOADING NOTICE
		    		loadingPage.stop().fadeOut(800);

		    		//404 ERROR
		    		alert('Nothing found.');

				}//END CONTENT CHECK
	   		});//END AJAX LOAD
   		});//END LOADING FADE IN

		return false;
	}//END IF PROPER SITE LINK
});

If you have AJAX turned off, simply adding the necessary facebook markup to header.php should be sufficient. Just be sure to use proper WordPress Conditional Tags to determine which page is being viewed so that you can customize the content that is provided in the meta tags.

Hope that helps!

Best,

Christopher

Chris, can you explain how and where post navigation in videos page is handeled? I need to intercept current url, get the postid and put info from post in header to change meta tags for facebook and twitter.

How do I know which post to take with url http://mysite.com/page/2/

This should all be done in header.php so the facebook and twitter can get correct data.