Web Designer & Web Developer WordPress, SEO, HTML5, JQuery e molto altro. Piccoli articoli per grandi progetti!




widget instagram SnapWidget

SnapWidget

Visualizzare automaticamente i vostri contenuti

L'importanza dei social è sempre più evidente; sopratutto se devono interagire con pagine web.
SnapWidget è un generatore di <iframe> per visualizzare tutte le tue immagni di Instagram, Twitter e Facebook sia sul tuo sito che sul tuo blog, semplice e veloce da usare.

Ovvimante prevede tariffe a pagamento, ma anche una versione gratuita FREE!

Abbiamo la possiblità di generare griglie, slide a molto altro ancora, ottimo compromesso per valutare e testare l'inseroimento di contenuti social.

Inoltre possiamo anche interagire con i CSS forzando l'iframe generato, nella versione Pro abbiamo molte più funzioni e articolate in maniera molto professionale.

Piccolo esempio per centrare il nostro iframe è renderlo fluido:

<!-- SnapWidget -->
<iframe class="snapwidget-widget" style="border: none; overflow: hidden; width: 390px; height: 390px;" src="https://snapwidget.com/embed/" width="300" height="150" frameborder="0" scrolling="no"></iframe>

andremo a implementare la classe .snapwidget-widget:

.snapwidget-widget {margin:0 auto; display:block; width:100%; max-width:1200px;border: none; overflow: hidden;} 

nulla di complesso

<!-- Pulito -->
  <iframe class="snapwidget-widget"  src="https://snapwidget.com/embed/" scrolling="no"></iframe>

Qui potete visitare il sito link

Implementare widget per WordPress

Implementare widget per WordPress

Implemetare widget non nativi per WordPress spesso e fondamantale per creare e gestire contenuti dinamici.
Nel nostro caso creeremo il nostro widget.

 Per prima cosa andremo a modificare il file:   themes > il tuo tema > functions.php
Andremo a inserire il codice dentro:

function widgets_init() {

register_sidebar( array(
'name' => esc_html__( 'Titlo che sarà visibile dentro l'area WP' ),
'id' => 'titolo_applicativo',
'description' => 'descrizione',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
) );

Questo codice ci servira a definire il widget, dentro il pannello di controllo di Worpress. (esempio)

Adesso dobbiamo richiamere il widget all'interno dei template oppure dentro i vari partials, dipende dalle vostre esigenze per rendere tuto sempolice provate all'interno del footer.php (esempio)

Adesso allinteno del nostro file footer.php inseriremmo questo codice:

  <?php if ( ! is_active_sidebar( 'titolo_applicativo' ) ) { return;}?>
<?php dynamic_sidebar( 'titolo_applicativo' ); ?>

Cosi richiamerete il widgets nella pagina.

Home