Andres Hunger UX Web designer  
WINNER OF THE DAY Featured of the Day Boostlizer



Translate

Pages

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.

HTML5  web Developer Andres Hunger
CSS3 web Developer Andres Hunger
javascript web Developer Andres Hunger
jQuery web Developer Andres Hunger
Bootstrap Andres Hunger Blog
WP Developer Andres Hunger