[Tuto] - Ajout bouton partage articles/news ( UPDATE // -05/01/2017- // ) @NeoFrag

228 vues [Tuto] - Ajout bouton partage articles/news ( UPDATE // -05/01/2017- // )
Zaekof 38 sujets, 883 réponses Contributeurs Donateurs	Le 29/02/2016 à 21:52 Message non lu Bonjour à tous, Aujourd'hui je viens vous montrer comment simplement ajouter des boutons pour partager vos articles ou news sur twitter/facebook/email/reddit . Ainsi on commence : Vous allez déjà créer le dossier overrides dans la racine de votre serveur web, ensuite dedans le dossier modules ensuite news et pour finir le dossier views, votre chemin final doit avoir cette tête : ../overrides/modules/news/views Puis vous allez copier le fichier "index.tpl.php" qui es ici : ../modules/news/views Dans votre dossier views (../overrides/modules/news/views) que je vous et fait créer. Ouvrez votre fichier "index.tpl.php" puis ajouté/modifié les lignes suivante dans votre fichier : <div class="share-button text-right"> <!-- Email --> <a href="mailto:?Subject=BUTON DE PARTAGE&Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://TONSITE.COM"> <!-- modifie le nom de ton site ici --> <img src="http://img11.hostingpics.net/pics/618697email.png" alt="Email" /> </a> <!-- Facebook --> <a onclick="window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),'facebook-share-dialog','width=626,height=436');return false;"> <img src="http://img11.hostingpics.net/pics/781495facebook.png" alt="Facebook" /> </a> <!-- Google+ --> <a href="https://plus.google.com/share?url=https://LENOMDETONSITE.COM" target="_blank"> <!-- modifie le nom de ton site ici --> <img src="http://img11.hostingpics.net/pics/467448google.png" alt="Google" /> </a> <!-- Reddit --> <a href="http://reddit.com/submit?url=https://LENOMDETONSITE.COM&title=BOUTON DE PARTAGE" target="_blank"> <!-- modifie le nom de ton site ici --> <img src="http://img11.hostingpics.net/pics/316181reddit.png" alt="Reddit" /> </a> <!-- Twitter --> <a onclick="window.open('https://twitter.com/intent/tweet?text='+encodeURIComponent(location.href),'twitter-share-dialog','width=626,height=436');return false;"> <img src="http://img11.hostingpics.net/pics/913136twitter.png" alt="Twitter" /> </a> </div> Je vous laisse comprendre les lignes ci-dessus ^^ sauf que j'utilise `+encodeURIComponent(location.href)` pour partager la bonne url de votre article et non de l'index.. pour twitter et facebook. Attention de bien prendre le temps de modifier le lien de votre site la ou j'ai marqué : (`<!-- modifie le nom de ton site ici -->`) Ensuite il vous faut modifier ça : `<?php if ($data['tags']): ?> <hr /> <?php foreach (explode(',', $data['tags']) as $tag): ?> <a class="label label-default news-tags" href="<?php echo url('news/tag/'.url_title($tag).'.html'); ?>"><?php echo icon('fa-tag').' '.$tag; ?></a> <?php endforeach; ?> <?php endif; ?>` par ça : `<?php if ($data['tags']): ?> <hr /> <?php foreach (explode(',', $data['tags']) as $tag): ?> <div class="share-label"> <a class="label label-default news-tags" href="<?php echo url('news/tag/'.url_title($tag).'.html'); ?>"><?php echo icon('fa-tag').' '.$tag; ?></a> </div> <?php endforeach; ?> <?php endif; ?>` pour finir un petit coup de beauté, ajouté ceci à la fin du fichier : `<style type="text/css"> .share-label { display: inline-block; } .share-label a{ border: 1px solid silver; display: inline; color: gray; background-color: white; } .share-button img:hover{ cursor: pointer; } .share-button{ display: inline-block; } .share-button img { width: 35px; padding: 5px; border: 0; box-shadow: 0; display: inline; } </style>` Voilà, c'est fini voici le résultat : Mon fichier index : Voilà c'est fini j’espère vous avoir un peut aidez avec ce tuto ^^ Cdt Zaekof, "N'arrêtez jamais d'apprendre" !

228 vues

[Tuto] - Ajout bouton partage articles/news ( UPDATE // -05/01/2017- // )

Zaekof

38 sujets, 883 réponses

Contributeurs Donateurs

Le 29/02/2016 à 21:52 Message non lu

Bonjour à tous,

Aujourd'hui je viens vous montrer comment simplement ajouter des boutons pour partager vos articles ou news sur twitter/facebook/email/reddit .
Ainsi on commence :

Vous allez déjà créer le dossier overrides dans la racine de votre serveur web, ensuite dedans le dossier modules ensuite news et pour finir le dossier views, votre chemin final doit avoir cette tête :
../overrides/modules/news/views

Puis vous allez copier le fichier "index.tpl.php" qui es ici :
../modules/news/views
Dans votre dossier views (../overrides/modules/news/views) que je vous et fait créer.

Ouvrez votre fichier "index.tpl.php" puis ajouté/modifié les lignes suivante dans votre fichier :

<div class="share-button text-right">

 

 <!-- Email -->

 <a href="mailto:?Subject=BUTON DE PARTAGE&Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://TONSITE.COM"> <!-- modifie le nom de ton site ici -->

 <img src="http://img11.hostingpics.net/pics/618697email.png" alt="Email" />

 </a>



 <!-- Facebook -->

 <a onclick="window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),'facebook-share-dialog','width=626,height=436');return false;">

 <img src="http://img11.hostingpics.net/pics/781495facebook.png" alt="Facebook" />

 </a>

 

 <!-- Google+ -->

 <a href="https://plus.google.com/share?url=https://LENOMDETONSITE.COM" target="_blank"> <!-- modifie le nom de ton site ici -->

 <img src="http://img11.hostingpics.net/pics/467448google.png" alt="Google" />

 </a>

 

 <!-- Reddit -->

 <a href="http://reddit.com/submit?url=https://LENOMDETONSITE.COM&title=BOUTON DE PARTAGE" target="_blank"> <!-- modifie le nom de ton site ici -->

 <img src="http://img11.hostingpics.net/pics/316181reddit.png" alt="Reddit" />

 </a>

 <!-- Twitter -->

 <a onclick="window.open('https://twitter.com/intent/tweet?text='+encodeURIComponent(location.href),'twitter-share-dialog','width=626,height=436');return false;">

 <img src="http://img11.hostingpics.net/pics/913136twitter.png" alt="Twitter" />

 </a>

</div>

Je vous laisse comprendre les lignes ci-dessus ^^ sauf que j'utilise +encodeURIComponent(location.href) pour partager la bonne url de votre article et non de l'index.. pour twitter et facebook.

Attention de bien prendre le temps de modifier le lien de votre site la ou j'ai marqué : ()

Ensuite il vous faut modifier ça :

<?php if ($data['tags']): ?>

<hr />

<?php foreach (explode(',', $data['tags']) as $tag): ?>

<a class="label label-default news-tags" href="<?php echo url('news/tag/'.url_title($tag).'.html'); ?>"><?php echo icon('fa-tag').' '.$tag; ?></a>

<?php endforeach; ?>

<?php endif; ?>

par ça :

<?php if ($data['tags']): ?>

<hr />

<?php foreach (explode(',', $data['tags']) as $tag): ?>

<div class="share-label">

<a class="label label-default news-tags" href="<?php echo url('news/tag/'.url_title($tag).'.html'); ?>"><?php echo icon('fa-tag').' '.$tag; ?></a>

</div>

<?php endforeach; ?>

<?php endif; ?>

pour finir un petit coup de beauté, ajouté ceci à la fin du fichier :

<style type="text/css">

.share-label {

display: inline-block;

}

.share-label a{

border: 1px solid silver;

display: inline;

color: gray;

background-color: white;

}

.share-button img:hover{

cursor: pointer;

}

.share-button{

display: inline-block;

}

.share-button img {

width: 35px;

padding: 5px;

border: 0;

box-shadow: 0;

display: inline;

}

</style>

Voilà, c'est fini voici le résultat :

Mon fichier index :

Voilà c'est fini j’espère vous avoir un peut aidez avec ce tuto ^^
Cdt Zaekof,

"N'arrêtez jamais d'apprendre" !

Retour

9 participants 15 réponses
Kravoc 2 sujets, 31 réponses Donateurs	Le 02/03/2016 à 15:40 Message non lu Merci Zaekof pour ce tuto et pour toute l'aide que tu apportes à la communauté Neofrag.
Zaekof 38 sujets, 883 réponses Contributeurs Donateurs	Le 02/03/2016 à 15:51 Message non lu aha merci, pas de soucie ^^ "N'arrêtez jamais d'apprendre" !
Procyon 6 sujets, 21 réponses	Le 02/03/2016 à 16:55 Message non lu Merci, super comme modifications :D Jonathan "Procyon" - Président de la Kraken Airsoft Team (38)
AZimut 12 sujets, 159 réponses Donateurs	Le 08/09/2016 à 00:40 Message non lu Merci pour ce partage de code :) On verra le bout un jour? ...
Fantome 0 sujet, 8 réponses Donateurs	Le 08/09/2016 à 20:54 Message non lu @Zaekof si je peut me permettre une petite modif pour avoir le lien de l'article même sur la page d'accueil des articles qui n'est pas le cas actuellement : <?php $url_share = "http://" . $_SERVER['SERVER_NAME'] . url('news/'.$data['news_id'].'/'.url_title($data['title']).'.html'); ?> <a onclick="window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('<?php echo $url_share ?>'),'facebook-share-dialog','width=626,height=436');return false;" class="lien_partage" href="#"><?php echo icon('fa-share'); ?> Facebook</a> <a onclick="window.open('https://twitter.com/intent/tweet?text='+encodeURIComponent('<?php echo $url_share ?>'),'twitter-share-dialog','width=626,height=436');return false;" class="lien_partage" href="#"><?php echo icon('fa-share'); ?> Twitter</a> Merci pour ton bout de code.
Zaekof 38 sujets, 883 réponses Contributeurs Donateurs	Le 20/10/2016 à 19:41 Message non lu merci à toi d’apporté ta modification ! "N'arrêtez jamais d'apprendre" !
XXL Showtime 4 sujets, 24 réponses Donateurs	Le 02/11/2016 à 13:56 Message non lu pour infos ne marche plus avec la version 0.1.5 j'ai du supprimer le répertoire Overrides pour que mon site fonctionne à nouveau.
amir_games 17 sujets, 132 réponses Donateurs	Le 08/11/2016 à 01:49 Message non lu XXL Showtime je viens de le faire et sa fonctionne parfaitement, as-tu installer le correctif Neofrag 0.1.5.1 ? Gérant de la communauté Inferia Gaming
Zaekof 38 sujets, 883 réponses Contributeurs Donateurs	Le 08/11/2016 à 08:22 Message non lu moi aussi, de mon coté j'ai fait des tests, et il fonctionne encore. Je vais quand même essayé de faire des mise à jour niveau design est codage (optimisation) "N'arrêtez jamais d'apprendre" !
XXL Showtime 4 sujets, 24 réponses Donateurs	Le 08/11/2016 à 13:22 Message non lu mea culpa je n'ai pas pensé à refaire la modification avec cette fois le fichier de la nouvelle version. Merci.
Tealk 3 sujets, 68 réponses	Le 06/12/2016 à 21:35 Message non lu J'ai essayer ceci pour ajouter google+ mais sa ne marche pas : `<a onclick="window.open('https://plus.google.com/share?url='+encodeURIComponent('<?php echo $url_share ?>'),'google-share-dialog','width=626,height=436');return false;" class="label label-default news-tags" href="#"><?php echo icon('fa-share'); ?> Google+</a>` Une idée ??
matrix59 8 sujets, 46 réponses	Le 27/12/2016 à 00:17 Message non lu merci sa fonctionne pour moi Version actuel : 1.5.3 Monotoring : CONSEILIl est recommandé d'utiliser PHP 7 voila faut juste je modifie le css pour les couleurs et c'est top encore merci
Zaekof 38 sujets, 883 réponses Contributeurs Donateurs	Le 05/01/2017 à 18:21 Message non lu tutoriel mise à jour. "N'arrêtez jamais d'apprendre" !
matrix59 8 sujets, 46 réponses	Le 06/01/2017 à 03:06 Message non lu tutoriel mise à jour. merci a toi pour cette mise a jour qui fait plus jolie deja :)
Zaekof 38 sujets, 883 réponses Contributeurs Donateurs	Le 06/01/2017 à 06:39 Message non lu oui c'est un peut plus beau ;) @matrix59 Des nouvelles mise à jour va arriver se week-end encore. "N'arrêtez jamais d'apprendre" !

Retour

[Tuto] - Ajout bouton partage articles/news ( UPDATE // -05/01/2017- // )

[Tuto] - Ajout bouton partage articles/news ( UPDATE // -05/01/2017- // )

15 réponses