Tutorial : Social Media Icons Supplement
Submitted by jwheat on Tue, 12/16/2014 - 09:49
Click Add New Left Supplement
Social Media Icons Supplement
[UPDATE {April 24,2015} : Kris Hardy, with the Messiah College web team, released a video today showing how to use the Social Media Supplement on your site here]
[IMPORTANT NOTE: I recommend pulling down the code from github and follow along. This blog content editor doesn't appreciate the open php tag, so I've added a space in the tag, so some blocks below will not work if you copy/paste them. Sorry about that.]
I found it difficult to find help for building supplements, so when I was asked by our web team to build one for them, I decided to turn it into a tutorial and documentation. I've learned many things along the way - and here is that journey.
[UPDATE {April 24,2015} : Kris Hardy, with the Messiah College web team, released a video today showing how to use the Social Media Supplement on your site here]
[IMPORTANT NOTE: I recommend pulling down the code from github and follow along. This blog content editor doesn't appreciate the open php tag, so I've added a space in the tag, so some blocks below will not work if you copy/paste them. Sorry about that.]
I found it difficult to find help for building supplements, so when I was asked by our web team to build one for them, I decided to turn it into a tutorial and documentation. I've learned many things along the way - and here is that journey.
This tutorial will help you build the Social Media Icon Supplement. You can download and install the Plug-N-Play Supplement from github.
The steps below walk you through all the code and setup needed to get this working in your Jadu CMS. The code blocks below will have minimal comments, and no comment blocks. If you want the comment blocks for the class, you can download the entire project from the JaduDev github account.
So lets get started.
The first thing to know, and it quite obvious if you give it any thought is that there are 2 separate builds for a supplement. The first being the CMS admin screens that actually setup and configure a supplement. The second, is the code that displays the supplement to the screen as part of your website.
We’ll start with the CMS admin screens and database code, because without it there’s nothing to display.
Since we’ll be creating a way to store a list of say a department's social media sites, we need to save them somewhere, so we’ll create the supporting database table in our Jadu Database. I’ll keep in line with the recommended custom development conventions throughout this tutorial, which include’s both the naming of objects as well as the placement on the server of files.
Something I learned the hard way is that each supplement MUST have a title. The control panel uses this to display them in a list, and too many things break if there is no title.
Step 1 : create database table : CustomSocialMediaIcons
Step 2 : database interaction class file
Create a .php file that will contain our class and place it in /jadu/custom/supplements
Since this class file’s purpose is to interact with the database, we’ll name it the same as our database table : CustomSocialMediaIcons.php
This class will contain all the methods that interact with the database table we created above.
In our new CustomSocialMediaIcons.php file we need some basic setup and includes :
define("SOCIALMEDIAICONS_SUPPLEMENT_TABLE", "CustomSocialMediaIcons"); include_once("JaduADODB.php"); include_once("JaduCache.php"); include_once("websections/JaduPageSupplements.php");
This sets a constant we’ll use throughout the class as well as some important Jadu libraries.
Below that we’ll set up the class :
class SocialMediaIcons {}
We’ll need to define some variables in our class file. If you’ve never built a “model” class file that mimics a database table, we essentially need a variable for each field in our table. Within the curly braces of our class above, add in our field variables. So the class section will look like this :
class SocialMediaIcons { var $id = -1; var $title = ''; var $url_facebook = ''; var $url_twitter = ''; var $url_vimeo = ''; var $url_youtube = ''; var $url_googleplus = ''; var $url_linkedin = ''; var $url_wordpress = ''; var $url_blogspot = '';}
By default, these are all public variables. (*Might be able to also list these like : public $id; ) which is more PHP standards-like, however, I'm following an out-of-the-box supplement as a basis for my code, so for now, we'll stick with this.
Also, typically when you have a class, you would nest the functions inside that class and call it with something like
$social_media_icons->whatever_function
or even
SocialMediaIcons::whatever_function
I’m mimicking how Jadu creates these supplements, so I’m going to have my functions outside the class. At this point the only reason I can think they did it this way is that it may be easier to access functions this way if needed, but I’m not sure, and I’ll revisit this at the end of the tutorial. [*I think I see why they did this - there is some core code that constructs a 'GET' function name derived from the class name, and then can execute it. This may not work if these are called "the proper way"]
This class will be used to not only interact with the database, but to display bits of data on the CMS Supplements screens, so we’ll include functions for that as well.
Some helper functions
fetchAllSocialMediaIconsSupplementsWithQuery($query, $limit = null, $offset = null)fetchSocialMediaIconsSupplementWithQuery($query)Create a new supplement
newSocialMediaIconsSupplement($SocialMediaIconsSupplement)Update a current supplement
updateSocialMediaIconsSupplement($SocialMediaIconsSupplement)Delete a supplement
deleteSocialMediaIconsSupplement($id)We’ll also need some other functions for the admin forms within the CMS to work properly.
countSocialMediaIconsSupplements($criteria = array())getSocialMediaIconsSupplement($id)getSocialMediaIconsSupplementByTitle($title)validateSocialMediaIconsSupplement($SocialMediaIconsSupplement)Building the functions
Lets start with the simple ones - Create (new), Update and Delete
Insert
Create or in this case “new”. We obviously want to do an insert into the table. Remember how we set the constant called SOCIALMEDIAICONS_SUPPLEMENT_TABLE, we’re going to use that all over now.
function newSocialMediaIconsSupplement($SocialMediaIconsSupplement) { global $db; $query = 'INSERT INTO ' . SOCIALMEDIAICONS_SUPPLEMENT_TABLE . ' ' .'(title, url_facebook,url_twitter,url_vimeo,url_youtube,url_googleplus,
url_linkedin,url_wordpress,url_blogspot
) VALUES (' . $db->qstr($SocialMediaIconsSupplement->title) . ',' . $db->qstr($SocialMediaIconsSupplement->url_facebook) . ',' . $db->qstr($SocialMediaIconsSupplement->url_twitter) . ',' . $db->qstr($SocialMediaIconsSupplement->url_vimeo) . ',' . $db->qstr($SocialMediaIconsSupplement->url_youtube) . ',' . $db->qstr($SocialMediaIconsSupplement->url_googleplus) . ',' . $db->qstr($SocialMediaIconsSupplement->url_linkedin) . ',' . $db->qstr($SocialMediaIconsSupplement->url_wordpress) . ',' . $db->qstr($SocialMediaIconsSupplement->url_blogspot) . ')'; $db->Execute($query); $id = $db->Insert_ID(); if ($id > 0) {deleteTableCache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE);
}
return (int) $id; }
Jadu has an intricate caching system where files and database tables are cached. You’ll notice that after we insert the new record, we need to refresh (delete) the cache for this database table so the new values are presented to the CMS properly.
Update an existing supplement
function updateSocialMediaIconsSupplement($SocialMediaIconsSupplement) { global $db; $query = 'UPDATE ' . SOCIALMEDIAICONS_SUPPLEMENT_TABLE . ' SET ' . 'title = ' . $db->qstr($SocialMediaIconsSupplement->title) . ',' . 'url_facebook = ' . $db->qstr($SocialMediaIconsSupplement->url_facebook) . ', ' . 'url_twitter = ' . $db->qstr($SocialMediaIconsSupplement->url_twitter) . ', ' . 'url_vimeo = ' . $db->qstr($SocialMediaIconsSupplement->url_vimeo) . ', ' . 'url_youtube = ' . $db->qstr($SocialMediaIconsSupplement->url_youtube) . ', ' . 'url_googleplus = ' . $db->qstr($SocialMediaIconsSupplement->url_googleplus) . ', ' . 'url_linkedin = ' . $db->qstr($SocialMediaIconsSupplement->url_linkedin) . ', ' . 'url_wordpress = ' . $db->qstr($SocialMediaIconsSupplement->url_wordpress) . ', ' . 'url_blogspot = ' . $db->qstr($SocialMediaIconsSupplement->url_blogspot) . ' ' . 'WHERE id = ' . intval($SocialMediaIconsSupplement->id); $db->Execute($query); $affectedRows = $db->Affected_Rows(); if ($affectedRows > 0) {deleteTableCache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE);
}
return (bool) $affectedRows;}
Deleting a supplement
function deleteSocialMediaIconsSupplement($id) { global $db; $query = 'DELETE FROM ' . SOCIALMEDIAICONS_SUPPLEMENT_TABLE . ' ' . 'WHERE id = ' . intval($id); $db->Execute($query); $affectedRows = $db->Affected_Rows(); if ($affectedRows > 0) { // Delete all supplements referencing this record deletePageSupplementForRecord($id);deleteTableCache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE);
}
return (bool) $affectedRows;}
Helper functions
Build the query helper function
function buildSocialMediaIconsSupplementQuery($criteria = array(), $order = array(),$count = false) { global $db; $whereClause = ''; if (isset($criteria['id'])) { $whereClause .= (empty($whereClause) ? 'WHERE' : 'AND') . ' id = ' . intval($criteria['id']) . ' ';}
if (isset($criteria['title'])) { $whereClause .= (empty($whereClause) ? 'WHERE' : 'AND') . ' title = ' . $db->qstr($criteria['title']) . ' ';}
if (isset($criteria['except'])) { if (!is_array($criteria['except'])) { $criteria['except'] = array($criteria['except']);}
$whereClause .= (empty($whereClause) ? 'WHERE' : 'AND') . ' id NOT IN (' . implode(',', array_map('intval', $criteria['except'])) . ') ';}
$orderClause = ''; // Build the query string if ($count) { $query = 'SELECT COUNT(*) AS numRows ';}
else { $query = 'SELECT id, title,url_facebook,url_twitter,url_vimeo,url_youtube,url_googleplus,url_linkedin,url_wordpress,url_blogspot'; // Order by if (is_string($order)) { $order = array($order);}
if (count($order) > 0) { $orderClause = 'ORDER BY ' . implode(',', $order) . ' ';}
else { $orderClause = 'ORDER BY title ASC';}
}
$query .= 'FROM ' . SOCIALMEDIAICONS_SUPPLEMENT_TABLE . ' ' . $whereClause . $orderClause; return $query;}
Fetch with Query
function fetchSocialMediaIconsSupplementWithQuery($query) { global $db; $cache = new Cache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE, $query); if ($cache->isEmpty()) { $supplement = new SocialMediaIcons(); $result = $db->SelectLimit($query, 1); if ($result && !$result->EOF) { $supplement->id = (int) $result->fields['id']; $supplement->title = $result->fields['title']; $supplement->url_facebook = $result->fields['url_facebook']; $supplement->url_twitter = $result->fields['url_twitter']; $supplement->url_vimeo = $result->fields['url_vimeo']; $supplement->url_youtube = $result->fields['url_youtube']; $supplement->url_googleplus = $result->fields['url_googleplus']; $supplement->url_linkedin = $result->fields['url_linkedin']; $supplement->url_wordpress = $result->fields['url_wordpress']; $supplement->url_blogspot = $result->fields['url_blogspot'];}
$cache->setData($supplement); return $supplement;}
return $cache->data; }
Fetch all supplements
function fetchAllSocialMediaIconsSupplementsWithQuery($query, $limit = null, $offset = null) { global $db; $cacheId = $query; if ($limit !== null) { $cacheId .= ' LIMIT ' . (int) $limit . ',' . (int) $offset;}
$cache = new Cache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE, $cacheId); if ($cache->isEmpty()) { if ($limit === null) { $result = $db->Execute($query);}
else { $result = $db->SelectLimit($query, $limit, $offset);}
$supplements = array(); if ($result) { while (!$result->EOF) { $supplement = new SocialMediaIcons(); $supplement->id = (int) $result->fields['id']; $supplement->title = $result->fields['title']; $supplement->url_facebook = $result->fields['url_facebook']; $supplement->url_twitter = $result->fields['url_twitter']; $supplement->url_vimeo = $result->fields['url_vimeo']; $supplement->url_youtube = $result->fields['url_youtube']; $supplement->url_googleplus = $result->fields['url_googleplus']; $supplement->url_linkedin = $result->fields['url_linkedin']; $supplement->url_wordpress = $result->fields['url_wordpress']; $supplement->url_blogspot = $result->fields['url_blogspot']; $supplements[] = $supplement; $result->MoveNext();}
}
$cache->setData($supplements); return $supplements;}
return $cache->data; }
Get All Supplements configured
function getAllSocialMediaIconsSupplements($criteria = array(), $order = array(), $limit = null, $offset = null) { $query = buildSocialMediaIconsSupplementQuery($criteria, $order); return fetchAllSocialMediaIconsSupplementsWithQuery($query, $limit, $offset); }
Count them (for later)
function countSocialMediaIconsSupplements($criteria = array()) { global $db; $query = buildSocialMediaIconsSupplementQuery($criteria, array(), true); $cache = new Cache(SOCIALMEDIAICONS_SUPPLEMENT_TABLE, $query); if ($cache->isEmpty()) { $count = 0; $result = $db->Execute($query); if ($result && !$result->EOF) { $count = (int) $db->GetOne($query);}
$cache->setData($count); return $count;}
return $cache->data; }
Just get 1 supplement this time by ID -
This method name MUST BE NAMED “get” + ClassName. Code located in /jadu/websections/JaduPageSupplements.php assembles the get call based on the class name. If you do not have a class with this name, you can not edit a supplement you’ve added to a page.
function getCustomSocialMediaIcons($id) { $query = buildSocialMediaIconsSupplementQuery(array('id' => $id)); return fetchSocialMediaIconsSupplementWithQuery($query); }
Just get 1 by title
function getSocialMediaIconsSupplementByTitle($title) { $query = buildSocialMediaIconsSupplementQuery(array('title' => $title)); return fetchSocialMediaIconsSupplementWithQuery($query); }
Validate the ADMIN Screen on creation / update. The code below only verifies that there is a title present since all other fields are optional. I’ve added a commented block to demonstrate what you would do if you want to require other form fields.
function validateSocialMediaIconsSupplement($SocialMediaIconsSupplement) { $errors = array(); if (empty($SocialMediaIconsSupplement->title)) { $errors['title'] = true;}
else { $numSupplements = countSocialMediaIconsSupplements(array( 'title' => $SocialMediaIconsSupplement->title, 'except' => $SocialMediaIconsSupplement->id));
if ($numSupplements > 0) { // Title must be unique $errors['title'] = true;}
}
/**
* If you want more validation use a block like this and change the database field * and object variable name*
* if (empty($SocialMediaIconsSupplement->description)) { * $errors['description'] = true;* }
*/
return $errors; }
That’s all for this class file. We have all of our functions for the CMS Supplement form to interact with the database. Now lets build the actual form that you (or the users) will use to create, edit and delete supplements.
Building the Control Panel CMS Form
Our control panel php page can go anywhere on our server, however, I’ll stick with the convention and we’ll create a new file and place it in /public_html/jadu/custom/supplements
The naming convention Jadu uses flips from CamelCase to lower/underscores with an additional suffix of "_include" We’ll name our file this way too just to stay consistent. If you hadn’t gathered yet, this file will be included into the control panel supplement page, so there’s no direct access linking to this, and the file is named _include to help us remember that later.
custom_social_media_icons_include.php
This will, as said above will be the control panel page that displays when a user selects Social Media Icons from the supplement type select box.
We’ll start out our page with some default Jadu setup
// Disallow direct access to this script. Should be include only if ($_SERVER['PHP_SELF'] == '/jadu/websections/' . __FILE__) { exit;}
require_once('websections/JaduPageSupplements.php'); require_once('websections/JaduPageSupplementLocations.php'); require_once('websections/JaduPageSupplementWidgetPublicCode.php'); require_once($widget->classFile);This section just eliminates any direct access to this include file.
Next, we’ll grab any locations where this supplement can be placed from a Jadu function called gatAllSupplementLocations - brilliant name eh?
$locations = getAllSupplementLocations();Now we check to see if we’re pulling up an existing supplement or creating a new one and instantiate the class if its new.
if ($supplementRecordID > 0) { $socialMediaIconsSupplement = getCustomSocialMediaIcons($supplementRecordID);}
else { $socialMediaIconsSupplement = new SocialMediaIcons();}
Next we’ll check to see if we’re posting (saving) the form and process any data entered, this is a big block of code so here's the rundown of what we need to accomplish :
- get all values entered on the form (that we haven’t created yet), and add them to the object, then validate it
- determine where on the page it’ll go and make sure that location is valid
- if there are no errors, create or update it depending on what we’re doing
- deal with the supplement categories that may have been assigned
- reorder supplements if necessary
- redirect back to the supplement list
if (isset($_POST['save'])) { $socialMediaIconsSupplement->title = isset($_POST['title']) ? $_POST['title'] : $socialMediaIconsSupplement->title; $socialMediaIconsSupplement->url_facebook = isset($_POST['url_facebook']) ? $_POST['url_facebook'] : $socialMediaIconsSupplement->url_facebook; $socialMediaIconsSupplement->url_twitter = isset($_POST['url_twitter']) ? $_POST['url_twitter'] : $socialMediaIconsSupplement->url_twitter; $socialMediaIconsSupplement->url_vimeo = isset($_POST['url_vimeo']) ? $_POST['url_vimeo'] : $socialMediaIconsSupplement->url_vimeo; $socialMediaIconsSupplement->url_youtube = isset($_POST['url_youtube']) ? $_POST['url_youtube'] : $socialMediaIconsSupplement->url_youtube; $socialMediaIconsSupplement->url_googleplus = isset($_POST['url_googleplus']) ? $_POST['url_googleplus'] : $socialMediaIconsSupplement->url_googleplus; $socialMediaIconsSupplement->url_linkedin = isset($_POST['url_linkedin']) ? $_POST['url_linkedin'] : $socialMediaIconsSupplement->url_linkedin; $socialMediaIconsSupplement->url_wordpress = isset($_POST['url_wordpress']) ? $_POST['url_wordpress'] : $socialMediaIconsSupplement->url_wordpress; $socialMediaIconsSupplement->url_blogspot = isset($_POST['url_blogspot']) ? $_POST['url_blogspot'] : $socialMediaIconsSupplement->url_blogspot; // Validate the supplement $errors = validateSocialMediaIconsSupplement($socialMediaIconsSupplement); if ($editType == 'supplement' || $_GET['contentType'] != '') { // Get the location and validate it, only for supplement editing though $locationOnPage = isset($_POST['locationOnPage']) ? strtolower($_POST['locationOnPage']) : ''; $locationIsValid = false; if ($locationOnPage != '') { foreach ($locations as $location) { if (strtolower($location->title) == $locationOnPage) { $locationIsValid = true;}
}
}
if (!$locationIsValid) { $errors['locationOnPage'] = true;}
}
if (count($errors) == 0) { if ($socialMediaIconsSupplement->id < 1) { $socialMediaIconsSupplement->id = newSocialMediaIconsSupplement($socialMediaIconsSupplement);}
else { updateSocialMediaIconsSupplement($socialMediaIconsSupplement);}
if ($editType == 'supplement' || $_GET['contentType'] != '') { deleteAllCategoriesForSupplement($socialMediaIconsSupplement->id); $supplementCategory = new SupplementCategory(); $supplementCategory->categoryID = getFirstCategoryIDForItemOfType ($contentTypeCatTable, ($contentType == 'document')?$documentID:$itemID); $supplementCategory->supplementRecordID = $socialMediaIconsSupplement->id; $supplementCategory->supplementWidgetID = $widget->id; newSupplementCategory($supplementCategory); if ($pageSupplement->id > 0) { if ($pageSupplement->locationOnPage != $locationOnPage) { // Get the new position for the new location $pageSupplement->position = getMaxPageSupplementPosition($pageSupplement->contentType, $pageSupplement->itemID, $locationOnPage); // Reorder the remaining supplements at the old location fixPageSupplementPositions($pageSupplement->contentType, $pageSupplement->itemID); $pageSupplement->locationOnPage = $locationOnPage;}
$pageSupplement->supplementRecordID = $socialMediaIconsSupplement->id; updatePageSupplement($pageSupplement);}
else { $pageSupplement = new PageSupplement(); $pageSupplement->contentType = $contentType; $pageSupplement->itemID = $itemID; $pageSupplement->supplementWidgetID = $widget->id; $pageSupplement->supplementRecordID = $socialMediaIconsSupplement->id; $pageSupplement->locationOnPage = $locationOnPage; $pageSupplement->id = newPageSupplement($pageSupplement);}
header('Location: supplement_list.php?contentType=' . $pageSupplement->contentType . '&itemID=' . $pageSupplement->itemID . '&location=' . $pageSupplement->locationOnPage . '&statusMessage=' . urlencode('Supplement saved')); exit;}
else { header('Location: supplement_record_list.php?widgetID=' . $widget->id . '&statusMessage=' . urlencode('Supplement saved')); exit;}
}
}
Now, provided we’ve selected to create a new supplement, we’ll do a different set it items, including display the control panel form
Since we’re dealing with HTML here, the code will jump in and out of PHP so I apologize for all the extra php tags here.
We’ll get all the supplements that have been built to display them in the list, and set an image directory location for our icons we’ll display in the form.
$supplementRecords = getAllSocialMediaIconsSupplements(array()); $imageDirectory = $SECURE_SERVER . '/images/';Next check for any errors and display them if necessary
// The start of the table is output before this script is included so error message is always output but hidden if (isset($errors) && count($errors) > 0) {?> <script type="text/javascript"> $('validate_mssg').show(); </script>< ?php
}
Here’s the big section where we display our form code. This is in a table, so I’ll go row by row to make it easier to comprehend
Starts off with a giant IF statement. Since we’re in the Supplement control panel, I’m not sure why this exists, but I’m sure there’ a good damn reason, so we’ll leave it.
The first row here lets you select an existing supplement that has already been configured that you can edit. This is why its imperative we have a title field, otherwise the select list is empty making it a bit difficult to choose.
if ($editType == 'supplement' || (isset($_GET['contentType']) && $_GET['contentType'] != '')) {?> <tr> <td class="generic_desc"><em><?php print $stepCounter++; ?>.</em> <p>Select existing</p></td> <td class="generic_action"> <select class="select" onchange="selectNav(this);"> <option value="supplement_details.php?supplementRecordID=-1&supplementID=-1&widgetID=<? php print (int) $widget->id; ?>&contentType=<? php print encodeHtml($contentType); ?>&itemID=<? php print (int) $itemID; ?>&location=<? php print encodeHtml($locationOnPage); ?>">Create new supplement</option><? php foreach ($supplementRecords as $supplementRecord) { if (adminCanAccessSupplement($supplementRecord->id, $adminID)) { $selected = ''; if ($supplementRecordID == $supplementRecord->id) { $selected = ' selected="selected"';}
?> <option value="supplement_details.php?supplementRecordID=<?php print (int) $supplementRecord->id; ?>&supplementID=<?php print (int) $pageSupplement->id; ?>&widgetID=<?php print (int) $widget->id; ?>&contentType=<?php print encodeHtml($contentType); ?>&itemID=<?php print (int) $itemID; ?>&location=<?php print encodeHtml($locationOnPage); ?>"<?php print $selected; ?>><?php print encodeHtml($supplementRecord->title); ?></option><? php}
}
?> </select> </td> </tr>The next row displays the page location select based on the values from our supplement record
<tr> <td class="generic_desc<? php if (isset($errors['locationOnPage'])) { ?>_error<? php } ?>"><em><?php print $stepCounter++; ?>.</em> <p>Placement</p></td> <td class="generic_action"> <select class="select" name="locationOnPage"><?php foreach ($locations as $locationItem) { $publicCode = getSupplementPublicCode($widget->id, $locationItem->title); if ($publicCode->id == -1) { continue;}
$selected = ''; if ((isset($_POST['save']) && $locationOnPage == strtolower($locationItem->title)) || ($pageSupplement->locationOnPage == strtolower($locationItem->title))) { $selected = ' selected="selected"';}
else if ($_GET['location'] == strtolower($locationItem->title)) { $selected = ' selected="selected"';}
?> <option value="<?php print encodeHtml($locationItem->title); ?>"<?php print $selected; ?>><?php print encodeHtml($locationItem->title); ?></option><? php}
?> </select> </td> </tr>Here we can set or edit our title if needed
<tr> <td class="generic_desc<? php if (isset($errors['title'])) { ?>_error<? php } ?>"><em><? php print $stepCounter++; ?>.</em> <p>Title*</p></td> <td class="generic_action"> <input type="text" name="title" value="<? php print encodeHtml($socialMediaIconsSupplement->title); ?>" class="field" /> </td> </tr>The next set of rows are all our social media urls, I’ve blocked them together because really there’s nothing special going on. They’re all text boxes, and setting the value to the object variables
<tr>
<td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Facebook URL</p></td>
<td class="generic_action">
<input type="text" name="url_facebook" value="<? php print encodeHtml($socialMediaIconsSupplement->url_facebook); ?>" class="field" />
</td>
</tr>
<tr>
<td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Twitter URL</p></td>
<td class="generic_action">
<input type="text" name="url_twitter" value="<? php print encodeHtml($socialMediaIconsSupplement->url_twitter); ?>" class="field" />
</td>
</tr>
<tr>
<td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Vimeo URL</p></td>
<td class="generic_action">
<input type="text" name="url_vimeo" value="<? php print encodeHtml($socialMediaIconsSupplement->url_vimeo); ?>" class="field" />
</td>
</tr>
<tr>
<td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>YouTube URL</p></td>
<td class="generic_action">
<input type="text" name="url_youtube" value="<? php print encodeHtml($socialMediaIconsSupplement->url_youtube); ?>" class="field" />
</td>
</tr>
<tr>
<td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Google Plus URL</p></td>
<td class="generic_action">
<input type="text" name="url_googleplus" value="<? php print encodeHtml($socialMediaIconsSupplement->url_googleplus); ?>" class="field" />
</td>
</tr>
<tr>
<td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>linkedIn URL</p></td>
<td class="generic_action">
<input type="text" name="url_linkedin" value="<? php print encodeHtml($socialMediaIconsSupplement->url_linkedin); ?>" class="field" />
</td>
</tr>
<tr>
<td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Wordpress URL</p></td>
<td class="generic_action">
<input type="text" name="url_wordpress" value="<? php print encodeHtml($socialMediaIconsSupplement->url_wordpress); ?>" class="field" />
</td>
</tr>
<tr>
<td class="generic_desc"><em><? php print $stepCounter++; ?>.</em> <p>Blogspot URL</p></td>
<td class="generic_action">
<input type="text" name="url_blogspot" value="<? php print encodeHtml($socialMediaIconsSupplement->url_blogspot); ?>" class="field" />
</td>
</tr>
With this page complete, we can now create a database record - the final setup step for our supplement so it will be recognized by Jadu
Add a record to the JaduPageSupplementWidgets by running this sql
Now tell Jadu where the allowed regions are for this supplement to be and specify the front end code’s filename without the extension. It looks by default in the /site/includes/supplements directory run this sql to set that up
When we go to Page Supplements form the Home Page Designer add a new Left supplement (or choose any valid location you decided on above)
Click Add New Left Supplement
In the Supplement Type select box, you’ll now see Social Media Icons listed
Now you’ll see our new form
Fill in the title and one of the options for now.
Build the Front End
/public_html/site/includes/supplements/custom_social_media_icons.php
First we’ll grab all the variables from the record and set php variables
require_once 'custom/CustomHelper.php'; if (isset($record)) { $title = trim(array_pop(explode('|', $record->title, 2))); $url_facebook = trim(array_pop(explode('|', $record->url_facebook, 2))); $url_twitter = trim(array_pop(explode('|', $record->url_twitter, 2))); $url_vimeo = trim(array_pop(explode('|', $record->url_vimeo, 2))); $url_youtube = trim(array_pop(explode('|', $record->url_youtube, 2))); $url_googleplus = trim(array_pop(explode('|', $record->url_googleplus, 2))); $url_linkedin = trim(array_pop(explode('|', $record->url_linkedin, 2))); $url_wordpress = trim(array_pop(explode('|', $record->url_wordpress, 2))); $url_blogspot = trim(array_pop(explode('|', $record->url_blogspot, 2)));then we’ll check each of these for a value and process the URL as needed. If the user leaves off http:// or https:// we’ll add https:// by default since most (all) sites use https now.
# facebook if ($url_facebook != "") { $has_http = stripos($url_facebook, "http",0); if (substr($url_facebook, 0,4) != "http") { $url_facebook = "https://" . $url_facebook;}
print "<a href='".$url_facebook."' target='_blank' title='Facebook'><img src='/images/social_media_supplement/facebook_supp.png' title='Twitter' /></a>";}
Do this for each url :
#twitter if ($url_twitter != "") { $has_http = stripos($url_twitter, "http",0); if (substr($url_twitter, 0,4) != "http") { $url_twitter = "https://" . $url_twitter;}
print "<a href='".$url_twitter."' target='_blank' title='Twitter'><img src='/images/social_media_supplement/twitter2_supp.png' alt='Twitter' /></a>";}
#vimeo if ($url_vimeo != "") { $has_http = stripos($url_vimeo, "http",0); if (substr($url_vimeo, 0,4) != "http") { $url_vimeo = "https://" . $url_vimeo;}
print "<a href='".$url_vimeo."' target='_blank' title='vimeo'><img src='/images/social_media_supplement/vimeo_supp.png' alt='vimeo' /></a>";}
#youtube if ($url_youtube != "") { $has_http = stripos($url_youtube, "http",0); if (substr($url_youtube, 0,4) != "http") { $url_youtube = "https://" . $url_youtube;}
print "<a href='".$url_youtube."' target='_blank' title='youtube'><img src='/images/social_media_supplement/youtube_supp.png' alt='youtube' /></a>";}
#googleplus if ($url_googleplus != "") { $has_http = stripos($url_googleplus, "http",0); if (substr($url_googleplus, 0,4) != "http") { $url_googleplus = "https://" . $url_googleplus;}
print "<a href='".$url_googleplus."' target='_blank' title='googleplus'><img src='/images/social_media_supplement/googlepluscolor_supp.png' alt='googleplus' /></a>";}
#linkedin if ($url_linkedin != "") { $has_http = stripos($url_linkedin, "http",0); if (substr($url_linkedin, 0,4) != "http") { $url_linkedin = "https://" . $url_linkedin;}
print "<a href='".$url_linkedin."' target='_blank' title='linkedin'><img src='/images/social_media_supplement/linkedin_supp.png' alt='linkedin' /></a>";}
#wordpress if ($url_wordpress != "") { $has_http = stripos($url_wordpress, "http",0); if (substr($url_wordpress, 0,4) != "http") { $url_wordpress = "https://" . $url_wordpress;}
print "<a href='".$url_wordpress."' target='_blank' title='wordpress'><img src='/images/social_media_supplement/wordpress_supp.png' alt='wordpress' /></a>";}
#blogspot if ($url_blogspot != "") { $has_http = stripos($url_blogspot, "http",0); if (substr($url_blogspot, 0,4) != "http") { $url_blogspot = "https://" . $url_blogspot;}
print "<a href='".$url_blogspot."' target='_blank' title='blogspot'><img src='/images/social_media_supplement/blogspot_supp.png' alt='blogspot' /></a>";}
} #end record checkSave that and then add the new supplement you created above to a page, and if all goes well, it should look like this :
Jadu Product:
Jadu Version: