AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-17%
Le deal à ne pas rater :
Casque de réalité virtuelle Meta Quest 2 128 Go Blanc (+29,99€ ...
249.99 € 299.99 €
Voir le deal

    Personnaliser widget twitter

    AlexeB
    AlexeB
    FémininAge : 28Messages : 165

    Mer 18 Fév 2015 - 16:22

    Widget Twitter



    Coucou!
    Alors voilà, mon équipe et moi voudrions avoir un widget twitter. Par contre, celui-ci est beaucoup trop gros pour pouvoir l'intégrer à notre page d'accueil.

    Comme je n'ai jamais fait ce genre de codage et que je ne sais pas du tout par où commencer, je m'en réfère à vous!

    Merci d'avance! cheers


    Schéma(s) et Eléments
    Schémas : Nous n'avons pas de schémas, mais nous savons de quelle grandeur nous le voulons ou alors tout simplement être en position de pouvoir modifier la taille comme nous le désirons.
    Tailles des éléments : Environ 200px par 270px, mais comme dis plus haut, le top serait de pouvoir modifier cette taille comme nous le désirons :siffle:
    Effets voulus : Je dois avouer qu'un arrondi et un ombrage pas trop prononcé serait top... :siffle:
    Version de votre forum : PHPBB2,


    Ressources
    Je crois que la seule ressource nécessaire est notre code twitter... mais ne m'y connaissant pas, je n'en suis pas certaine Arrow
    Code:
    <a class="twitter-timeline" href="https://twitter.com/LEBARMAN_fiawtt" data-widget-id="570615279773024256">Tweets de @LEBARMAN_fiawtt</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


    Autres précisions ?
    Je crois que c'est tout, si vous avez besoin d'autres informations, n'hésitez pas! :)


    Dernière édition par AlexeB le Jeu 26 Fév 2015 - 16:31, édité 2 fois
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 23 Fév 2015 - 5:00

    Salut!

    Je déplace cette demande dans "demande autre codage" puisqu'il ne s'agit pas d,un élément de forum (Pa, Qeel, Catégories et compagnie)



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 25 Fév 2015 - 14:23

    Hello Axele :)

    Est ce que tu pourrais liste toutes les modifications que tu veux apporter au fil facebook en comparant avec l'affichage normal ?

    Normalement l'affichage normal est par exemple :
    Personnaliser widget twitter AAau0iE

    Si j'entoure des parties que tu veux enlever :
    Personnaliser widget twitter 1424870412-facebook

    Rouge => L'entête disparait
    Bleu => Les barres de séparation s'enlèvent
    Orange => Le nom de la page + la date est enlevée (+ la photo passe juste à gauche)

    Quand on scroll, il y a les boutons de like / partage, tu veux les garder ou pas ?
    Personnaliser widget twitter 1424870494-facebook1
    AlexeB
    AlexeB
    FémininAge : 28Messages : 165

    Jeu 26 Fév 2015 - 16:25

    Aaaahhh merci de proposer ton aide! *o*
    Par contre, le staff a décidé de faire un changement de dernière minute ... serait-il possible de modifier le widget de twitter?

    Nous voudrions le cadrer dans la PA, donc environ 200px de largeur et 270px de hauteur, nous ne voulons pas quelque chose d'extrêmement imposant :siffle:

    Code:
    <a class="twitter-timeline" href="https://twitter.com/LEBARMAN_fiawtt" data-widget-id="570615279773024256">Tweets de @LEBARMAN_fiawtt</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

    Merci!
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 26 Fév 2015 - 16:50

    Du coup tu veux quoi comme rendu maintenant ?

    Si je découpe l'affichage en différente zone, ça donne ça :
    Personnaliser widget twitter 1424965748-facebook

    Tu gardes tous les éléments ? Tu veux changer quelles dimensions ?
    L'arrondi et l'ombrage seraient sur quelles parties ? :)

    AlexeB
    AlexeB
    FémininAge : 28Messages : 165

    Jeu 26 Fév 2015 - 19:01

    On veut tout garder sauf la partie en mauve et tout redimensionner pour qu'au total, ce soit ces dimensions : 200x316 avec un arrondi si possible ... on peut voir un schémas très très simple sur notre forum test : http://toolate.frbb.net/

    Merci!
    AlexeB
    AlexeB
    FémininAge : 28Messages : 165

    Mar 3 Mar 2015 - 18:28

    Petit up svp?
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 7 Mar 2015 - 19:57

    Hello :)

    * voit son pseudo dans le titre : Hey mais j'ai jamais dit que je prenais cette demande T-T *

    Alors, c'est encore plus simple pour Twitter :)

    Tout est expliqué ici : https://dev.twitter.com/web/embedded-timelines#dimensions

    Le seul problème avec le code qu'ils donnent, c'est que dans la PA de forumactif, on ne peut pas mettre directement le code
    Code:
    <a class="twitter-timeline"
    width="200"
    height="316"
    href="https://twitter.com/LEBARMAN_fiawtt"
    data-widget-id="570615279773024256">
    Tweets by @LEBARMAN_fiawtt
    </a>

    Il va le remplacer en mettant les attributs de largeur et de hauteur dans l'attribut style et ça ne fonctionnera plus, et ça donnera ça, qui ne fonctionne pas :
    Code:
    <a style="width: 200px; height: 316px;" class="twitter-timeline" href="https://twitter.com/LEBARMAN_fiawtt" data-widget-id="570615279773024256">Tweets by @LEBARMAN_fiawtt </a>

    Pour régler ce problème, il suffit de passer par une iframe (^-^).

    1/ Tu crées une page HTML avec ce code de base, tu peux personnaliser les dimensions :
    Code:
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Fil Twitter</title>
        <style>body {margin: 0}</style>
    </head>
     
    <body>
        <a class="twitter-timeline" width="200" height="265" href="https://twitter.com/LEBARMAN_fiawtt" data-widget-id="570615279773024256">
          <img src="http://i.imgur.com/7F56UcP.png" alt="Flux twitter"/>
        </a>
        <script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>
    </body>
    </html>

    Ici, tu peux changer les dimensions :)

    Tu peux voir qu'à l'intérieur du lien j'ai mis une image :
    Code:
    <img src="http://i.imgur.com/7F56UcP.png" alt="Flux twitter"/>
    Il s'agit simplement de l'élément affiché en attendant que le flux twitter soit chargé, tu peux la remplacer par un texte si tu veux.

    Plus qu'à valider la page HTML et garder son url.

    2 / Dans ta PA, tu ajoutes l'iframe :
    Code:
    <iframe style="width: 200px; height: 270px;" src="URL_PAGE_HTML" frameborder="0"></iframe>

    Si tout va bien, à la fin cela te donnera quelque chose un peu comme ça ♥
    Personnaliser widget twitter B9zjbZE
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 9 Mar 2015 - 5:41

    My bad, je pensais que c'était pour ça que tu posais autant de questions /sort

    J'ai enlevé ton nom, sens-toi libre de continuer ou non si AlexeB a encore besoin de quelque chose suite à ton dernier message Wink



    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 22 Mar 2015 - 4:32

    Bonsoir,

    Alexe, tu as vu la réponse de Nihil? Merci de donner signe de vie d,ici 10 jours si tu ne veux pas que le sujet soit archivé Wink



    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 1 Avr 2015 - 5:01

    Pas de nouvelles, donc j'archive ~



    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Avr 2024 - 17:39