Embedding HTML, JavaScript or PHP Code on a Page

Category
Drupal Version

The Easy Way for IFRAME and JavaScript Embeds

If your site uses multiple roles so that your content editors do not have full administrator privileges, then the easy way may be all you need:

The "Full HTML" format on an out-of-the-box installation of Drupal 8, or on Drupal 7 with CKEditor installed without the WYSIWYG plugin should already allow for IFRAME embeds and JavaScript embeds.  If you haven't added any tools to restrict this, then you're all set.

For more restrictive CKEditor configurations, such as the GT Editor version of CKEditor for Drupal 7, you'll need to add a new text format (Configuration -> Content authoring -> Text formats and editors) that at a minimum allows IFRAME embeds.  If the service you want to embed from also requires you to include a snippet of JavaScript, then you'll need to enable that for your new text format as well.  You'll then want to restrict this format to site administrators (which should hopefully be a separate role from that of your site's day-to-date content creators and editors).  You can then add blocks where needed and use this new text format so that you can add your embed code to the block.

The Absolutely Wrong Way for PHP Code

Do not try to use the PHP Code Filter module under any circumstances!  This module used to let you put PHP Code directly into CKEditor and have it get processed when the page is displayed.  It is very unsafe and can't even be turned on in Drupal 7 unless you upgraded to Drupal 7 from an earlier version that had it turned on.  In addition, the module has been completely removed from Drupal 8.  If you are already using this method for custom PHP, you should look into switching to one of the following methods as soon as possible.

The Preferred Way for PHP Code

By far, the recommended way of adding custom PHP Code to a page of a Drupal site is by creating a custom module, which is a type of plugin that adds extra functionality to your Drupal site.  This does require a reasonable amount of PHP coding experience and time to get familiar with how to code for Drupal.  The Drupal organization has made some tutorials available to help get you started:

For a lot of cases, the right approach is to create a module that implements its own dynamic block(s).  These will act like a custom block that you create in the Block Layout interface, only the content will be generated by your module instead of being entered through the Drupal user interface.  Thus, you could implement a block that has your external embed code or custom PHP code output as its content, then place that block on whichever page you want the output to show.

The Alternate Method (PHP, IFRAMEs, JavaScript) (Drupal 7)

The following method is a little more round-about, but doesn't require as much coding knowledge as the previous method.  The main downside is that it may be difficult for someone in the future to figure out where your custom PHP or embed code has been stored, since this is a non-standard and uncommon method.  It also sort of goes against design standards, which say that template files really should not contain any actual content, but rather should contain framework for content provided to them by the system using that template.

  1. Create a normal block (not a Super block!), and don't type anything other than spaces into the Body field.
  2. Write down the block's ID number, which will show in the URL after you save the block and go back to that block's "Configure" page. For example, in the URL http://example.gatech.edu/admin/structure/block/manage/block/30/configure, the block id is the number between "block" and "configure", in this case, 30.
  3. Add this block to a page on your site, preferably a test page that no one will find, and keep that page open in your web browser.
  4. In the subtheme for your site, usually within its "templates" folder, create a file that will only effect this specific block.  For our example block #30, the file would be named block--block--30.tpl.php
  5. Inside this file, first paste the code for a generic block template file (Drupal 7) from the View source sub-section of the File section of the Drupal block API documentation page (Abbreviated source example copied below).
  6. If you want to completely overwrite what people might type into the Body field of this block, then replace the <?php print $content ?> line. Otherwise, decide if your embed code should appear below or above whatever the Body field's content.

Sample Block Template Code (Drupal 7)

<?php

/**
 * @file
 * Default theme implementation to display a block.
 * For variables definition, visit:
 * https://api.drupal.org/api/drupal/modules!block!block.tpl.php/7
 */
?>
<div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>

  <?php print render($title_prefix); ?>
<?php if ($block->subject): ?>
  <h2<?php print $title_attributes; ?>><?php print $block->subject ?></h2>
<?php endif;?>
  <?php print render($title_suffix); ?>

  <div class="content"<?php print $content_attributes; ?>>
    <!-- DELETE PRINT LINE BELOW IF OVERWRITING BODY OF BLOCK -->
    <?php print $content ?>
    <!-- START EMBED CODE HERE -->
    <!-- END EMBED CODE HERE -->
  </div>
</div>