Facebook Sharing is a simple way of letting people bring content from your website or mobile app to Facebook. Sharing is triggered when someone clicks a social plugin like the Share or Send button. This launches the corresponding Share or Message dialog.
MCC Graduation Badges
Mesa Community College has had Graduation celebration badges on their website since 2013. The purpose is to allow prospective graduates the ability to post or share their desired graduation badge on their Facebook timeline. This allows the students to celebrate their accomplishments with their friends and family. Example graduation badge page for 2023: https://www.mesacc.edu/graduation/graduation-2023
There are 3 badges available each year:
Graduation cap with a specific year
Graduation sash with a specific year
MCC Clock Tower with no year
The badge sharing is accomplished using Facebook share buttons that point to this page.
Facebook sharing requires the inclusion of the Facebook Javascript SDK in the page, as well as a codified share button in the page.
Examples (specific to MCC):
SDK call:
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v16.0" nonce="xQdAZq2Q"></script>
Share button:
<div class="fb-share-button" data-href="https://www.mesacc.edu/graduation/graduation-2023" data-layout="" data-size=""><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.mesacc.edu%2Fgraduation%2Fgraduation-2023&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
Normally Facebook shares will just use core information scraped from the page itself such as the first image in the page, its title, initial text, etc. This isn’t necessarily ideal for a student to post to their feed.
Sharing Debugger (need to be logged into Facebook): https://developers.facebook.com/tools/debug
The MCC page itself is a standard Drupal page with a custom theme template just for this specific node (e.g. html--node--2103.tpl.php). This specific template allows us to insert unique meta tags specific to Facebook.
Example inserted meta tags in the <head>:
<meta property="fb:app_id" content="419235548177083" /> <meta property="og:type" content="website" /> <meta property="og:title" content="I'm a 2023 Mesa Community College Graduate!" /> <meta property="og:description" content="I'm a 2023 Mesa Community College Graduate! Learn more about the event and how you too can become a student of MCC." /> <meta property="og:url" content="https://www.mesacc.edu/graduation/graduation-2023" /> <meta property="og:image" content="https://www.mesacc.edu/sites/default/files/pages/students/graduation/images/badge-cap-2023.jpg" /> <meta property="og:site_name" content="Mesa Community College Graduation 2023" />
These meta tags allow us to tailor the shared post more specifically. We are able to override the page’s title to “I’m a 2023 Mesa Community College Graduate!”, specify the image to use, as well as additional information. It is unknown if these meta tags can appear outside the <head>.
Below is an example of how our page shows up in the share debugger. The crop of the image changes depending on the user’s device that is accessing their friend’s feed.
(http://mesacc.edu/graduation/graduation-2023 )
We are able to have different badges for the same page by using query parameters in the URL that tell the template which image to use by changing the meta tags. This may not be necessary for most colleges that have a single badge or image.
Example of badge style #2
(http://mesacc.edu/graduation/graduation-2023 ?2)
Example URLs for our 3 badges:
The Share counts on each button are tabulated by each unique page URL, and these unique URLs are also used inside each Share button.
Each year, MCC updates this page to use the new year (e.g. graduation-2022, graduation-2023, graduation-2024). This resets the share counts each year. Behind the scenes we have a redirect that always sends older links to the current year.
In addition, we also have pre-rendered and uploaded future year badges so we can update this page to use the current year’s badges.