Social Media. Ew, David. Something that was once thought of a cute or an easy way to stay in touch is now a part of everyday life whether we like it or not. The use of social media to drive leads, get job applicants, and generally raise brand awareness has been ubiquitous in marketing for at least the past decade. To help spread the word, companies rely on their employees to help push out their messaging and drive traffic to their website.
Social Media platforms are paying attention. LinkedIn created a product called Elevate that allows a company to create social posts and have its users either share or subscribe to a series of posts on LinkedIn and track who’s posting what. Definitely a great idea, but what about consistency in messaging across other networks such as Twitter, Facebook, and Instagram?
At work, we were looking for a better way to track who’s been sharing our curated posts on social. Our social media expert approached me about figuring out a way to add UTM parameters so we can have attribution. Sitting in my living room one Friday evening, I thought why can’t we have it all? We have social share buttons on our site, we should be able to leverage that some way to make spreading the word about my company easy for our team, and that’s exactly what we did.
Turns out, you can’t have it all…but you can have most of it if you’re creative.
I ran my idea by our social media expert and he liked it! Given the task of creating share for Twitter, LinkedIn, and Facebook, I got to work with some research of how these social share items are generated and some of the pitfalls of each.
In terms of automatic social share, Twitter is by far the easiest to work with. Twitter allows for everything to be included, making it convenient to add all the fields I needed without having to get creative. I used the following fields:
- url:This is the URL of the page I’m sharing. Since it’s passed in as a URL parameter, the URL itself needs to be sanitized using encodeURIComponent() in JavaScript before appending it to the link string.
- text:Pulling the text of the post, I sanitized it and added it to this parameter
- hashtags: In my editor UI, I added an ACF repeater field for each hashtag. This allows me to construct a comma separated string of relevant hashtags and also have them appear as hashtags on the social post format.
In the end, a Twitter link would look like this: https://twitter.com/intent/tweet?text={{your text here}}&url={{your url with utm params here}}&hashtags={{a comma separated list of hashtags goes here}}
LinkedIn. The professional social network owned by Microsoft is the place to share your relevant stories, connect with colleagues, and find jobs. Unfortunately, LinkedIn being owned by Microsoft also limits what you can share using a share link to just the URL (their API and oAuth login together is much more robust). The social “card” is created using Open Graph tagging that is installed on the page itself. Another charming quirk is that LinkedIn likes to strip attribution tags out of the URL of the post. I guess some things never change…Microsoft hasn’t completely dropped being difficult when it comes to the standards followed by the rest of the internet (lest we forget Internet Explorer).
The share link looks a lot like this, with one very simple parameter- URL: https://www.linkedin.com/sharing/share-offsite/?url={{your url here}}
Facebook is much of the same as LinkedIn. It does not allow you to pass through a social post message using the share link, but the ability is available via the API after logging in using their oAuth. It does allow for url parameters. This is a project that I’ll be planning over the next few months.
As a workaround, I created a string of the post content, complete with hashtags. In that, when the user clicks the share button, the string is copied to the user’s clipboard and they can paste it into their social networks’s post editor. #blessed
Let’s take a peek under the hood…
Since building this in PHP and jQuery wouldn’t give me the data bindings I was looking for, I chose to build the project using Vue.js and GraphQL. The UI requirements were pretty simple. A place for the user to add their name (to be included in the utm parameter and attribution structure we use at work), buttons each social network, and a post preview with social card image and post content with hashtags.
Since the website is on WordPress, I used Advanced Custom Fields for the back-end data and query it using WPGraphQL. On the page’s back end, I added a repeater field that had the following subfields:
- Post Content (text box- an HTML enabled field won’t work with the formatting)
- Hashtags (repeater with 1 text field per hashtag)
- The Page/Post being shared (relationship with post content), from which I pull the Featured Image and URL of the what’s being shared.
For the Vue.js app, I used custom components and VueX. VueX/state management is not required for something like this, but it’s a personal preference of mine since it allows me to segregate the GraphQL query and data from the UI in code and pass the data consistently across the app and all components. VueX makes it insanely easy to specify which variables are passed through under computed using VueX’s mapState function.
One of the big reasons I appreciate WPGraphQL is it provides a queryable data abstraction. So you won’t need to write a custom endpoint for each query data’s need. That’s done through the GraphQL request in the code. I used GraphiQL, a GraphQL IDE that allows you to search the fields available in the schema. This query can simply be pasted into an AJAX function to fetch the data. Clean and easy.
For this particular app, I built one component. It’s a tile that displays the post featured image, copy, hashtags, and the share buttons. It also generates the share button links for each social network and formats the post for both viewing in the tile, copied to the clipboard, and sanitized as a URL parameter for the social links. For something this simple, a component isn’t necessary, but makes for better code organization and possible reusability across projects.
The App.vue file is simple. It has the Name field, a v-for loop using the tile component for each social post, and pulls the data in from the VueX data store. That, in a nutshell, sums up how I created the project.
Up next: Creating social share button widget in Vue. Stay tuned.