Gregory's Blog

How to make a round Kendo UI button

How to make a round button with Kendo UI

Background

There are plenty of posts on the web showing you how to make a typical square button with Kendo UI, but I have not seen a post describing how to make a round Kendo button. Since there are no other posts that cover this, I had to learn this through trial and error.

If you're using Kendo, it is a good idea to try to use as many native Kendo widgets as possible as these widgets will be incorporated into the chosen Kendo theme. The reasons for this are simple, native Kendo widgets will perform and look the same and inherit the properties of the selected theme.

Border Radius 50% can make nearly every element round, including a normal Kendo button.

Using the border-radius: 50% CSS can make nearly any HTML into a circle. Indeed, it can also make a normal Kendo UI button into a circle. However, on the desktop, Kendo UI's button also has an outline around it's buttons, and the bottom part of the outline is larger than the upper part making the button look weird. Let's take a look:

view plain about
1#primaryTextButton {
2    height: 35px;
3    width: 35px;
4    border-radius: 50%;
5}
6<button id="primaryTextButton" class="k-primary">i</button> looks OK with mobile- but not so good on the desktop.

This button's outline looks weird. It only gets worse when the button becomes smaller.

A different approach

The code below is one method to make a round Kendo UI button widget using inline code. The id element can be anything. Here I am using the button to expand the comments for Galaxie Blog, so I am using the id of commentControl. The collapse class is also not important here.

What is important is the k-i-sort-desc-sm class, and k-primary. The k-i-sort-desc-sm is the Kendo UI icon that is being displayed, and the k-primary class indicates that the color of the button must be the primary color of the selected theme.

The width and height of the button are set by the width and height property, and the border-radius: 50% argument takes the width and height properties to make a circular button image.

view plain about
1<span id="commentControl" class="collapse k-icon k-i-sort-desc-sm k-primary" style="width: 35px; height:35px; border-radius: 50%;"></span>

This Kendo button takes on the primary color of the selected theme, and without the funny outline, it looks much better!

Comments

This entry was posted on December 13, 2019 at 2:24 PM and has received 50 views.

ColdFusion ORM Error - java.lang.Integer, etc.

Coldfusion orm java.lang.Int error

Background

I ran into an interesting error when working on converting Galaxie Blog's database to use ORM.

When importing data from the original database, I received a very cryptic ColdFusion ORM error coldfusion orm java.lang.String error error when trying to set the value of a foreign key. It was trying to set an int, and assumed that ColdFusion somehow was casting the int to a string. I manually set the value to an int, and still received the error, but this time received Coldfusion orm java.lang.Int error. This was perplexing. This should have worked as the foreign key expected an int.

Relevant property of BlogRef

view plain about
1<cfcomponent displayName="Users" persistent="true" table="Users" output="no" hint="ORM logic for the new Users table">
2    <cfproperty name="UserId" fieldtype="id" generator="native" setter="false">
3    <!--- Many users per blog. --->
4    <cfproperty name="BlogRef" ormtype="int" fieldtype="many-to-one" cfc="Blog" fkcolumn="BlogRef">

To try to understand what was going on- I kept on trying to change the datatype, but no matter what I set the datatype to, I would receive the same cryptic error. The only difference in the error is that the datatype java.lang.thisDataType error would change.

Even hardcoding the value to an int causes an error:

view plain about
1<!--- Load the entity. --->
2<cfset UserDbObj = entityNew("Users")>
3<!--- Use the entity objects to set the data. --->
4<cfset UserDbObj.setBlogRef(1)>

Results in: Coldfusion orm java.lang.Int error

What was even more perplexing is that I had successfully used the same code in previous blocks that had worked! I have just started down the ColdFusion ORM path and wondered what the hell have I gotten myself into.

After much research, it turns out that either ColdFusion ORM or Hibernate wants an object passed to a foreign key. Often times, ColdFusion may always raise this cryptic error if the value is set in any other way!

The following code finally solved this perplexing error:

