Comment créer les boutons de partage des liens sur les médias sociaux en php

Dans cet article, nous allons vous montrer comment partager votre page ou votre site Web dans les boutons de partage des médias sociaux à l'aide de php. Nous partagerons cet article, un lien sur les réseaux sociaux avec le titre et l'URL en utilisant php.

Voici quelques liens populaires à mettre sur votre site : Buffer, diggit, Email, Facebook, Google+, LinkedIn, Pinterest, Print, Reddit, StumbleUpon, Tumblr, Twitter, vkontakte et Yummly.

Pour utiliser le code de bouton de partage sur les médias sociaux, nous devons transmettre l'URL et le titre de la page pour donner à la méthode de l'onglet des médias sociaux.

Vous devez avoir l'URL et le titre de votre site dans une variable donnée, par exemple :  $site_url et $site_title.

Ajout des OpenGraph sur votre site

Les informations de votre page doivent se trouver dans les balises meta, afin de permettre une affichage convenable sur les réseaux sociaux. je vous montre ici quelques balises meta utiles pour les OpenGraph.

<meta property="og:title" content="boutons de partage de réseaux sociaux letecode.com"/> 

<meta property="og:image" content="lien de l'image de votre site"/> 

<meta property="og:url " content="letecode.com"/> 

<meta property="og:description" content="boutons de partage des réseaux sociaux php"/>

Passez votre URL et votre titre en variable

<?php 

    // passe l'url de la page

    $site_url = "http://www.letecode.com/comment-creer-un-site-web"; 

    // titre du post 

    $site_title = "Comment créer un site web"; 

?> 

Codes pour les boutons de partage

<div id="button_share">

    <!-- Buffer Social Media -->

    <a href="https://bufferapp.com/add?url=<?= $site_url; ?>&amp;text=<?= $site_title; ?>" target="_blank">

        <img src="http://www.votresite.com/icons/buffer.png" alt="Buffer share link" />

    </a>

    

    <!-- Digg Social Media -->

    <a href="http://www.digg.com/submit?url=<?= $site_url; ?>" target="_blank">

        <img src="http://www.votresite.com/icons/diggit.png" alt="Digg  share link" />

    </a>

    

    <!-- Email Social Media -->

    <a href="mailto:?Subject=<?= $site_title; ?>&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 <?= $site_url; ?>">

        <img src="http://www.votresite.com/icons/email.png" alt="Email share link" />

    </a>

 

    <!-- Facebook Social Media -->

    <a href="http://www.facebook.com/sharer.php?u=<?= $site_url; ?>" target="_blank">

        <img src="http://www.votresite.com/icons/facebook.png" alt="Facebook share link" />

    </a>

    

    <!-- Google+ Social Media -->

    <a href="https://plus.google.com/share?url=<?= $site_url; ?>" target="_blank">

        <img src="http://www.votresite.com/icons/google.png" alt="Google share link" />

    </a>

    

    <!-- LinkedIn Social Media -->

    <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?= $site_url; ?>" target="_blank">

        <img src="http://www.votresite.com/icons/linkedin.png" alt="LinkedIn share link" />

    </a>

    

    <!-- Pinterest Social Media -->

    <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">

        <img src="http://www.votresite.com/icons/pinterest.png" alt="Pinterest share link" />

    </a>

    

    <!-- Print Social Media -->

    <a href="javascript:;" onclick="window.print()">

        <img src="http://www.votresite.com/icons/print.png" alt="Print share link" />

    </a>

    

    <!-- Reddit Social Media -->

    <a href="http://reddit.com/submit?url=<?= $site_url; ?>&amp;title=<?= $site_title; ?>" target="_blank">

        <img src="http://www.votresite.com/icons/reddit.png" alt="Reddit share link" />

    </a>


    <!-- StumbleUpon Social Media -->

    <a href="http://www.stumbleupon.com/submit?url=<?= $site_url; ?>&amp;title=<?= $site_title; ?>" target="_blank">

        <img src="http://www.votresite.com/icons/stumbleupon.png" alt="StumbleUpon share link" />

    </a>


    <!-- Tumblr Social Media -->

    <a href="http://www.tumblr.com/share/link?url=<?= $site_url; ?>&amp;title=<?= $site_title; ?>" target="_blank">

        <img src="http://www.votresite.com/icons/tumblr.png" alt="Tumblr share link" />

    </a>

     

    <!-- Twitter Social Media -->

    <a href="https://twitter.com/share?url=<?= $site_url; ?>&amp;text=Simple%20Share%20Buttons&amp;hashtags=simplesharebuttons" target="_blank">

        <img src="http://www.votresite.com/icons/twitter.png" alt="Twitter share link" />

    </a>

    

    <!-- vkontakte Social Media -->

    <a href="http://vkontakte.ru/share.php?url=<?= $site_url; ?>" target="_blank">

        <img src="http://www.votresite.com/icons/vk.png" alt="VK share link" />

    </a>

    

    <!-- Yummly Social Media -->

    <a href="http://www.yummly.com/urb/verify?url=<?= $site_url; ?>&amp;title=<?= $site_title; ?>" target="_blank">

        <img src="http://www.votresite.com/icons/yummly.png" alt="Yummly share link" />

    </a>

</div>

Dans ces exemples j'ai utilité des images (<img />) pour illustrer l'affichage des icônes, mais il serez mieux que vous utilisiez des icônes font-awesome ou encore bootstrap icons.

J'espère que ce code et cet article vous aideront à implémenter les boutons de partage de médias sociaux sur votre site. n'hésitez pas à laissez un commentaire ou de poser une question dans le forum.