Live Score Widgets for Third Party Sites Follow
Play-Cricket – Live Scores
We have added a second parameter to the call days=n , the default if not present is days=0. This defines the number of days to look backward for the start time. It is useful for multiday games. For instance, add &days=2 for matches which started up to 2 days ago and this will cater for a 3 day match.
Live widget description
It is now possible to embed a live score widget into your own third part web site. It looks like this:
The widget is responsive on mobile devices (providing your web site is also responsive). The illustration above is a club site, however there are 3 variation on the widget
- Club Site – display all club fixtures for today
- Club Site – display all fixture for 1 team for today
- League Site – display all fixtures for 1 division for today
It is possible to place more than 1 instance of the widget on page.
The widgets refresh independently of the page except at busy times, and in these instances the widget will display a last updated time and a manual refresh button.
To implement the widgets given they are going to be in your 3rd party web site then some knowledge of Website development is needed and coding is needed.
The Widget needs to be placed in your website code at the point it will display. For the more technically minded it is running Javascript to run a query on Play-Cricket and this then formats the widget to the screen, this means Javascript must be supported by the browser (99% plus of bowsers and most web site now use Javascript). The widget loads any CSS and libraries it needs and there is no coding needed excepting copying the code provided into your site, ensuring the correct parameters are set for ClubID, TeamID or DivisionID.
Club Live Widget
To display all live scores for a club for today copy this code into your Website
============= starts ===============
<a style="display:none;" class="lsw" href="https://www.play-cricket.com/embed_widget/live_scorer_widgets?club_id=nnnn&days=0" id="lsw_link_1526534855798"></a>
<div class="lsw-col-12 lsw_tile" id="lsw_container_1526534855798"></div>
<script type="text/javascript">function loadCSSIfNotAlreadyLoadedForSomeReason() {var ss = document.styleSheets;for (var i = 0, max = ss.length; i < max; i++){if (ss[i].href == " https://www.play-cricket.com/live_scorer.css")return;}var link = document.createElement("link");link.rel = "stylesheet";link.href = " https://www.play-cricket.com/live_scorer.css";document.getElementsByTagName("head")[0].appendChild(link);}loadCSSIfNotAlreadyLoadedForSomeReason();!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=" https://www.play-cricket.com/live_scorer.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","lsw-wjs");</script>
============= ends =================
nnnn is replaced with the ClubID in Play-Cricket.
- Where do you find the ClubID ?
- Look at the footer of your Play-Cricket site
The number 9195 is the ClubID, it is after the copyright notice, it is not the number in the brackets it is the number after the brackets.
Team Live Widget
If you want only 1 teams live scores displaying use this code
============== starts ==================
<a style="display:none;" class="lsw" href="https:// www.play-cricket.com /embed_widget/live_scorer_widgets?team_id=nnnnnn" id="lsw_link_1526534855799"></a>
<div class="lsw-col-12 lsw_tile" id="lsw_container_1526534855799"></div>
<script type="text/javascript">function loadCSSIfNotAlreadyLoadedForSomeReason() {var ss = document.styleSheets;for (var i = 0, max = ss.length; i < max; i++){if (ss[i].href == "https://www.play-cricket.com/live_scorer.css")return;}var link = document.createElement("link");link.rel = "stylesheet";link.href = "https://www.play-cricket.com/live_scorer.css";document.getElementsByTagName("head")[0].appendChild(link);}loadCSSIfNotAlreadyLoadedForSomeReason();!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https:// www.play-cricket.com/live_scorer.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","lsw-wjs");</script>
======================= ends ==============================
nnnnnn is replaced with the TeamID in Play-Cricket.
- Where do you find the TeamIDs ?
- login to admin on your site, select the setup blue button, select the Teams menu item, click the edit button against the team you want
On this screen the team ID is the 67067 in the URL at the top
League Live Widget
To display all live scores for a division within your league for today copy this code into your Website
================= starts =====================
<a style="display:none;" class="lsw" href="https://www.play-cricket.com/embed_widget/live_scorer_widgets?division_id=nnnnn&days=0" id="lsw_link_1526534855797"></a>
<div class="lsw-col-12 lsw_tile" id="lsw_container_1526534855797"></div>
<script type="text/javascript">function loadCSSIfNotAlreadyLoadedForSomeReason() {var ss = document.styleSheets;for (var i = 0, max = ss.length; i < max; i++){if (ss[i].href == " https://www.play-cricket.com /live_scorer.css")return;}var link = document.createElement("link");link.rel = "stylesheet";link.href = " https://www.play-cricket.com /live_scorer.css";document.getElementsByTagName("head")[0].appendChild(link);}loadCSSIfNotAlreadyLoadedForSomeReason();!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=" https://www.play-cricket.com /live_scorer.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","lsw-wjs");</script>
========================== ends =============================
nnnnnn is replaced with the DivisionD in Play-Cricket.
- Where do you find the DivisionIDs ?
- login to admin on your site, select the setup blue button, select the competitions menu item and the divisions submenu, click the edit button against the division you want
On this screen the DivisionID is the 76809 in the URL at the top
Advanced Section
Placing 2 or more Live_Score widgets on a page
It is possible to place 2 or more live widgets on the same page, but a small ammendement to the code is needed.
Lets assume we are going to place 2 divisions on the same league site page. The Code would look like this.
================ starts ========================
<a style="display:none;" class="lsw" href="https://www.play-cricket.com/embed_widget/live_scorer_widgets?division_id=nnnnn&days=0" id="lsw_link_1526534855797"></a>
<div class="lsw-col-12 lsw_tile" id="lsw_container_1526534855797"></div>
<script type="text/javascript">function loadCSSIfNotAlreadyLoadedForSomeReason() {var ss = document.styleSheets;for (var i = 0, max = ss.length; i < max; i++){if (ss[i].href == " https://www.play-cricket.com /live_scorer.css")return;}var link = document.createElement("link");link.rel = "stylesheet";link.href = " https://www.play-cricket.com /live_scorer.css";document.getElementsByTagName("head")[0].appendChild(link);}loadCSSIfNotAlreadyLoadedForSomeReason();!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=" https://www.play-cricket.com /live_scorer.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","lsw-wjs");</script>
<a style="display:none;" class="lsw" href="https://www.play-cricket.com/embed_widget/live_scorer_widgets?division_id=mmmm&days=0" id="lsw_link_1526534855798"></a>
<div class="lsw-col-12 lsw_tile" id="lsw_container_1526534855798"></div>
<script type="text/javascript">function loadCSSIfNotAlreadyLoadedForSomeReason() {var ss = document.styleSheets;for (var i = 0, max = ss.length; i < max; i++){if (ss[i].href == " https://www.play-cricket.com /live_scorer.css")return;}var link = document.createElement("link");link.rel = "stylesheet";link.href = " https://www.play-cricket.com /live_scorer.css";document.getElementsByTagName("head")[0].appendChild(link);}loadCSSIfNotAlreadyLoadedForSomeReason();!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=" https://www.play-cricket.com /live_scorer.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","lsw-wjs");</script>
======================= ends ============================
Note this change in the second widget, the id statements have changed to end _1526534855798
This is because these numbers tell the widget which of the 2 places on the page the contents should go to.
The numbers after the underscore in the id parameters done matter, but they must match for the widget to know where to place the code.
Customising the look of the Widget
The Widget comes with a default style sheet which is loaded as part of the process from Play-Cricket.com.
If you understand CSS it is possible to change the look and particularly colour schemes.
Can be achieved so
/* customise ECB live Score
*/
.lsw-live-btn{
padding: 0px 5px !important;
background-color: #000066 !important;
}
/* changes the button colour from red to blue and adds a bit of padding */
.lsw-header{
border: 2px solid #C02942 !important;
background-color: #C02942 !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
min-height: 60px !important;
}
/* changes the header colour from Blue to Red and adds some padding in the header; note the min-height is needed to ensure all headers are the same height and remain aligned */
.lsw_outer_div{
border: 2px solid #C02942 !important;
}
/* changes the border colour around the widget from Grey to Red */
.lsw-body{
margin-top: 10px;
min-height: 170px !important;
}
/* Adds a margin in the body; note the min-height is needed to ensure all widgets are the same height and remain aligned */
Whilst CSS customisation is allowed please do not try to customise the Javascript without our express permission. If you do so in an unapproved way the widget may well stop working if we subsequently make a change to the data fields provided. Please raise a call with the help desk and discuss with us rather before taking this approach.