view plain about
1<!--- Load the blog table and get the first record (at this time there only should be one record). This will pass back an object with the value of the blogId. This is needed as the setBlogRef is a foreign key and for some odd reason ColdFusion or Hibernate must have an object passed as a reference instead of a hardcoded value. --->
2<cfset BlogRefObj = entityLoadByPK("Blog", 1)>
3
4<!--- Load the entity. --->
5<cfset UserDbObj = entityNew("Users")>
6<!--- Use the BlogRefObj entity object to set the data. --->
7<cfset UserDbObj.setBlogRef( BlogRefObj )>

Further Reading

How do I store an integer using ColdFusion Orm? - by James Cushing

Comments

This entry was posted on November 28, 2019 at 10:30 AM and has received 180 views.

ColdFusion Orm, a fantastic book by John Whish

ColdFusion ORM, a fantastic book by John Whish

Background

I needed to learn ColdFusion ORM as ORM supports all of the modern databases that want Galaxie Blog to be able to support. I don't want to have to incorporate different SQL logic for every database. Coding everything by hand would be an immense task, and would be problematic to test. Using ColdFusion ORM would solve this dilemma and I could use a single codebase that would automatically translate the ORM logic across various database platforms. However, learning anything new that has such a large scope is a daunting task.

Enter John Whish's ColdFusion ORM book to the rescue!

In order to embark on my re-coding effort, I ordered and read a ColdFusion ORM book written by John Whish and found his book to be an invaluable resource. The book is concise and well laid out. It starts by answering simple questions, such as What is ORM? and provides a general background. His book shows you how to configure ORM, explains that ORM is used for CRUD operations, and then gets into the meaty topics such as ORM relationships and HQL. In the final part of the book John discusses validation, caching and provides helpful tips.

If you're using ORM and ColdFusion, I found his book to be an invaluable resource.

Related Resources

Comments

This entry was posted on November 22, 2019 at 11:44 AM and has received 167 views.

Plyr Themes now match Galaxie Blog's Kendo UI themes

How to modify the Plyr theme

If you're a Galaxie Blog owner, you can change the primary colors of the Plyr controls. The Plyr media player is now themed for Galaxie Blog's themes, but for those who are running Galaxie Blog, you can further modify the Plyr themes by simply changing the .css in the common/libs/plyr/customThemes folder to match your own created theme.

Simply open the plyr.css file in the common/libs/plyr/ folder, and search and replace both the RGB and Hexadecimal values.

The default Plyr .css file specifies a RGB value of 0,179,255, and the hexadecimal value is #00b3ff. There are 5 occurences of both 0,179,255 and 00b3ff.

Plyr Themes now match Galaxie Blog's Kendo UI themes

Kendo UI already has a built in media player, but it is only available if you have a commercial licsense. Telerik did not put it's own media player into it's open source distribution of Kendo Core. However, even if you have a license, I recommend using Plyr. The Pylr media player is far superior, and offers much more functionality, such as supporting captions, add revenue capabilities, and even has air-play support. It also supports Vimeo and YouTube.

I am ditching Kendo's media player and have modified Plyr to support the Kendo default less based themes. All that you need to do is incorporate the proper theme css file in the header after initializing the Plyr.

Getting the new Kendo UI Plyr Themes

I have created a fork and saved my own Plyr GIT repository at https://github.com/GregoryAlexander77/plyr/tree/master/themeCss. There is one .css file for every Kendo UI less based theme.

Happy theme... err, streaming!

Comments

This entry was posted on November 19, 2019 at 6:07 PM and has received 123 views.

Sharing Video's to Facebook and Twitter


How to share video on Facebook and Twitter from your own website

This is a continuation of my how to make the perfect social media sharing image series, but here we focus on using video and audio to facebook and twitter instead of sharing images.

Create the Video

In this video, I used a Battlestar Galactica preview made as a university project made by Bob. The 2004 Battlestar Galactica was one of my favorite Sci-Fi TV shows.

The 2004 version of Battlestar Galactica is essentially a science fiction rendition of both the Genesis and Exodus stories; but the 10 plagues were instead caused by 6 different eerily human like robots created by humans. OK, enough of the Sci-Fi stuff; time to get back to the substance of this article here....

Your own video should be created in mp4 format using the progressive HDTV 720p format. The final size should be 1280 x 720 (2048K bitrate).

Creating the images used by the social media platform along with the cover image

