Come aggiungere il Badge di Google Plus in un sito web

Nei post precedenti abbiamo visto Come creare il Badge di Google Plus e Come aggiungere il Badge di Google Plus in WordPress. In questa guida vedremo Come aggiungere il Badge di Google Plus in un sito web aggiungendo il codice, generato in fase di creazione, direttamente nel codice html.

Come aggiungere il Badge di Google Plus in un sito web

Per poter procedere dobbiamo avere a disposizione il codice sorgente della pagina in cui vogliamo inserire il badge.
Supponiamo di avere a disposizione una pagina formattata in questo modo:

<!DOCTYPE html>
<html lang="it">
	<head>
		<meta charset="utf-8">
		<title>Titolo pagina sito web</title>
		<link href="css/stile.css" rel="stylesheet">
	</head>
	<body data-rsssl=1>
		<header> 
   			<h1>Nome del sito</h1>
     		<h2>Motto</h2>
  		</header>
  
	  	<nav>
	    	<ul>
	        	<li><a href=”#”>link1</a></li>
	          	<li><a href=”#”>link2</a></li>
	     	</ul>
	   	</nav>

		<section>
			<header>Header articolo</header>

			<article>Contentuto articolo</article>
   
			<footer>Footer Articolo</footer>
		</section>

		<aside>
			Contenuto aside
		</aside>
  
		<footer>
		</footer>
	</body>
</html>

Quello che dobbiamo fare è individuare la posizione in cui vogliamo che compaia il badge della nostra pagina social.
Potremmo aggiungere il codice,per la visualizzazione del badge, all’interno del tag html <aside></aside> in questo modo:

[...]
<aside>
	<!-- Posiziona questo tag all'interno del tag head oppure subito prima della chiusura del tag body. -->
	<script src="https://apis.google.com/js/platform.js" async defer>
	{lang: 'it'}
	</script>

	<!-- Inserisci questo tag nel punto in cui vuoi che sia visualizzato l'elemento widget. -->
	<div class="g-page" data-href="https://plus.google.com/113247961264893132765" data-theme="dark" data-layout="landscape" data-rel="publisher"></div>
</aside>
[...]

Ora non ci resta che salvare la nostra pagina e visualizzarla con il browser per vedere se il badge è stato inserito e se viene visualizzato correttamente.

Alla prossima 😉

Come aggiungere il Badge di Google Plus in un sito web

Articoli Correlati

Lascia un commento Annulla risposta