Categorised as:

Creating Dynamic Social Sharing Cards: WordPress Plugin Guide and Code

4–6 minutes
Tagged as: , , ,

In the previous post, I wrote about the idea I had to create a WordPress plugin using ChatGPT for dynamic social sharing cards. This is Part 2 of that post and in this, I will write about how I created a custom plugin for WordPress using ChatGPT to generate dynamic social sharing cards for my website in 7 simple steps!

Note: I have a WordPress subscription which lets me install plugins from the WordPress marketplace or lets me upload custom plugins

Prompt 1: WordPress plugin basics

Help me create a wordpress plugin to generate a dynamic social sharing card for my blog posts. Please also tell me how can I install this into wordpress.com

Not knowing where to start, I asked ChatGPT. It gave me a list of steps to follow:

  1. Setup the plugin directory: wp-content/plugins
  2. Create the plugin file: dynamic-social-sharing-card.php
  3. Plugin header:
    • <?php
      /*
      Plugin Name: Dynamic Social Sharing Card
      Description: Generates dynamic social sharing cards for blog posts.
      Version: 1.0
      Author: Your Name
      */
      // Plugin code goes here
  4. Plugin functionality
  5. Activate the plugin

Prompt 2: The plugin functionality

Can you help me write the code itself for the plugin to generate dynamic social sharing card?

ChatGPT generated the following code:



<?php
/*
Plugin Name: Dynamic Social Sharing Card
Description: Generates dynamic social sharing cards for blog posts.
Version: 1.0
Author: Your Name
*/

// Enqueue CSS styles
function dynamic_social_sharing_card_styles() {
    wp_enqueue_style( 'dynamic-social-sharing-card', plugin_dir_url( __FILE__ ) . 'style.css' );
}
add_action( 'wp_enqueue_scripts', 'dynamic_social_sharing_card_styles' );

// Add Open Graph meta tags for Facebook
function dynamic_social_sharing_card_facebook_meta_tags() {
   echo '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '"/>';
// other meta tags for open-graph
}
add_action( 'wp_head', 'dynamic_social_sharing_card_facebook_meta_tags' );

// Add Twitter Cards meta tags for Twitter
function dynamic_social_sharing_card_twitter_meta_tags() {
    echo '<meta property="twitter:title" content="' . esc_attr( get_the_title() ) . '"/>';
// other meta tags for twitter open-graph
        
}
add_action( 'wp_head', 'dynamic_social_sharing_card_twitter_meta_tags' );

The functions are hooked using add_action to the wp_head action to ensure that the meta tags are outputted in the header of the WordPress site.

Prompt 3: Write the title of the blog post on a custom image

ChatGPT asked me to do the straight-forward following:

  1. First, upload your custom empty image to your WordPress media library. Note down the attachment ID of the image.
  2. Modify the plugin code to fetch the blog post’s title and overlay it on the custom image using PHP’s image manipulation functions.

I asked ChatGPT the following:

How will this code be executed? When will this plugin run?

  1. Enqueueing CSS Styles
  2. Adding Open Graph Meta Tags for Facebook and Twitter Cards Meta Tags for Twitter

To summarize, the plugin runs its functionality when WordPress triggers specific actions or hooks, ensuring that the dynamic social sharing card generation occurs at the appropriate moments during the page rendering process.

I then asked ChatGPT to do the following:

How will the style.css look like to ensure the title is centered on the base image?

ChatGPT generated style.css but it was not referenced in the code. I asked it to correct this.

Apologies for the oversight. The CSS class mentioned in the style.css file (social-sharing-card) isn’t referenced directly in the provided plugin code. We need to add an HTML element with this class to wrap around the title text so that the CSS styles can be applied correctly.

Prompt 4: Correcting the plugin functionality to use PHP’s GD library for image processing

My use case was that I wanted the blog post’s title generated on a custom image. Instead, the code generated a div in the HTML document but didn’t generate an actual image file with the post’s title embedded.

To implement my use case ChatGPT told me it would involve more complex PHP code for image manipulation and generation with the necessary PHP extensions (GD Library or ImageMagick) installed and enabled.

function generate_social_sharing_card_image( $post_id ) {
    // Get post title
    $post_title = get_the_title( $post_id );

    // Load base image
    $base_image = imagecreatefromjpeg( BASE_IMAGE_URL );

    // Set text color (white)
    $text_color = imagecolorallocate( $base_image, 255, 255, 255 );

    // Calculate text position (centered)
    $text_x = (imagesx( $base_image ) - strlen( $post_title ) * 10) / 2; // Adjust position as needed
    $text_y = imagesy( $base_image ) / 2; // Adjust position as needed

    // Add text to image
    imagestring( $base_image, 5, $text_x, $text_y, $post_title, $text_color );

    // Save generated image
    $output_image_path = plugin_dir_path( __FILE__ ) . 'generated-image.jpg';
    imagejpeg( $base_image, $output_image_path );

    // Free up memory
    imagedestroy( $base_image );

    // Return the URL of the generated image
    return plugin_dir_url( __FILE__ ) . 'generated-image.jpg';
}

Prompt 5: Increasing the font size using imagettftext for PHP’s GD library

I am using the plugin code with the GD library and imagestring cannot take fontsize value > 5. How can I increase the fontsize?

Instead of imagestring(), you can use the imagettftext() function in PHP’s GD Library, which allows you to render TrueType fonts with more flexibility, including the ability to specify larger font sizes.

I then had to prepare a TrueType (.ttf) font file and upload it. The plugin directory structure:

your-plugin-name/
├── your-plugin.php
├── assets/
│   ├── fonts/
│   │   └── your-font-file.ttf
├── includes/
│   └── functions.php
├── images/
│   └── base-image.jpg
└── readme.txt

Prompt 6: Optimising the code

The generated-image.jpg was overwritten and I wanted to ensure that it was unique per post. Also, if a unique image already existed I did not want to recreate one.

Next, I wanted the generated text in the imagettftext to wrap, i.e. to break the text into multiple lines based on a maximum width constraint.

Lastly, I wanted to make sure the social cards were generated not only for blog posts but also for other pages on my website.

Prompt 7: Debugging the plugin

The last step was to install the plugin and learn to debug the plugin on WordPress.

I installed the Query Monitor WordPress plugin and was able to fix a few errors I encountered.

Conclusion

This was a fun project to attempt coding something that I had no clue about and ChatGPT made it seem fairly simple and easy. I am happy with the outcome.

Let me know in the comments what you think about this post and if this was useful!

Leave a comment

Trending