We still need to create several images to serve as the cover image. These images will cover the video until the video is loaded. If you reload this page, you will see a dark Battlestar Galactica image that will cover the video until the video is loaded. Once the video is loaded, the large arrow will show on top of the cover image.

  1. After you have created the video, create an image of the video by pressing print screen. We will use this to create the images that we'll use in the image meta tags and to create a cover image for the video
  2. Crop the images using the same ratio and size formats as we did in part 2. The cover image for Facebook should be 1200x630, Twitter's dimensions are nearly the same at 1200x628. The cover image should be either .jpg or .png. WebP is not yet supported for social media sharing. I am providing resources and examples below.
  3. Once you have created and uploaded the images to your site, we need to create the essential open graph and twitter tags and validate them in our web page like we did here:

You'll need to have a HTML5 capable Media Player on your website

It goes without saying that you'll also need to have a HTML5 Media Player to handle the video and audio formats on your own website. If you don't have a HTML5 media player, you can follow my steps to integrate Plyr on your own website.

Creating a separate player instance for Twitter

Unfortunately, Twitter can't read embedded video from your own web page. Buried in Twitters player card documentation, you'll find that you also need to create a separate instance of your media player, and either point to the new instance, or an iframe. Importantly, the video must take up the full width of the page. This is how I solved this issue using Plyr. If you don't have Plyr, you'll have to use this approach with your own HTML5 media player.

Here is the ColdFusion code that I used to create a new page with Plyr.

view plain about
1<!doctype html>
2<!--- Note: this is a proof of concept page. This template will be revised. --->
3<head>
4    <!-- Plyr (our HTML5 media player) -->
5    <script src="/blog/common/libs/plyr/plyr.js"></script>
6    <!-- Plyr css. -->
7    <link rel="stylesheet" href="/blog/common/libs/plyr/plyr.css" />
8</head>
9
10<cfparam name="URL.videoUrl" default="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4">
11<cfparam name="URL.poster" default="https://gregoryalexander.com/blog/enclosures/twitter/blueMoonTrailer.jpg">
12<cfparam name="URL.crossOrigin" default="false">
13    
14<style>
15<!--- This must be set to full screen! --->
16.mediaPlayer video {
17    width: 100% !important
18}
19</style>
20
21<div class="mediaPlayer">
22    <video
23        controls
24        <cfif URL.crossOrigin eq true>crossorigin</cfif>
25        playsinline
26        poster="<cfoutput>#URL.poster#</cfoutput>"
27        id="player1">

28        <!-- Video files -->
29        <!-- 1280x720 --->
30        <source
31                src="<cfoutput>#URL.videoUrl#?id=#createUuid()#</cfoutput>"
32            type="video/mp4"
33            size="720"
34        />

35
36    </video>
37</div>

This new instance of your player must be set to take the full width of the page. If it does not render the video using the full width of the page, Twitter will play the video at a much smaller resolution and the users will only see part of the video being played.

Creating the essential media meta tags

Twitter tags

The following twitter tags must be set in the header of the page.

  • The first tag, the twitter:player meta tag is a directive that tells Twitter that we want to use the player card. When we are using just an image and not a video, we would use 'twitter:card' 'summary_large_image'
  • The next 4 tags are similar, if not identical, to the tags that we've covered in How to make the perfect social media sharing image - part 5. The only difference is that here we are using the image of the video that you have created in a previous step above.
  • I am using ColdFusion's createUuid function to generate the id element in the twitter:image. This is a trick that I learned to refresh the twitter preview after the initial twitter preview has been made.

view plain about
1<!-- Twitter meta tags. -->    
2    <!--- Note: we are using the twitter player card --->        
3    <script name="twitter:card" content="player">
4
5    <script name="twitter:site" content="@https://gregoryalexander.com/blog">
6    <script name="twitter:title" content="Plyr, a HTML5 media player, is incorporated into Galaxie Blog">
7    <script name="twitter:description" content="Plyr is now the default HTML5 media player in Galaxie Blog">
8    <!--- This is a picture taken of the video. The size of this image is 1200x628. --->
9    <script name="twitter:image" content="https://gregoryalexander.com/blog/enclosures/twitter/blueMoonTrailer.jpg?id=E2DC9DE6-9B6A-9736-EE1FFFD42B90FEC3">

