© 2024 fjorge. All rights reserved.
Simple Dynamic Social Media Share Links On the Same Page
Setting up meta tags for social media platforms for a single page is generally pretty easy. Look up the Open Graph API standards and platform specific standards (I.E. Twitter) then fill in the content for your page looking something like the following:
However, when dealing with the task of having dynamic content based on the shared element on the site such as various slides in a gallery it can get a little tricky. There are some options out there that uses JavaScript/jQuery but they frequently require an app created through a social media platform (I.E Facebook) but there's no guarantee it will work when shared on a different platform and it can be a time-consuming setup. To get around this, we created a simple script in javascript that updates the shared URL's post values with that slides specific content information which is used to control what meta tag content is set on page load on share type link click. Example:
Next, we created a PHP script that sits in the head with the rest of the meta tags that grabs those post values from the URL and then sets the content based on the post values received.
There you have it, dynamic share links for different content on a single page. In our example, the description stays static but this could easily be changed as well. If you don't want massive URL links you can easily generate them on the fly in the file by matching your id and using a switch or if statement to match page id, title, etc.
More information on the Open Graph API:
- https://ogp.me/
- https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html
- https://developers.facebook.com/docs/sharing/webmasters/
A great way to create your share links:
Ways to test that your links are sharing appropriately on different platforms:
Ready to start a project?
