Bouton Facebook valide W3C : Tuto phpBB3

[Renard]

****************************************************************************************************************
Mise à jour au 19 juillet 2012 Facebook ayant supprimé le bouton Share ou rencontrant des difficultés avec.

Pour le bouton "Partager" voici un script aux normes W3C.
Ici un exemple d'intégration mais vous pouvez placer ce script où bon vous semble.


Ajout du bouton j'aime de facebook via AddThis :

Dans viewtopic_body, trouver :

Code: Tout sélectionner

   <p class="author"><!-- IF S_IS_BOT -->{postrow.MINI_POST_IMG}<!-- ELSE --><a href="{postrow.U_MINI_POST}">{postrow.MINI_POST_IMG}</a><!-- ENDIF -->{L_POST_BY_AUTHOR} <strong>{postrow.POST_AUTHOR_FULL}</strong> &raquo; {postrow.POST_DATE} </p>

Ajouter après :

Code: Tout sélectionner

            <!-- AddThis Button BEGIN -->         
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" title="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-501027a709e97612"></script>
<br /><br />
<!-- AddThis Button END -->

Rafraîchir le cache.

*****************************************************************************************************************************



Il est surprenant de constater que les boutons "Facebook" et "+1" de Google se moquent carrément de la norme W3C.
Leurs boutons fleurissent un peu partout, comment y échapper, mais ils rendent votre site invalide au test W3C.
Voici comment régler le problème.

Prenons l'exemple d'un forum phpBB3 et intégrons le bouton Google en même temps que le bouton Facebook.
Les propriétaires de forums dotés d'un module de réécriture de PHPBB SEO sont également concernés, il suffit juste de modifier une variante comme expliqué sur le site de DCZ. (Nous y reviendrons dans ce tuto)
Pour les propriétaires de site en php (hors forum phpBB) la solution est encore plus simple, seule la partie de l'affichage du bouton vous concerne.

Mise à jour du 31 août 2011
Testé avec IE 7/8/ et 9, Firefox et Google Chrome.


Les fichiers à modifier sont :

viewtopic.php,
styles/prosilver/template/overall_header.html,
styles/prosilver/template/viewtopic_body.html
Ce MOD est très facile à mettre en place, cela prendra environ 3 minutes.


Ouvrir viewtopic.php

Trouver (vers la ligne 690) :

Code: Tout sélectionner

'FORUM_ID'       => $forum_id,

Ajouter après : (pour les forums phpBB3 sans module SEO)

Code: Tout sélectionner

   // Bouton plus un Google Facebook
   'U_FB'    => urlencode(generate_board_url() . "/viewtopic.$phpEx?f=$forum_id&t=$topic_id"),
   // Bouton plus un Google Facebook

Ajouter après : (pour les forums phpBB3 avec module SEO)

Code: Tout sélectionner

   // Bouton plus un Google Facebook
   'U_FB'    => append_sid("{$phpbb_root_path}viewtopic.$phpEx", "f=$forum_id&t=$topic_id"),
   // Bouton plus un Google Facebook

Merci à Forge pour la réécriture de l'URL : http://www.phpbb-seo.com/fr/forum-phpbb/sujet5817.html


Ouvrir styles/prosilver/template/overall_header.html

Trouver :

Code: Tout sélectionner

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />

Ajouter après :

Code: Tout sélectionner

<!-- Bouton Facebook -->
<?php
function is_facebook(){
   if(stristr($_SERVER["HTTP_USER_AGENT"],'facebook'))
   return true;
}
if(is_facebook()){
echo '
<meta property="og:title" content="{TOPIC_TITLE}" />
<meta property="og:site_name" content="{SITENAME}" />'
;}
?>
<!-- Bouton Facebook -->
<!-- +1 Google -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Fin + 1 Google -->

Merci à Grégoire Panverne pour l'astuce permettant de contourner la balise "Property" : http://gregoire-penverne.fr/1574-facebo ... dation-w3c


Ouvrir styles/prosilver/template/viewtopic_body.html

Trouver :

Code: Tout sélectionner

<!-- IF S_FORUM_RULES -->

Ajouter avant :

Code: Tout sélectionner

   <!-- Bouton plus un Google Facebook -->
           <ul class="linklist leftside">   
             <li><div class="g-plusone"></div></li>
             <li><object type="application/xhtml+xml" data="http://www.facebook.com/plugins/like.php?href={U_FB}&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=21" style="width:100px; height:21px;">
<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?href={U_FB}&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=21" style="width:100px; height:21px;" allowtransparency="true" frameborder="0"></iframe>
<![endif]-->
               </object>
           </li>
          </ul>     
   <div class="clear"></div>     
   <!-- Fin bouton plus un Google Facebook -->

Trouver (vers la ligne 285) :

Code: Tout sélectionner

   <!-- IF PAGINATION or TOTAL_POSTS -->
      <div class="pagination">
         {TOTAL_POSTS}

Ajouter avant :

Code: Tout sélectionner