The next tags are used to tell Twitter how to play our fancy shiny video.

  • The "twitter:player" tag has the full URL to the minimal HTML5 Media Player that we covered above
  • The "twitter:player:width" for the recommended 720p video is 1280 pixels.
  • And the "twitter:player:height" for the recommended 720p video is 720 pixels.

view plain about
1<!-- Twitter player card meta types -->
2    <!-- The twitter video must be on a minimal page that just includes the video, and nothing else. -->
3    <script property="twitter:player" content="https://gregoryalexander.com/blog/videoPlayer.cfm?videoUrl=https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4&poster=https://gregoryalexander.com/blog/enclosures/twitter/blueMoonTrailer.jpg&id=E2DC9DE7-9749-288C-C9BA9EBE432D3203">
4    <script property="twitter:player:width" content="1280">    
5    <script property="twitter:player:height" content="720">

Facebook Open Graph Tags

Facebooks' approach to video sharing is more streamlined than Twitter's. First, we don't need a minimal media player that plays the video in full page. Facebook will glean the source of the video found in the og:video tag.

The first 5 tags are identical to the open graph meta tags used for images. The only difference is that I adeed an extra fb:app_id meta tag. This key is not required; I am using my own developer key here as I want facebook to know that this share is coming from a trusted source.

view plain about
1<!-- Open graph meta tags for Facebook. See notes. -->
2    <script property="og:image" content="https://gregoryalexander.com/blog/enclosures/facebook/blueMoonTrailer.jpg">
3    <script property="og:site_name" content="Gregory's Blog" />
4    <script property="
og:url" content="https://gregoryalexander.com/blog/2019/11/15/Plyr-a-HTML5-media-player-is-incorporated-into-Galaxie-Blog" />
5    <script property="
og:title" content="Plyr, a HTML5 media player, is incorporated into Galaxie Blog" />
6    <script property="
og:description" content="Plyr is now the default HTML5 media player in Galaxie Blog" />
7    <script property="
fb:app_id" content="your facebook app id">

The next set of tags inform Facebook that we are sharing video.

  • The og:type tag indicates that we are using video.
  • The og:video:type tag indicates that we are using .mp4 as our video format. Facebook recommends .mp4 as it's preferred video format.
  • The og:video, og:video:url, and og:video:secure_url should point to the same URL that is the source of the video. The video:type is not required, but I am including it in my code just to cover all of my bases here.
  • The og:video:width and height tags use the same width and hieght as Twitter using the 720p video video format.

view plain about
1<!-- Video meta types -->
2    <script property="og:type" content="video.movie">
3    <script property="og:video:type" content="video/mp4">
4    <script property="og:video" content="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4">
5    <script property="og:video:url" content="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4">
6    <script property="og:video:secure_url" content="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4">
7    <script property="og:video:width" content="1280">    
8    <script property="og:video:height" content="720">

You can see an example of how this video was shared by following me on twitter.

Happy coding!

Comments

This entry was posted on November 18, 2019 at 12:00 PM and has received 158 views.

Integrating a HTML5 Media Player using Plyr

Integrating Plyr into your own website

Background

I needed to integrate a new HTML5 Media Player into Galaxie Blog for several reasons. I was using the Kendo UI HTML5 Media Player as it was integrated with the themes that I developed for Galaxie Blog, however, it is not part of the Kendo Core open source distribution, and required other Galaxie Blog owners to have a Kendo UI license.

It was my goal to integrate a new HTML player that was open source. I had thought to use Kendo's media player if the blog owner had a license, however, after integrating Plyr, I determined that Plyr offers quite a bit more functionality than the Kendo Media Player, and changed the default media player to Plyr- even if the blog owner had their own Kendo commercial license.

Why Plyr?

Plyr is a simple, lightweight, accessible and customizable HTML5 media and audio player. It supports HTML Video, Audio, YouTube and Vimeo. It has support for video captions in multiple languages, and has add revenue capabilities. What also excited me is that I could cast my videos to my own TV. Plyr also supports air play, and I wanted to be able to view the video's that I took on my own TV.

