The Hub provides you with quick scripts you can copy and paste onto your website to show upcoming events from around the country. There are a variety of options to fine-tune how the events appear (such as showing events from grassroots only & selecting the number of events).

However, if you want complete control over the look and feel of the events, you can utilise The Hub's API to do just that. The tutorial below has the full code required to get events on your website, styled to appear like Facebook.

Pre-requisites

To work with The Hub's API, you'll need an API Key. This key is unique to each developer for security reasons. It means that - for whatever reason - access to the API can be revoked if required. To get an API Key, email me at mail@thehub.scot.

This tutorial is also done using PHP. In particular, it makes use of the cURL function, so it should be easy to port this tutorial to other coding languages that you use.

Getting Events From The API

The API is set up to be extremely easy to use. First, we set the API Key and API Path...

$apiKey = "YOUR_API_KEY";
$apiPath = "https://thehub.scot/api";

Then we set the options in the API call itself...

$fields = array(
	'appSecret' => urlencode($apiKey),
	'grassRoots' => urlencode("true"),
	'eventLimit' => urlencode("5")
);

"eventLimit" can be any number between 0 and 20. This is the number of events the API will return in its results. "grassRoots" will show events from only Yes groups if set to "true", otherwise it will list all events on The Hub (including those by other political parties).

Once we've done that, we connect to the API using cURL, and prepare to parse the results. Here is the complete PHP code to get the events from The Hub:

$apiKey = "YOUR_API_KEY";
$apiPath = "https://thehub.scot/api";

$url = $apiPath.'/events/upcoming';

$fields = array(
	'appSecret' => urlencode($apiKey),
	'grassRoots' => urlencode("true"),
	'eventLimit' => urlencode("5")
);

foreach($fields as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }
rtrim($fields_string, '&');

$ch = curl_init();

$user_agent = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36";
$referer = "https://thehub.scot"; 

//set the url, number of POST vars, POST data
curl_setopt($ch, CURLOPT_USERAGENT, $user_agent);
curl_setopt($ch, CURLOPT_REFERER, $referer);	
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE); 
curl_setopt($ch,CURLOPT_URL, $url);
curl_setopt($ch,CURLOPT_POST, count($fields));
curl_setopt($ch,CURLOPT_POSTFIELDS, $fields_string);
curl_setopt($ch, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4 );

//execute post
$result = curl_exec($ch);

	if($errno = curl_errno($ch)) {
	$error_message = curl_strerror($errno);
	echo "cURL error ({$errno}):\n {$error_message}";
}

curl_close($ch);	

$jsonResult = json_decode($result, true);

$i = 0;
$countResults = count($jsonResult);

while($i < $countResults){

if($jsonResult[$i]['post_type']=='post_event'){
	echo showEvent(json_encode($jsonResult[$i]));	
}

$i++;

}

Styling API Results

Now we have our results, we can take the parts of the data we want, and style it using HTML and CSS. To make your events display like Facebook does, we use the following in our stylesheet (note: I've also including styling to enable responsive displaying of results):

 <style>
 html{
 font-family: 'Open Sans', sans-serif;
 }
 a{
 text-decoration:none;
 color: black;
 }
 .shareEmbedEventWrapper{
 width: calc(100% - 40px);
 float: left;
 padding: 20px;
 display: flex;
 align-items: center;
 }
 .shareEmbedEventContent{
 float: left;
 width: calc(100% - 150px);
 }
 .shareEmbedEventAvatar,
 .shareEmbedEventAvatar img{
 border-radius: 60px;
 width: 120px;
 height: 120px;
 }
 .shareEmbedEventDate{
 float: left;
 padding-left: 20px;
 vertical-align: top;
 font-weight: bold;
 color: #f0284a;
 text-transform: uppercase;
 font-size: 14px;
 }
 .shareEmbedEventTitle{
 line-height: 28px;
 font-weight: 700;
 font-size: 20px;
 padding-left: 20px;
 padding-top: 5px;
 padding-bottom: 5px;
 float: left;
 width: 100%;
 }
 .shareEmbedEventName{
 font-weight: normal;
 line-height: 1.1765;
 font-size: 17px;
 padding-left: 20px;
 float: left;
 width: 100%;
 clear:both;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 position: relative;
 }
 
 @media only screen and (max-width: 500px) {
 .shareEmbedEventWrapper{
 width: calc(100% - 20px);
 float: left;
 padding: 10px;
 }
 .shareEmbedEventContent{
 float: left;
 width: calc(100% - 100px);
 }
 .shareEmbedEventAvatar,
 .shareEmbedEventAvatar img{
 border-radius: 40px;
 width: 80px;
 height: 80px;
 }
 .shareEmbedEventDate{
 padding-left: 10px;
 font-size: 12px;
 }
 .shareEmbedEventTitle{
 line-height: normal;
 font-size: 16px;
 padding-left: 10px;
 padding-top: 5px;
 padding-bottom: 5px;
 }
 .shareEmbedEventName{
 font-size: 14px;
 padding-left: 10px;
 } 
 }
 </style>

In our original API call, I listed a function called "showEvent". We create this function to loop through the results, parsing the data how we want:

function showEvent($jsonContent){
 
 $hubDomain = "https://thehub.scot";
 
 $jsonArray = json_decode($jsonContent, true);
 
 ?>
 
 <div class="itemWrapper">
 <div class="shareEmbedEventWrapper">
 
 <div class="shareEmbedEventAvatar" style="float: left;">
 <a href="<?php echo $hubDomain; ?>/<?php echo $jsonArray['post_author']['group_handle']; ?>">
 <img loading="lazy" src="<?php echo $jsonArray['post_author']['group_avatar']; ?>" />
 </a>
 </div>

 <div class="shareEmbedEventContent">
 <div class="shareEmbedEventDate">
 <?php echo $jsonArray["post_content"]["event"]["start_date_formatted"]; ?>
 </div> 
 <div class="shareEmbedEventTitle">
 <a target="_blank" href="<?php echo $jsonArray['post_content']['event']['link']; ?>">
 <?php echo $jsonArray['post_content']['event']['title']; ?>
 </a>
 </div>
 <div class="shareEmbedEventName">
 <a href="<?php echo $hubDomain; ?>/<?php echo $jsonArray['post_author']['group_handle']; ?>">
 <?php echo $jsonArray['post_author']['group_name']; ?>
 </a>
 </div>
 </div>
 </div>
 </div>
 
 <?php
 
}

Combining all this, you will end up with events displayed exactly how The Hub shows it with the embed code:

The full code can be downloaded from here.

Leave a Reply

Your email address will not be published. Required fields are marked *