<!-- Bouton plus un Google Facebook -->
           <ul class="linklist leftside">   
                 <li><div class="g-plusone"></div></li>
                 <li><object type="application/xhtml+xml" data="http://www.facebook.com/plugins/like.php?href={U_FB}&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=21" style="width:100px; height:21px;">
<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?href={U_FB}&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=21" style="width:100px; height:21px;" allowtransparency="true" frameborder="0" ></iframe>
<![endif]-->
               </object>
             </li>
         </ul>
<!-- Fin bouton plus un Google Facebook -->

Rafraîchir le cache de votre forum.



En fait l'idée est de remplacée la balise iframe src= fournie par Facebook par une balise object type="application/xhtml+xml" data=. Au passage on vire aussi quelques balises obsolètes style scrolling="no" frameborder="0.
On notera que sur ce coup Google est quand même bien meilleur élève que Facebook, même si son code demande aussi une légère modification.

[Renard]

On me demande aujourd'hui s'il est possible d'ajouter le bouton Google et Facebook, toujours en liens dynamiques, à la liste des forums.


Les fichiers à modifier sont :
viewforum.php,
styles/prosilver/template/viewforum_body.html
Ce MOD est très facile à mettre en place, cela prendra environ 1 minute.



Ouvrir viewforum.php

Trouver (vers la ligne 385) :

Code: Tout sélectionner

   'U_MARK_TOPICS'      => ($user->data['is_registered'] || $config['load_anon_lastread']) ? append_sid("{$phpbb_root_path}viewforum.$phpEx", 'hash=' . generate_link_hash('global') . "&f=$forum_id&mark=topics") : '',

Ajouter après : (pour les forums phpBB3 sans module SEO)

Code: Tout sélectionner

        // Bouton plus un Google Facebook
        'U_FB'    => urlencode(generate_board_url() . "/viewforum.$phpEx?f=$forum_id"),
        // Bouton plus un Google Facebook

Ajouter après : (pour les forums phpBB3 avec module SEO)

Code: Tout sélectionner

        // Bouton plus un Google Facebook
        'U_FB'    => append_sid("{$phpbb_root_path}viewforum.$phpEx", "f=$forum_id"),
        // Bouton plus un Google Facebook

Ouvrir viewforum_body.html

Trouver :

Code: Tout sélectionner

<!-- IF S_FORUM_RULES -->

Ajouter avant :

Code: Tout sélectionner

      <!-- Bouton plus un Google Facebook -->
           <ul class="linklist leftside">   
             <li><div class="g-plusone"></div></li>
             <li><object type="application/xhtml+xml" data="http://www.facebook.com/plugins/like.php?href={U_FB}&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=21" style="width:100px; height:21px;">
<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?href={U_FB}&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=21" style="width:100px; height:21px;" allowtransparency="true" frameborder="0"></iframe>
<![endif]-->
               </object>
           </li>
          </ul>      
   <div class="clear"></div>    
   <!-- Fin bouton plus un Google Facebook -->

Rafraîchir le cache de votre forum.

[Renard]

Et pour finir, voici comment ajouter le bouton Google et Facebook à l'index de votre forum.


Le fichier à modifier est :
styles/prosilver/template/index_body.html



Ouvrir index_body.html

Trouver :

Code: Tout sélectionner

<!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->

Ajouter après (pensez à renseigner l'URL de votre forum) :

Code: Tout sélectionner

   <!-- Bouton plus un Google Facebook -->
         <ul class="linklist">
         <li><div class="g-plusone"></div></li>
           <li><object type="application/xhtml+xml" data="http://www.facebook.com/plugins/like.php?href=URL_DE_VOTRE_FORUM/&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=21" style="width:100px; height:21px;">
         <!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?href=URL_DE_VOTRE_FORUM/&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=21" style="width:100px; height:21px;" allowtransparency="true" frameborder="0"></iframe>
<![endif]-->
           </object>
         </li>
       </ul>
           <!-- Fin bouton plus un Google Facebook -->

Rafraîchir le cache de votre forum.

[gigoudelin]

Bonjour et merci pour ce superbe tutoriel, fonctionne à merveille sur mon forum.
en outre, j'ai un petit problème que je ne sais expliquer lorsque je clic sur un sujet j'ai les boutons de google et FB en double.
au dessus du champ de recherche et les autre juste a coté du bouton rechercher.
par avance merci pour votre aide.
si vous le souhaitez je peux vous envoyer l'url en MP.
cordialement,
Gilles Goudelin

[Renard]

Bonjour,

Oui fais voir l'url, mets-là directement ici.
Tu as bien rafraîchit le cache ?

[gigoudelin]

bonsoir Renard,
oui j'ai bien purgé le cache.
tu trouveras ci-après l'url :
http://www.forum.gg-prod.fr/

par avance te remerciant pour ton analyse

[gigoudelin]

bonsoir Renard,
j'ai trouvé j'avais fait un doublon dans le fichier viewtopic_body.html.
tout marche parfaitement maintenant.

[Renard]

Je m'en doutais un peu, dsl pas eu le temps de regarder hier soir.

[Charlotte57]

Merci beaucoup pour l'astuce