How to integrate Plyr into your own website or blog

Integrating Plyr is relatively trivial. I will show you the steps that I used to integrate Plyr into Galaxie Blog. This is meant as a general how to document, if you run into problems or want more information, see the full documentation on the Plyr GitHub site

  1. Clone or download Plyr at https://github.com/sampotts/plyr
  2. Upload all of the files found in the dist folder to your own site

Once the files have been uploaded, you will need to open the index document of your site and edit a few lines of code

Load the javascript and css files in the head portion of your document like so:

view plain about
1<head>
2    <!-- Plyr (our HTML5 media player) -->
3    <script src="/blog/common/libs/plyr/plyr.js"></script>
4    <!-- Defer the plyr css. -->
5    <link rel="stylesheet" href="/blog/common/libs/plyr/plyr.css" />
6</head>

Find the portion of the page where you would like the video to be displayed, and copy and paste the code below into your own webpage. Pay attention to the crossorigin argument. You need to remove the crossorigin argument if your video is hosted on your own site. If the video is hosted elsewhere, such as the plyr cdn site, you'll need to put the crossorigin argument back into the code.

If you have different sized videos, let's say one with 720p and 1080p, put both of the sources in there. The Plyr library will dynamically choose the most appropriate video size that can be rendered on your site. Of course, you can also put in one video source.

Video captions are supported and are optional.

view plain about
1<div id="mediaplayer" class="mediaPlayer">
2    <video
3        controls
4        crossorigin
5        playsinline
6        poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
7        id="player1"
8        class="lazy">

9        <!-- Video files -->
10
11        <source
12            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
13            type="video/mp4"
14            size="720"
15        />

16
17        <source
18            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
19            type="video/mp4"
20            size="1080"
21        />

22
23        <!-- Caption files -->
24        <track
25            kind="captions"
26            label="English"
27            srclang="en"
28            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
29            default
30        />

31
32    </video>
33</div>

Finally, put the following script at the very end of your code. You need to do this if you need to have more than one video on your page. If you only have one video on your page, the script will not cause any errors, so I advise you to put this at the end of your page.

view plain about
1<script type="deferjs">
2    // Initialize the plyr.
3    const players = Plyr.setup('video', { captions: { active: true } });
4    // Expose player so it can be used from the console
5    window.players = players;
6</script>

This article was meant to quickly convey how to put a basic Plyr Media Player on your own web page. You'll definitely want to check out the Plyr GitHub website for more information.

If you want to see how the video looks on Galaxie Blog, see Plyr, a HTML5 media player, is incorporated into Galaxie Blog

In our next article, we'll see how we can share our video to both Facebook and Twitter

Thanks for reading!

Comments

This entry was posted on November 17, 2019 at 2:47 PM and has received 198 views.

Plyr, a HTML5 media player, is incorporated into Galaxie Blog


Plyr, a HTML5 media player, will be incorporated into the next Galaxie Blog version

Plyr, an open source HTML5 media player, is now the default media player in Galaxie Blog. Plyer will automatically render video or audio when Galaxie Blog finds supported content. To improve page performance, Galaxie Blog will also lazy load the media for you. Plyr is a simple, lightweight, accessible and customizable HTML5 media and audio player. It supports HTML Video, Audio, YouTube and Vimeo. It has support for video captions in multiple langauges, and has add revenue capabilities. For a full list of features, see the Plyr site at https://github.com/sampotts/plyr

If you have a Kendo UI license, you can optionally use the Kendo HTML 5 media player, however, the Kendo Media player is not as functional as Plyr, and it is not open source.

Comments

This entry was posted on November 15, 2019 at 2:37 PM and has received 312 views.

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 to 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 Debugger

The Facebook Sharing Debugger will validate your og meta tags and scrape the social media image. It's relatively straightforward to use. Just enter in 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 to.

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 Validator

The 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 Preview

Twitter 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 bullet proof 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.

view plain about
1meta 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 Images

I have put a cfimage.cfm template on 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.

