Facebook Sharing
- Matthew Gary Page
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.
Graduation Badges
Graduation celebration badges can be shared from your website using Facebook Sharing. 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.
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
You can create a 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.