Icône réseaux sociaux sous mes articles [Réglé]
benflovideo Membre non connecté
-
Modérateur
- Voir le profil du membre benflovideo
- Inscrit le : 13/03/2010
- Groupes :
-
Equipe Modération
-
Equipe Communication
Reprise du message précédent
La partie "javascript" a t-elle été faite ?Postez ici tout les codes modifiés, dans la balise code.
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Pourquoi entre les balises <footer> alors que tu voulais mettre ton script en haut de l'article, dans la balise <header> ?
Olivier.
Olivier
janus57 Membre non connecté
-
Booster Fusée
- Voir le profil du membre janus57
- Inscrit le : 07/12/2007
- Groupes :
-
Equipe Assistance
sur votre site je ne vois ni JS ni code qui permet l'affichage des bouton sur vos articles donc…
Enfin je le répète le tuto n'est plus à jour (voir remarque) vu que celui-ci avait été fait pour la V4.1.
Si je vais directe sur la partie documentation de facebook pas/plus besoin d'avoir une application pour utiliser le bouton de partage
Les variables TPL présent en V5.0 permet (normalement) d'automatiser le tout à 100%
Enfin il faut obligatoirement afficher le message sur les cookies car là FB & cie vont placer des cookies de tracking.
Sauf à utiliser une solution tiers et/ou qui ne necessite pas des appel/api/dsk chez les réseaux sociaux (et ça existe il me semble l'avoir fait pour VTT64)
Cordialement, janus57
Aurélien Reffay Membre non connecté
-
Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Comment ça JAVASCRIPT, dois-je obligatoirement me rendre sur Facebook développer ?
Cordialement.
benflovideo Membre non connecté
-
Modérateur
- Voir le profil du membre benflovideo
- Inscrit le : 13/03/2010
- Groupes :
-
Equipe Modération
-
Equipe Communication
La réponse s'y trouve...
Et pour rappel...
benflovideo :Postez ici tout les codes modifiés, dans la balise code.
Édité par benflovideo Le 14/02/2017 à 19h16
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
janus57 Membre non connecté
-
Booster Fusée
- Voir le profil du membre janus57
- Inscrit le : 07/12/2007
- Groupes :
-
Equipe Assistance
Faut quand même changer le "adresse-du-site" par votre adresse.
Bonjour,
plus besoin en V5.0, normalement il existe une variable TPL qui indique l'URL en entier, d'où le fait que j'arrête pas de dire que le tuto n'est plus à jour (fait en 2014 le tuto quand même).
Cordialement, janus57
Aurélien Reffay Membre non connecté
-
Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Janus57, "Donc...", quoi ? J'ai bien compris que le tutoriel n'étais par à jour, j'ai lu la doc pour facebbook, twitter et google plus mais il me dise de me rendre dans un lien ce que je fais ensuite par exemple pour twitter il me donne une aperçu d'un code pour le bouton mais je suis perdu je ne vois pas ce que je dois faire de ce code.
Et sur le forum certains me dise de modifier des choses et d'autres l'inverse, en gros cela ne m'avance pas, je ne vois toujours pas comment faire.
Et pour les cookies je ne sais pas comment faire il y a quelques temps, j'ai essayé mais je n'ai pas trouvé.
En attente d'une réponse qui pourrait enfin me faire comprendre quelle procédure effectuer.
Cordialement.
Édité par Aurélien Reffay Le 14/02/2017 à 20h15
benflovideo Membre non connecté
-
Modérateur
- Voir le profil du membre benflovideo
- Inscrit le : 13/03/2010
- Groupes :
-
Equipe Modération
-
Equipe Communication
benflovideo :
Et pour rappel...
Et pour rappel...
benflovideo :
Postez ici tout les codes modifiés, dans la balise code.
Si dans votre prochain post il n'y a pas les codes modifiés + une description précise de ce qui a été fait je verrouille le sujet.
On ne peut pas avancer si la seule chose que vous nous dites c'est "ça marche pas".
Édité par benflovideo Le 14/02/2017 à 22h40
Aurélien Reffay Membre non connecté
-
Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Voici le code que j'ai modifié dans le fichier articlesdisplayarticlescontroller.tpl, si ce n'est pas cela que vous souhaitiez obtenir, merci de m'indiqué clairement ce que vous souhaitez je suis néophyte comme je l'ai dit auparavant et la doc j'ai du mal alors si sur ce forum quelqu'un peu m'aider...
PS: J'ai demandé auparavant "comment ça changer le javascript et à part me dire qu'il n'y avait pas de codes, personne n'a répondu à ma question comment voulez vous que je vous donne le bon code.
J'ai lu la doc mais je ne l'a comprend pas totalement, il me faut juste une personne qui m'aide à comprendre cette dernière.
Code HTML :
<section id="module-articles"> <header> <a href="https://twitter.com/share" class="twitter-share-button" data-via="S_OS_HighTech">Tweet</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> <h1> <a href="{U_SYNDICATION}" title="${LangLoader::get_message('syndication', 'common')}"><i class="fa fa-syndication"></i></a> {@articles}# IF NOT C_ROOT_CATEGORY # - {CATEGORY_NAME}# ENDIF # # IF IS_ADMIN #<a href="{U_EDIT_CATEGORY}" title="${LangLoader::get_message('edit', 'common')}"><i class="fa fa-edit smaller"></i></a># ENDIF # </h1> </header> <div class="content"> # INCLUDE NOT_VISIBLE_MESSAGE # <article itemscope="itemscope" itemtype="http://schema.org/Article" id="article-articles-{ID}" class="article-articles"> <header> <h2> <span itemprop="name">{TITLE}</span> <span class="actions"> # IF C_EDIT # <a href="{U_EDIT_ARTICLE}" title="${LangLoader::get_message('edit', 'common')}"><i class="fa fa-edit"></i></a> # ENDIF # # IF C_DELETE # <a href="{U_DELETE_ARTICLE}" title="${LangLoader::get_message('delete', 'common')}" data-confirmation="delete-element"><i class="fa fa-delete"></i></a> # ENDIF # <a href="{U_PRINT_ARTICLE}" title="${LangLoader::get_message('printable_version', 'main')}" target="blank"><i class="fa fa-print"></i></a> </span> </h2> <div class="more"> # IF C_AUTHOR_DISPLAYED # <i class="fa fa-user" title="${LangLoader::get_message('author', 'common')}"></i> # IF C_AUTHOR_EXIST #<a itemprop="author" href="{U_AUTHOR}" class="{USER_LEVEL_CLASS}" # IF C_USER_GROUP_COLOR # style="color:{USER_GROUP_COLOR}"# ENDIF #> {PSEUDO} </a># ELSE #{PSEUDO}# ENDIF #| # ENDIF # <i class="fa fa-calendar" title="${LangLoader::get_message('date', 'date-common')}"></i> <time datetime="# IF NOT C_DIFFERED #{DATE_ISO8601}# ELSE #{PUBLISHING_START_DATE_ISO8601}# ENDIF #" itemprop="datePublished"># IF NOT C_DIFFERED #{DATE}# ELSE #{PUBLISHING_START_DATE}# ENDIF #</time> | <i class="fa fa-eye" title="{NUMBER_VIEW} {@articles.sort_field.views}"></i> <span title="{NUMBER_VIEW} {@articles.sort_field.views}">{NUMBER_VIEW}</span> # IF C_COMMENTS_ENABLED # | <i class="fa fa-comment" title="${LangLoader::get_message('comments', 'comments-common')}"></i><a itemprop="discussionUrl" class="small" href="{U_COMMENTS}"> {L_COMMENTS}</a> # ENDIF # | <i class="fa fa-folder" title="${LangLoader::get_message('category', 'categories-common')}"></i> <a itemprop="about" class="small" href="{U_CATEGORY}">{CATEGORY_NAME}</a> # IF C_KEYWORDS # | <i title="${LangLoader::get_message('form.keywords', 'common')}" class="fa fa-tags"></i> # START keywords # <a itemprop="keywords" href="{keywords.URL}">{keywords.NAME}</a># IF keywords.C_SEPARATOR #, # ENDIF # # END keywords # # ENDIF # </div> <meta itemprop="url" content="{U_ARTICLE}"> <meta itemprop="description" content="${escape(DESCRIPTION)}"> <meta itemprop="datePublished" content="# IF NOT C_DIFFERED #{DATE_ISO8601}# ELSE #{PUBLISHING_START_DATE_ISO8601}# ENDIF #"> <meta itemprop="discussionUrl" content="{U_COMMENTS}"> # IF C_HAS_PICTURE #<meta itemprop="thumbnailUrl" content="{PICTURE}"># ENDIF # <meta itemprop="interactionCount" content="{NUMBER_COMMENTS} UserComments"> </header> <div class="content"> # IF C_PAGINATION # # INCLUDE FORM # <div class="spacer"></div> # ENDIF # # IF PAGE_NAME # <h2 class="title page_name">{PAGE_NAME}</h2> # ENDIF # <div itemprop="text">{CONTENTS}</div> [line] # IF C_PAGINATION # <div class="pages-pagination right"> # IF C_NEXT_PAGE # [url={U_NEXT_PAGE}]{L_NEXT_TITLE} <i class="fa fa-arrow-right"></i>[/url] # ELSE # # ENDIF # </div> <div class="pages-pagination center"># INCLUDE PAGINATION_ARTICLES #</div> <div class="pages-pagination"> # IF C_PREVIOUS_PAGE # [url={U_PREVIOUS_PAGE}]<i class="fa fa-arrow-left"></i> {L_PREVIOUS_TITLE}[/url] # ENDIF # </div> # ENDIF # <div class="spacer"></div> </div> <aside> # IF C_SOURCES # <div id="articles-sources-container"> <span>${LangLoader::get_message('form.sources', 'common')}</span> : # START sources # <a itemprop="isBasedOnUrl" href="{sources.URL}" class="small">{sources.NAME}</a># IF sources.C_SEPARATOR #, # ENDIF # # END sources # </div> # ENDIF # # IF C_DATE_UPDATED # <div><i>${LangLoader::get_message('form.date.update', 'common')} : <time datetime="{DATE_UPDATED_ISO8601}" itemprop="datePublished">{DATE_UPDATED}</time></i></div> # ENDIF # <div class="spacer"></div> # IF C_NOTATION_ENABLED # <div class="left smaller"> {KERNEL_NOTATION} </div> # ENDIF # <div class="spacer"></div> # IF C_COMMENTS_ENABLED # # INCLUDE COMMENTS # # ENDIF # </aside> <footer></footer> </article> </div> <footer></footer> </section>
Merci d'avance de votre compréhension.
Cordialement.
Édité par Aurélien Reffay Le 15/02/2017 à 00h01
Swan Membre non connecté
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
On reste calme car je sens beaucoup d'énervement, et d'incompréhension ..Donc on va expliquer point par point.
Pour faire simple :
1/ Est ce que dans votre thème vous avez édité le frame.tpl et intégré ce bout de code :
Code HTML :
<script type="text/javascript"> !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>
Dans cette partie comme ceci :
Code HTML :
<body itemscope="itemscope" itemtype="http://schema.org/WebPage"> # INCLUDE BODY # # INCLUDE JS_BOTTOM # <!-- twitter share --> <script type="text/javascript"> !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> </body>
2/ Ensuite vous le voulez dans le module articles, Donc toujours dans votre thème vous devez créer/avoir un dossier "modules" qui contient/contiendra le dossier "articles", dans lequel vous copierez les 2 fichiers suivants, que vous modifierez par la suite :
- ArticlesDisplayArticlesController.tpl
- ArticlesDisplaySeveralArticlesController.tpl
3/ Une fois fait ceci rendez-vous sur => https://about.twitter.com/fr/resources/buttons et choisissez votre boutons ( pour exemple, je prends le premier ..)
Avec la connexion sur mon compte de la page EDN ceci donne :
Code HTML :
<a href="https://twitter.com/share" class="twitter-share-button" data-via="EasyDesignNet" data-lang="fr" data-size="large">Tweeter</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>
Donc dans cette récupération si j'ai bien suivi le tutoriel, je ne prends que le lien, <a href...>Tweeter</a>, vu que la partie javascript est déjà intégré dans le "frame.tpl" ce que vous avez fait plus haut. Il ne nous reste donc qu'à intégré le code ci-dessous dans les "xxxxxxx.tpl" du module articles.
Soit :
Code HTML :
- Dans le tutoriel, il est écris "{NAME}" dans le lien à la place du nom du compte twitter. Cette variable tpl est censé te mettre normalement le nom de ton site exemple : @Tartampion.fr une fois décodé par le cms.
Donc comme dis le proverbe, à Rome on fait comme les Romains, on applique la consigne.
Ce qui nous donne :
Code HTML :
4/ Il te reste juste a éditer les fichiers tpl que tu as déplacé plus haut et juste de placer cette partie de code dans le tpl sous la fermeture du <div class="content">...</div>
ce qui nous donne :
Code HTML :
<section id="module-articles"> <header> <h1> <a href="{U_SYNDICATION}" title="${LangLoader::get_message('syndication', 'common')}"><i class="fa fa-syndication"></i></a> {@articles}# IF NOT C_ROOT_CATEGORY # - {CATEGORY_NAME}# ENDIF # # IF IS_ADMIN #<a href="{U_EDIT_CATEGORY}" title="${LangLoader::get_message('edit', 'common')}"><i class="fa fa-edit smaller"></i></a># ENDIF # </h1> </header> <div class="content"> # INCLUDE NOT_VISIBLE_MESSAGE # <article itemscope="itemscope" itemtype="http://schema.org/Article" id="article-articles-{ID}" class="article-articles"> <header> <h2> <span itemprop="name">{TITLE}</span> <span class="actions"> # IF C_EDIT # <a href="{U_EDIT_ARTICLE}" title="${LangLoader::get_message('edit', 'common')}"><i class="fa fa-edit"></i></a> # ENDIF # # IF C_DELETE # <a href="{U_DELETE_ARTICLE}" title="${LangLoader::get_message('delete', 'common')}" data-confirmation="delete-element"><i class="fa fa-delete"></i></a> # ENDIF # <a href="{U_PRINT_ARTICLE}" title="${LangLoader::get_message('printable_version', 'main')}" target="blank"><i class="fa fa-print"></i></a> </span> </h2> <div class="more"> # IF C_AUTHOR_DISPLAYED # <i class="fa fa-user" title="${LangLoader::get_message('author', 'common')}"></i> # IF C_AUTHOR_EXIST #<a itemprop="author" href="{U_AUTHOR}" class="{USER_LEVEL_CLASS}" # IF C_USER_GROUP_COLOR # style="color:{USER_GROUP_COLOR}"# ENDIF #> {PSEUDO} </a># ELSE #{PSEUDO}# ENDIF #| # ENDIF # <i class="fa fa-calendar" title="${LangLoader::get_message('date', 'date-common')}"></i> <time datetime="# IF NOT C_DIFFERED #{DATE_ISO8601}# ELSE #{PUBLISHING_START_DATE_ISO8601}# ENDIF #" itemprop="datePublished"># IF NOT C_DIFFERED #{DATE}# ELSE #{PUBLISHING_START_DATE}# ENDIF #</time> | <i class="fa fa-eye" title="{NUMBER_VIEW} {@articles.sort_field.views}"></i> <span title="{NUMBER_VIEW} {@articles.sort_field.views}">{NUMBER_VIEW}</span> # IF C_COMMENTS_ENABLED # | <i class="fa fa-comment" title="${LangLoader::get_message('comments', 'comments-common')}"></i><a itemprop="discussionUrl" class="small" href="{U_COMMENTS}"> {L_COMMENTS}</a> # ENDIF # | <i class="fa fa-folder" title="${LangLoader::get_message('category', 'categories-common')}"></i> <a itemprop="about" class="small" href="{U_CATEGORY}">{CATEGORY_NAME}</a> # IF C_KEYWORDS # | <i title="${LangLoader::get_message('form.keywords', 'common')}" class="fa fa-tags"></i> # START keywords # <a itemprop="keywords" href="{keywords.URL}">{keywords.NAME}</a># IF keywords.C_SEPARATOR #, # ENDIF # # END keywords # # ENDIF # </div> <meta itemprop="url" content="{U_ARTICLE}"> <meta itemprop="description" content="${escape(DESCRIPTION)}"> <meta itemprop="datePublished" content="# IF NOT C_DIFFERED #{DATE_ISO8601}# ELSE #{PUBLISHING_START_DATE_ISO8601}# ENDIF #"> <meta itemprop="discussionUrl" content="{U_COMMENTS}"> # IF C_HAS_PICTURE #<meta itemprop="thumbnailUrl" content="{PICTURE}"># ENDIF # <meta itemprop="interactionCount" content="{NUMBER_COMMENTS} UserComments"> </header> <div class="content"> # IF C_PAGINATION # # INCLUDE FORM # <div class="spacer"></div> # ENDIF # # IF PAGE_NAME # <h2 class="title page_name">{PAGE_NAME}</h2> # ENDIF # <div itemprop="text">{CONTENTS}</div> [line] # IF C_PAGINATION # <div class="pages-pagination right"> # IF C_NEXT_PAGE # [url={U_NEXT_PAGE}]{L_NEXT_TITLE} <i class="fa fa-arrow-right"></i>[/url] # ELSE # # ENDIF # </div> <div class="pages-pagination center"># INCLUDE PAGINATION_ARTICLES #</div> <div class="pages-pagination"> # IF C_PREVIOUS_PAGE # [url={U_PREVIOUS_PAGE}]<i class="fa fa-arrow-left"></i> {L_PREVIOUS_TITLE}[/url] # ENDIF # </div> # ENDIF # <div class="spacer"></div> </div> <!-- Placement de code twitter : Début --> <a href="https://twitter.com/share" class="twitter-share-button" data-via="{NAME}" data-lang="fr" data-size="large">Tweeter</a> <!-- Placement de code twitter : Fin--> <aside> # IF C_SOURCES # <div id="articles-sources-container"> <span>${LangLoader::get_message('form.sources', 'common')}</span> : # START sources # <a itemprop="isBasedOnUrl" href="{sources.URL}" class="small">{sources.NAME}</a># IF sources.C_SEPARATOR #, # ENDIF # # END sources # </div> # ENDIF # # IF C_DATE_UPDATED # <div><i>${LangLoader::get_message('form.date.update', 'common')} : <time datetime="{DATE_UPDATED_ISO8601}" itemprop="datePublished">{DATE_UPDATED}</time></i></div> # ENDIF # <div class="spacer"></div> # IF C_NOTATION_ENABLED # <div class="left smaller"> {KERNEL_NOTATION} </div> # ENDIF # <div class="spacer"></div> # IF C_COMMENTS_ENABLED # # INCLUDE COMMENTS # # ENDIF # </aside> <footer></footer> </article> </div> <footer></footer> </section>
ensuite enregistrer et fermer.
Pensez à rafraichir vos caches dans l'administration si la configuration est active. Et un CTRL+F5 ([size=10]Rafraichissement de cache du navigateur),dans votre naviguateur devrais faire le reste
Voilà, je pense que ma réponse est complète
Bonne journée Swan.
[/size]
Édité par Swan Le 15/02/2017 à 10h15
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
A mon avis le code JS peut être présent soit dans le frame.tpl soit dans le tpl du module. ( A partir du moment ou il n'est présent qu'une seule fois.)
Aurélien Reffay Membre non connecté
-
Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Merci Swan, contrairement à la doc, je trouve que votre explication est plus simple pour un néophyte dans ce domaine même si j'ai lu en une fois vos explication et que sur certains points je n'ai pas tout compris, je vais relire tout cela et réussir à créer mon bouton Twitter.
Je trouve juste navrant qu'il n'y ai pas une solution plus simple pour créer les boutons de réseaux sociaux car dans mon cas je dois en intégrer 3 et cela fait beaucoup de code à modifier/intégrer.
Je pense qu'il serait intéressant d'intégrer dans le modules articles ou autres qui pourrait être succeptible d'être partagé par les utilisateurs du site, une option qui pourrait faire apparaitre les boutons de réseaux sociaux.
Cordialement. Bonne journée.
Swan Membre non connecté
-
Booster Mortier
- Voir le profil du membre Swan
- Inscrit le : 31/05/2013
- Site internet
Dite nous dans quel module vous voulez les trois boutons et ainsi que votre version de PBt et je vous aiderais à les placer
Swan.
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Cf bugtracker : #1194
Si tu trouve que la documentation manque de clarté, je t'invite à proposer les modifications afin que tout le monde puisse en bénéficier.
La documentation utilise le module wiki, tous les membres peuvent donc participer à son écriture.
Aurélien Reffay Membre non connecté
-
Booster Roquette
- Voir le profil du membre Aurélien Reffay
- Inscrit le : 31/10/2016
- Site internet
- Groupes :
Je souhaiterais ajouter les 3 boutons : Facebbook, Twitter au-dessus des mes articles, donc le module articles et la version du noyau PHPBoost est la 5.0.14.
Je vous remercie d'avance pour votre aide.
Cordialement.
Répondre
Sujet verrouillé, vous ne pouvez pas poster de message