template

test.php

function get_endossometro() {
	return '
		<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase.js"></script>
		<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>
		<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-firestore.js"></script>
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	
		<script>
			var config = {
				apiKey: "AIzaSyCXdDa8kZhpYhCruBhd1LmuHxkP42_lvzg",
				authDomain: "endeavor-e2018.firebaseapp.com",
				projectId: "endeavor-e2018"
			};
			firebase.initializeApp(config);
	
			var db = firebase.firestore();
		</script>
	
	<div class="container">
		<div class="row">
			<div class="col-sm">
				<span class="counter" id="total"></span>
			</div>
			<div class="col-sm">
				<p>Endosse por:
				<a href="http://twitter.com.br/">
					<img src="/images/compartilhar-twitter.png">
				</a>

				<a href="javascript:;" id="fb_share">
					<img src="/images/compartilhar-facebook.png">
				</a>
				</p>
			</div>
			<div class="col-sm">
				<a href="" class="btn_agenda">
					Conheça a agenda
				</a>
			</div>
		</div>
	</div>
	<style>
			.btn_agenda {
				padding: 0 30px;
				box-sizing: border-box;
				font: 18px/50px Montserrat-Medium,Helvetica,Arial,sans-serif;
				text-decoration: none;
				color: #fff;
				background-color: #1b9897;
				border: 0;
				border-radius: 3px;
				transition: background-color .4s;
			}
	
	<script>

		var total = 0;
		db.collection("twitter").doc("total_retweets")
			.onSnapshot(function(doc) {
				console.log("Current data: ", doc.data());
				document.getElementById("retweets").innerText = doc.data().total;
				document.getElementById("count").innerText = doc.data().count;
				total = total + doc.data().count;
			});
	
		db.collection("facebook").doc("likes")
			.onSnapshot(function(doc) {
				console.log("Face Current data: ", doc.data());
				document.getElementById("likes").innerText = doc.data().total;
				total = total + doc.data().count;
			});

			$("#fb_share").on("click", function(){
				$.ajax({
					url: "https://endeavor-2018e.herokuapp.com/facecount",
					type: "post",
					success: function(data) {
						window.open("https://www.facebook.com/sharer.php?u=endevor.org.br&summary=MySummary&title=MyTitle&description=MyDescription", "ventanacompartir", "toolbar=0, status=0, width=650, height=450");
					}
				});
			});

			$("#total").html(total);
	</script>
';
}
add_shortcode('get_endossometro', 'get_endossometro');