view plain about
1<!-- This is the only line that you should adjust --->
2<cfset socialMediaImagePath = "D:\home\gregorysblog.org\wwwroot\enclosures\DSC_0518.JPG">
3<!--- Consume the createSocialMediaImages(socialMediaImagePath, socialMediaImageType) function --->    
4<cfset createSocialMediaImages(socialMediaImagePath, 'facebook', '')>
5<cfset createSocialMediaImages(socialMediaImagePath, 'twitter', '')>

Other Social Media Validators

There are other tools for validation for different media platforms, such as Twitters Post Inspector, and Pinterest Rich Pin's Validator that I will cover at a different time.

Happy Coding!

Comments

This entry was posted on November 4, 2019 at 3:40 PM and has received 363 views.

How to make the perfect social media sharing image - part 5 Essential Meta Tags


How to make the perfect social media sharing image - part 5 Essential Meta Tags

Sharing your content on social media can have dramatic results at driving more traffic to your site. In my own experience, sharing my own content can drive 50% more traffic to the site. Along with adding the properly sized images, we need to make use of the correct meta tags. I have made several passes at improving the logic that Galaxie Blog uses to auto-generate the tags, and will share my experience with you. If you are using Galaxie Blog, the auto-generation of these tags is done for you.

Each social media site has it's own rules for generating the meta tags. Facebook prefers open graph tags, Twitter can use the open graph tags, but it has a slew of it's own proprietary tags, and Google +, LinkedIn, and Pinterest prefer schema markup tags, which I will not cover here.

Open Graph Tags

The following open graph tags are essential for Facebook

<meta property="og:image" content="URL to the social sharing image.">
<meta property="og:site_name" content="The site name (ie Galaxy Blog). " />
<meta property="og:url" content="The URL to the article" />
<meta property="og:title" content=" Must be 25 characters or less, especially for mobile" />
<meta property="og:description" content="Should be up to two sentences long, but under 30 characters for decent mobile rendering" />

The og:image:height and og:image:width tags are helpful, but not necessary. Facebook will correctly determine the proper image size as long as you stay within the Facebook recommendations.

Essential Twitter Tags

<meta name="twitter:card" content="summary_large_image">Use 'summary_large_image' if you're following along with this article
<meta name="twitter:site" content="@Site or article URL">
<meta name="twitter:title" content="The title of your site or article">
<meta name="twitter:description" content="Description, should be less than 200 characters">
<meta name="twitter:image" content="URL to the social sharing image.">

In the next article, I will go over some useful validation tools and share some tips and tricks with that I found.

Comments

This entry was posted on November 2, 2019 at 11:07 PM and has received 201 views.

How to make the perfect social media sharing image - part 4 Image Examples

After the last entry, I wanted to show you the social media images that were created by ColdFusion. Each of these images match the exact recommended size and the ratio aspect that are recommended by the various social media platforms. I'll show you the actual images that were created, and how the social media platform displayed the images after I shared the previous article.

The images

The first image to the left is the original image that was uploaded. This is a picture of my dog, Toby, a super-smart, 13 y.o. bundle of energy running in the snow. The second image, in the middle, is the Facebook social media image, and the image to the right is the Twitter social media image. All of the social media images are copies of the original.

Galaxie Blog will automatically take the image that you want to post, and create Facebook and Twitter social media images that are sized per the social media's recommendations. The Facebook social media image is 1200 pixels wide, and 630 in height. Twitter is similar, but just a hair shorter. They are 1200 pixels wide, and 628 pixels in height.

How the page renders on social media sites

Below are the social media sites render the page when it is shared. The images below are actual screen shot's of the last post I shared in part 3 of this series. Again, the image to the left is the original. The middle image is how Facebook presents the site, and the image to the right is how Twitter displays the share.

Both Facebook and Twitter will take the images that were created by Galaxie Blog, and resize them into their own format. As long as the images either meet the maximum or minimum dimensions as they do here, the site presentation of the share will look good.

Note: this approach works for Slack and LinkedIn sites, but this is outside of the narrow Facebook and Twitter scope that I wanted to blog about.

Next up in this series, how to properly use the meta tags for social media sharing.

Comments

This entry was posted on November 1, 2019 at 11:45 PM and has received 205 views.




Footer Logo

Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Galaxie Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.

Credits:

Portions of Galaxie Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.

Version:

Galaxie Blog Version 1.50 November 22 2019