Change Browser URL & Title without reloading (refreshing) page

Change browser URL & Title with out refreshing / reload the page.

Please see below link for more details.

http://www.aspsnippets.com/Articles/Change-Browser-URL-without-reloading-refreshing-page-using-HTML5-in-JavaScript-and-jQuery.aspx

Drupal template redirect

I have faced one challenge recently where we need to redirect from one custom node template to another one template.

• Created one template for custom content type (nature).
• node--nature.tpl.php. 
• node--my_nature.tpl.php (if your content type - my_nature: some time you will face this situation.)
• This content type has one taxonomy reference.
• For particular taxonomy reference(condition), we need to display different appearance (layout).
• So done below fix to redirect for different tpl.

When ever you visit nature content, you will be landed on node--nature.tpl.php.

Inside this tpl, I have used below condition to use different tpl file.

Example:

// Write below code inside node--natute.tpl.php on top of the file.
if (condition) {
 print theme('use_different_layout', array('node' => $node)); // pass argument if you need.
}
// Create different tpl file for "use_different_layout" theme by using hook_theme().

hook_theme() example.

function hook_theme() {
return array(
    'use_different_layout' => array(
      'variables' => array('node' => array()),
      'template' => 'templates/different-layout.tpl.php',
    ),
  );
}

Google Analytics to track AJAX requests

Recently I have faced one problem based on Google analytics.

• We were displaying slide show with node navigation.
• Means, for each next/prev click, we were displaying different page view. 
• Each page view contains, its own node(page) URL & title.
• Implemented below google analytics code to track each hits.
• But problem is, on ajax success or at next / prev click, we could not able to send new node details to google analytics.
• I have fixed that solution using below code.

1) Code will be available on each page reload.

I have placed below code at "html.tpl.php" , so that for each and every page load, it will send page details like node URL & title to google analytics.

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-56232568-1', 'auto');

ga('send', 'pageview');

</script>

2) Code for ajax success.

Use below code on ajax success or next/ prev slide success. So that on every ajax hit success, it will trigger page details based on below settings.

ga('send', 'pageview', {'page': 'send/your/site/url', 'title': 'some-page-tile-ajax-success'});

Note:
1. You should have valid google analytics account to get above script.
2. After creating your account, add your site.
3. It will take at least 24 hrs(Not exactly) to track your site. Don't expect immediate track after adding site.

Drupal social share - Service links

Service links is a Drupal module used to attach social share(like FB, Twitter, etc,..) icons on every pages.

I have attached one video URL ( Drupal 7 Service Links Module - Daily Dose of Drupal episode 103 ) here to get basic set up / Config about this module.

But if you want to attach this option on your custom tpl file / on ajax success. please follow the below steps.

1) Code to use in your tpl file.

$social_block = module_invoke('service_links', 'block_view', 'service_links');
print render($social_block['content']);

2) Code to use in ajax success / ajax call back function.

$social_load = block_load('service_links', 'service_links_not_node>>' . $node_id); // Drupal node ID.
$get_social_array = _block_get_renderable_array(_block_render_blocks(array($social_load)));
$get_social_block = render($get_social_array);

3) Below code used to attach meta details on page for SEO purpose.

$element = array( 
 '#tag' => 'meta',
 '#attributes' => array(
 'property' => 'og:url',
 'content' => 'node/url',
 ),
);
drupal_add_html_head($element, 'og_url');
$element = array(
 '#tag' => 'meta',
 '#attributes' => array(
 'property' => 'og:title',
 'content' => $node->title,
 ),
);
drupal_add_html_head($element, 'og_title');
// This code is to attach image on meta to share.
// Image wont be there on share if its missing.
$element = array(
 '#tag' => 'meta',
 '#attributes' => array(
 'property' => 'og:image',
 'content' => 'your/image/url',
 ),
);
drupal_add_html_head($element, 'og_image');
$element = array(
 '#tag' => 'meta',
 '#attributes' => array(
 'property' => 'og:description',
 'content' => 'some_description',
 ),
);
drupal_add_html_head($element, 'og_description');