The UWP Tech Team recently added the first release of Social Media Sharing functionality to the EdWeb Content Management System. This allows any page on the University website to be shared through Facebook, Twitter, LinkedIn and email. As this is the first release of this new functionality, I would like to tell you how we implemented this solution.

Project Brief

The project brief seemed very simple:

“Allow content on the University Website to be shared through social media button”

and it must have the following functionality:

• Allow EdWeb System Admins to switch this on for any content type in EdWeb
• Share specific content as required by each social media channel
• No 3rd party cookies to be inserted into the University Website
• Facebook, Twitter, LinkedIn and Email sharing

Research

To deliver a solution which was future-proof and fitted with the University branding, I had to do considerable research. We looked at the social media sharing behaviours on different websites including the BBC and Sky Sports. We wanted to know what mechanisms they used, how their buttons were designed and what parameters were being shared with social media (such as URL, description and images).

To cut down on development time, I looked at existing Drupal social modules to see if they could provide the same functionality we needed to deliver Social Media sharing. We tested various modules to find out if they:

• allowed the selection of content types
• allowed the selection of social media channels and if they could be extended
• set 3^rd party cookies when included in a page
• had modules were extendable through Drupal Hooks

But unfortunately, all the Drupal modules we tested set 3^rd party cookies which aren’t allowed on the University website. This meant we had to design and build a custom solution for EdWeb.

Development considerations

As well as looking at other websites and Drupal Modules, we still had to think about how the social media functionality would work for the university website. We had to consider what:

• design considerations were needed for the University Global Experience Library (EdGEL)
• development work was required for implementation in EdWeb

When developing for EdWeb and Drupal before, we already had the components needed so we didn’t have to think about EdGEL. In the early stages, we considered EdGEL to be a visual library guide that controlled how EdWeb and other university systems looked. But after several discussions with the IS Apps development team, we started to realise that we weren’t just developing this functionality for EdWeb, we were designing new components for EdGEL and the wider university community first.

And on top of that, we were not only designing the visual look, but the functionality as well so that it could be placed into any web application such as WordPress, Squiz or whatever could use this without having EdWeb specific code in it. This made us think about our development work in a different way. The questions we had to consider were:

• Does this functionality exist in EdGel already?
• How would you create a component so that it was web application independent?
• How can WordPress, Squiz or Laravel use the same functionality without refactoring?

And the most important thing we needed to think about when developing for EdGEL is:

“If your code needs refactored to work with web applications, it shouldn’t be in EdGEL!”

This was further evidence that existing Drupal modules wouldn’t work as we would not be able to get them into EdGEL.

Building for EdGEL first

The social media buttons were built in various stages with regular review meetings with IS Apps development team to make sure we were on the right track. The development of our new EdGEL component was split into the three parts below:

Design

The LTW Graphics team created the design and layout of the buttons based on our specification.

Build

Taking the buttons and layout design, I first built a static HTML version including the CSS I needed to get the layout correct in both desktop and mobile views. Then, based on the development guidelines set by Facebook, Twitter and LinkedIn, and with assistance from Pat Fluery in DLAM (LTW), I replicated the sharing behaviour for each social media channel using JavaScript and jQuery. Each social media channel required slightly different attributes, so we had to build that in.

Pushing back into EdGel

Once the code was built, I built and tested the social media sharing behaviours and design using the EdGEL code base and implementation process. Once all tests were passed, it was pushed back to IS Apps team to check before merging in the new code in the EdGEL code repository.

The EdWeb theme was then updated with the latest EdGEL files, and my new social media component was now available for development in EdWeb.

Developing for EdWeb

Once I had the EdGEL component in place, we could get back to thinking about how we would implement this functionality into EdWeb.

Questions we had to answer were:

• Where will the new functionality exist?
• What features will we release?
• What layer should this be added at; Theme or Module?
• Can I reuse existing EdWeb code?
• How would social media sharing be added to each page?
• What dependencies does this new code need?

After reviewing current EdWeb code base, we decided to add the social media sharing buttons at theme layer and replicate the region visibility functionality used by the University website global navigation. This would allow Social Media Sharing buttons to be added at a website level and for any content type. This would also cut down on the amount of additional code required as there was already code in place that I could adapt.

At a very high level, we achieved this by:

1. forking the UoE theme in GitLab repository
2. making the required code changes to the theme (utilising the social media components we added to EdGel previously)
3. having a final code review with IS Apps developers
4. pushing the updated Theme back to GitLab and creating a merge request for IS Apps.

The social media sharing functionality has a dependency on the Open graph (og) meta tags to share the correct content on social media. The Drupal Metatag module has a sub module which inserts these meta tags into your content. The activation and configuration of this sub module was included in the EdWeb code deployment.

Summary

Development of the Social Media functionality for EdWeb has taught us how important EdGEL is in the development process. It made us realise that just as much, if not more, time may be needed to build your components in EdGEL than is needed for development in your application.

Some of the lessons learned:

• Check EdGEL to see if the component exists
• Be aware EdGEL not only encompasses design but also assets, styles and behaviours
• Clearly separate EdGEL functionality from your own application
• Make sure your EdGEL component works without your application
• Allocate more time to develop your EdGEL code
• Consider dependencies: Does it need an extra module such as Open-graph Metatags or Twitter cards? Is this functionality platform independent?

You can see the social media sharing buttons in action on the UWP website.

University Website Programme website

So what’s next for Social Media?

Now that the first release is available, we are keen to develop the functionality of the social media sharing component further. Features we will be developing are:

• Group Admin control
• Sharing Statistics
• Additional social media channels

We would like your thoughts on what should be added to the next release. Please contact us with your ideas.

Email website.support@ed.ac.uk