For some sites using Participants Database, it is desirable to provide a “share” link to a single record display. This is fairly easy, what you need to do is make sure the correct meta tags are present in the page. In this article, I’ll explain how to set this up.
First, this only works for single record display pages, because the meta tags are applied to the whole content of the page. This means that you can’t use this method to share individual listings out of a list display. The shared URL must display a single subject. The [pdb_single] shortcode is perfect for that.
It is also important to understand that what your users will be sharing is the URL of the page they are viewing. When that URL (which must resolve to a single Participants Database record) is shared, the social media site looks at the metadata at that URL and uses that information to construct the “share” post that will be seen in the social media feed.
Note: this tutorial assumes a basic understanding of HTML and php scripts. If you don’t have this knowledge, you may make errors that will prevent this from working or even crash your site.
OpenGraph
This tutorial relies on the use of the OpenGraph standard for including metadata in a web page. This standard is in wide use, most notably on Facebook and Twitter. The idea is that as a content author, you should have control over the information that is used when one of your site users decides to “share” some content from your site. You can read the technical details on the OpenGraph standard at the link.
A very good simplified overview of the use of these meta tags is provided over at CSS Tricks. I highly recommend you read this article before diving in here.
The Essential Meta Tags for Social Media
Deciding What Information to Include
When a user shares a link to Facebook or Twitter (or any social media app that recognizes OpenGraph meta tags) there are 4 essential pieces of information you need to include. These are:
- Title
- Image URL
- Description
- URL
Because Participants Database is a fully-configurable database, you will need to decide which fields you will use to provide this information in your case.
The core of this functionality is a custom template that is for the purpose of inserting the meta tags into the header of your page. We use a modified template for the single record to assemble the data that will be passed to the social media site when the URL is shared.
As an example of how this works, take a look at this line from the custom template:
<meta property="og:title" content="<?php echo $record->get_value('first_name') . ' ' . $record->get_value('last_name') ?>">What we did there is assemble the first and last name from the record and place it into the “content” attribute of the “og:title” meta tag.
For each meta tag that you include, you will need to fill in the content attribute with the appropriate information.
The URL Meta Tag
For the ‘og:url’ meta tag, we simply provide the URL of the page itself. We did that using php globals to assemble the URL. If your site does not support https, you should probably change that in the template…but do consider moving your site to https, you’ll be happy you did.
This URL must be correct, and must correspond to the content that the user is viewing. Don’t try to use this as a way to get another URL posted, that is probably a violation of the terms of use of the social media site.
The Image Meta Tag
For the image tag, you need to include a complete URL to the image you want used. It should be a full-size image. For regular Participants Database images this is just the image that was uploaded. The URL is constructed by adding the image file name to the URL for the image file location.
For users of the Image Expansion add-on, you will need to use a different approach because in that case the images are WordPress media items, and so we need to use a WordPress function to get the URL. See below for more on that.
The Custom Template
Here is an example template that I prepared to get your started. I filled in the meta tags with example content, you will need to adjust this to suit the content that you want shared from your site.
This template should be installed in the usual place for custom templates, as described here: Using Participants Database Custom Templates
Putting in the Meta Tags
The meta tags need to be placed in the HTML head portion of your page. Normally, you can’t just add content to the head, you need to use a WordPress action that is triggered when the HTML head is getting set up.
The action we use is ‘wp_head’ and to put it near the end of the header, we give it a high priority number. This means that everything with a lower number will go in first, and our meta tags will go in toward the bottom of the head. This is important because we may need to override existing meta tags with ours.
Here is the very simple plugin that sets up the action and then places the meta tags by invoking the shortcode using the special template we set up.
https://gist.github.com/xnau/5f601b1b7a2de7f8547dddbbaecb1151
Click the link above to get the plugin. Instructions for adding the code in a gist to your site as a plugin are here: Adding a Gist as a Plugin
Putting it all Together
OK, there has been a lot of explanation and some code. Just so we’re clear, here are the simplified steps to setting this up:
- Download the custom template
- Set up the custom template with your data to place in the metatags
- Install the custom template
- Download the plugin and install it on your site and activate it
- Check your single record page for the meta tags
Testing the Meta Tags
It is fairly easy to test how these meta tags are working, there are several websites where you can paste in the share URL and get a report on which tags were picked up and what the values were. Here are some possible places to test your meta tags:
If you want to see the meta tags, you’ll need to use your browser developer tools inspector. Look in the head portion of the HTML just above where the body portion begins.
Adding New Meta Tags
When testing your tags, you may find that for some sites, the information is incomplete. You can easily add more meta tags, all you need to do is add your meta tags to the custom template.
Overriding Site Meta Tags
In most WordPress sites, a standard set of meta tags is added with information such as the name of the site and site author. In some cases, the site (or other plugins) will be placing meta tags with the same name as the meta tags you are adding here.
If there is more that one meta tag with the same property name, the later ones will override the earlier ones. You may run into trouble with this, especially if you are using plugins that add social media meta tags. If these other tags are getting added after the ones we are setting up here, you may need to increase the value of the priority in the add_action function used in the add_action function.
Adding the Share Link
All that’s left to do is add a link for your users to click on. You’re going to have to decide how to do this, there are several ways. Take a look at this page for some ideas: websiteplanet.com
It’s also possible that a WP plugin that gives you a way to put a “share” link on a page will work.
Modification for Use With the Image Expansion Add-On
If you are using the Image Expansion add-on, you’ll need to get your image URL in a different way, because the image is kept in the WP media library. I’ve set up a custom template that shows how this is done here:
Ryan Carmichael 
Roland Barker
Roland,
I couldn’t seem to post to this page using code anymore. I’ve instead posted to the forum. Please check when you get a second. Thanks.
I need to look at that, but I tried to make it possible to use backticks to enclose your code.
I had a typo in my original post…. Sorry, Roland! Please check back on the forums. Thanks again for your help.
I’m having issues getting this to work. I’ve got the templates and plugin installed. I think i’m losing your directions when you say this part….
* this gets the single record page ID from the plugin settings; make sure the
* plugin settings are set to point to the page with your [pdb_single] shortcode
What do you mean “point to the page”?
This setting this refers to is the “Single Record Page” setting under the List tab in the plugin settings. Use the dropdown selector to set it to the page where your [pdb_single] shortcode is.
Ah, i got it… totally my fault. I’m using the Yoast plugin (which rocks) and generates a lot of metas up top and I didn’t realize the new PDB metas were a little further down. I simply needed a filter to remove the Yoast metas. I’ll paste it here if anyone needs help with this. You put this in your functions.php and modify to your use…
/* * Remove Yoast SEO OpenGraph Output From One Post/Page * Credit: Unknown ********* * If Post: Change 123456 to the post ID * If Page: Change is_single to is_page and 123456 to the page ID */ add_action(‘wp_head’, ‘remove_one_wpseo_og’, 1); function remove_one_wpseo_og() { if ( is_page ( 123456 ) ) { remove_action( ‘wpseo_head’, array( $GLOBALS[‘wpseo_og’], ‘opengraph’ ), 30 ); remove_action( ‘wpseo_head’, array( ‘WPSEO_Twitter’ , ‘get_instance’ ) , 40 ); } }Thank you, Roland!!!