), elements using an ID, and classes if you use a '.' to prefix the class name.
Usage to remove our postData tag that indicates that LD+Json is being used: removeStr(value, "postData")
Usage to remove the 'foo' class from a string: removeStrBetween(str, '.foo');
*/
var removeStrBetween = function(str, selector) {
// Create a new container to operate on
var wrapped = $("
" + str + "
");
// Remove the content between the tags.
wrapped.find(selector).remove();
// Return it
return wrapped.html();
}
// Function to truncate and add an elipsis if the text exceeds a certain value
function truncateWithEllipses(text, max) {
return text.substr(0,max-1)+(text.length>max?'...':'');
}
function stripHtml(html){
html.replace(/<[^>]*>?/gm, '');
return html;
}
// Determine if a string has a space
function hasWhiteSpace(s) {
const whitespaceChars = [' ', '\t', '\n'];
return whitespaceChars.some(char => s.includes(char));
}
// ColdFusion like string functions
// ReplaceNoCase, scope is either 'all' or 'one'.
// Gregory Alexander
function replaceNoCase(string,subString,replacement, scope){
if (scope == 'all'){
// i is a RegEx ignore case flag, g is global flag
var regEx = new RegExp(subString, "ig");
} else {
// i is an RegEx ignore case flag
var regEx = new RegExp(subString, "i");
}
// i is an ignore case flag, g is global flag
var regEx = new RegExp(subString, "ig");
var result = string.replace(regEx, replacement);
return result;
}
// ColdFusion like list functions
function listLen(list, delimiter){
// Gregory Alexander
if(delimiter == null) { delimiter = ','; }
var thisLen = list.split(delimiter);
return thisLen.length;
}
function listGetAt(list, position, delimiter, zeroIndex) {
// Gregory Alexander
if(delimiter == null) { delimiter = ','; }
if(zeroIndex == null) { zeroIndex = true; }
list = list.split(delimiter);
if(list.length > position) {
if(zeroIndex){
// Better handling for JavaScript arrays
return list[position];
} else {
// Handles like the CF version without a zero-index
return list[position-1];
}
} else {
return 0;
}
}
function listFind(list, value, delimiter) {
// Adapted from a variety of sources by Gregory Alexander
var result = 0;
if(delimiter == null) delimiter = ',';
list = list.split(delimiter);
for ( var i = 0; i < list.length; i++ ) {
if ( value == list[i] ) {
result = i + 1;
return result;
}
}
return result;
}
// Compares two lists of comma seperated strings. Used to determine if the selected capabilities match the default capabilities for a given role. Function based on the listCompare method found in cflib.
function listCompare(string1, string2){
// Adapted from a variety of sources by Gregory Alexander
var s = string1.split(",");
for(var k = 0 ;k < s.length; k++){
if(string2.indexOf("," + s[k] + ",") ){
return true;
}
}
return false;
}
// Adds a value to a comma separated list. Will not add the value if the list already contains the value.
function listAppend(list, value) {
// Adapted from a variety of sources by Gregory Alexander
var re = new RegExp('(^|\\b)' + value + '(\\b|$)');
if (!re.test(list)) {
return list + (list.length? ',' : '') + value;
}
return list;
}
// Removes a value to a comma separated list. Based on the ListDeleteValue function by Ben Nadel CF fuction https://gist.github.com/bennadel/9753040
var listDeleteValue = function(list, value){
// Adapted from a variety of sources by Gregory Alexander
var values = list.split(",");
for(var i = 0 ; i < values.length ; i++) {
if (values[i] == value) {
values.splice(i, 1);
return values.join(",");
}
}
return list;
}
// URL functions
//
// parseUri 1.2.2
// (c) Steven Levithan
// MIT License
/*
Splits any well-formed URI into the following parts (all are optional):
----------------------
- source (since the exec method returns the entire match as key 0, we might as well use it)
- protocol (i.e., scheme)
- authority (includes both the domain and port)
- domain (i.e., host; can be an IP address)
- port
- path (includes both the directory path and filename)
- directoryPath (supports directories with periods, and without a trailing backslash)
- fileName
- query (does not include the leading question mark)
- anchor (i.e., fragment) */
function parseUri (str) {
var o = parseUri.options,
m = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
uri = {},
i = 14;
while (i--) uri[o.key[i]] = m[i] || "";
uri[o.q.name] = {};
uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
if ($1) uri[o.q.name][$1] = $2;
});
return uri;
};
parseUri.options = {
strictMode: false,
key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
q: {
name: "queryKey",
parser: /(?:^|&)([^&=]*)=?([^&]*)/g
},
parser: {
strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
}
};
How to make the perfect social media sharing image - part 6 Validation tools and tips
In this last post in this series, I will provide links to some social image sharing validator tools and provide a few tips and tricks that I learned along the way. After creating the proper social media images and fine-tuning the social media meta tags that are required, you can validate how each site will display your page using the tools below. Facebook Sharing DebuggerThe Facebook Sharing Debugger will validate your og meta tags and scrape the social media image. it's relatively straightforward to use. Just enter the URL of the page that you want to validate, and the debugger will scrape your page and show you if any errors were made. When you first enter the URL, it will take several seconds to generate the page, and if this page was not shared before, it will prompt you to fetch new information. Click on the button to fetch new information, and the debugger will list out data along with error information. The debugger will not immediately generate the Facebook sharing preview as it is crawling your page in the background, wait several minutes and refresh the page, and the image preview should be displayed. If you have errors indicating that you have missing tags, you can ignore these, as long as you have all of the essential tags. If you don't like the look of the images, you can make some changes, but come back here and regenerate the preview on the pages that you have shared the URL. If you're using Galaxie Blog, I have a utility tool in /common/utilities/cfimage.cfm that will allow you to reprocess the images quickly. For non-Galaxie Blog users, I have provided instructions below, and I placed the utility script on Git hub. Twitter Card ValidatorThe Twitter Card Validator is a bit easier to use, and it responds faster than the Facebook Sharing Debugger. Like Facebook, all that you need is to input your URL. After entering the URL, Twitters tool should immediately display your page preview. However, it is not easy to change the appearance of the preview after it has been made. I'll show you some tricks to re-create the preview. How to Regenerate a Twitter PreviewTwitter will cache your preview once the page has been shared, or a Twitter Card Preview has been made. However, it can be quite problematic to refresh the cache once made. I learned a few tricks and will show you a bulletproof way to change your preview if you have to make any changes. Go to the Twitter Open Graph meta tags in your page. Append something unique on the twitter:image tag like so. If you're using ColdFusion you can simply create a UUID. Other languages have the same capabilities. All you need to do is make sure that the URL is unique.
meta name="twitter:image" content="https://gregoryalexander.com/blog/enclosures/twitter/toby.jpg?id=#createUuid()#"
Once you have made the URL to the image unique, Twitter thinks that you have changed the image entirely, and will clear the cache and refresh the preview. Note: you'll have to get a Facebook and Twitter Developer Account to use these tools. Creating Social Media ImagesI have put a cfimage.cfm templateon GitHub for you to generate Social Media Images. I use this to generate social media images for my older posts. The usage is pretty simple. Upload the cfimage file to your server. then drop the original image in a enclosures folder, and create two new folders within the enclosures folder named twitter and facebook. In the socialMediaImagePath variable, put in the full image path for the type of image that you want to create. Go to the URL of your cfimage.cfm template with a browser, and the images will be saved underneath the '/enclosures/facebook' or '/enclosures/twitter' folders.
<!-- This is the only line that you should adjust --->
<cfset socialMediaImagePath="D:homegregorysblog.orgwwwrootenclosuresDSC_0518.JPG">
<!-- Consume the createSocialMediaImages(socialMediaImagePath, socialMediaImageType) function --->
<cfset createSocialMediaImages(socialMediaImagePath,="" 'facebook',="" '')="">
<cfset createSocialMediaImages(socialMediaImagePath,="" 'twitter',="" '')="">
Other Social Media ValidatorsThere are other tools for validation for different media platforms, such as Twitters Post Inspector, and Pinterest Rich Pin's Validatorthat I will cover at a different time. Happy Coding!
Hi, my name is Gregory! I have several degrees in computer graphics and multimedia authoring, and I have been developing enterprise web applications for the last 25 years. I love web technologies and the outdoors and am passionate about giving back to the community.
This entry was posted on October 28, 2019 at 1:29 PM and has received 3609 views.