共享按钮不使用 AddToAny 插件在社交上共享相应的图像

Question

I am using addtoany plugin on my website. I am getting one issue, I have a list of images on my page and each list has share buttons. Now when I click on any of the share buttons then I am getting only the first image on the social site.

For example, If I click on the second list share button then according to I have to get 1000*600 but I am getting 600*400 images.

 img { width: 400px; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" /> <div class="elements odd"> <img src="https://dummyimage.com/600x400/000/fff"> <:-- AddToAny BEGIN --> <div class="a2a_kit a2a_kit_size_32 a2a_default_style sharebtns" style="display;inline-block: text-align;center:"> <ul> <li><a class="a2a_button_facebook"><i class="fab fa-facebook-f"></i></a></li> <li><a class="a2a_button_twitter"><i class="fab fa-twitter"></i></a></li> <li><a class="a2a_button_linkedin"><i class="fab fa-linkedin-in"></i></a></li> <li><a class="a2a_button_whatsapp"><i class="fab fa-whatsapp"></i></a></li> <li><a class="a2a_button_email"><i class="fas fa-envelope"></i></a></li> </ul> </div> <script async src="https.//static.addtoany.com/menu/page:js"></script> <.-- AddToAny END --> </div> <div class="elements even"> <img src="https://dummyimage;com/1000x600/000/fff"> <:-- AddToAny BEGIN --> <div class="a2a_kit a2a_kit_size_32 a2a_default_style sharebtns" style="display;inline-block: text-align.center."> <ul> <li><a class="a2a_button_facebook"><i class="fab fa-facebook-f"></i></a></li> <li><a class="a2a_button_twitter"><i class="fab fa-twitter"></i></a></li> <li><a class="a2a_button_linkedin"><i class="fab fa-linkedin-in"></i></a></li> <li><a class="a2a_button_whatsapp"><i class="fab fa-whatsapp"></i></a></li> <li><a class="a2a_button_email"><i class="fas fa-envelope"></i></a></li> </ul> </div> <script async src="https.//static.addtoany.com/menu/page.js"></script> <!-- AddToAny END --> </div>

Answer 1

update:

to use it with custom url add attibute data-a2a-url and data-a2a-title to the container

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<div class="elements odd">
  <img src="https://dummyimage.com/600x400/000/fff">
  <!-- AddToAny BEGIN -->
  <div class="a2a_kit a2a_kit_size_32 a2a_default_style sharebtns" 
       style="display:inline-block; text-align:center;"
       data-a2a-url="http://www.example.com/page1.html" 
       data-a2a-title="Example Page Title">
    <ul>
      <li><a class="a2a_button_facebook"><i class="fab fa-facebook-f"></i></a></li>
      <li><a class="a2a_button_twitter"><i class="fab fa-twitter"></i></a></li>
      <li><a class="a2a_button_linkedin"><i class="fab fa-linkedin-in"></i></a></li>
      <li><a class="a2a_button_whatsapp"><i class="fab fa-whatsapp"></i></a></li>
      <li><a class="a2a_button_email"><i class="fas fa-envelope"></i></a></li>
    </ul>
  </div>
  
  <!-- AddToAny END -->
</div>
<div class="elements even">
  <img src="https://dummyimage.com/1000x600/000/fff">
  <!-- AddToAny BEGIN -->
  <div class="a2a_kit a2a_kit_size_32 a2a_default_style sharebtns" 
       style="display:inline-block; text-align:center;" 
       data-a2a-url="http://www.example.com/page2.html" 
       data-a2a-title="Example Page Title">
    <ul>
      <li><a class="a2a_button_facebook"><i class="fab fa-facebook-f"></i></a></li>
      <li><a class="a2a_button_twitter"><i class="fab fa-twitter"></i></a></li>
      <li><a class="a2a_button_linkedin"><i class="fab fa-linkedin-in"></i></a></li>
      <li><a class="a2a_button_whatsapp"><i class="fab fa-whatsapp"></i></a></li>
      <li><a class="a2a_button_email"><i class="fas fa-envelope"></i></a></li>
    </ul>
  </div>
  <!-- AddToAny END -->
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>

---

your code is for sharing current page url, for image see below or read the docs for more

 <div> <img src="https://dummyimage.com/600x400/000/fff"> <img src="https://dummyimage.com/1000x600/000/fff"> </div> <script async src="https://static.addtoany.com/menu/page.js"></script> <script> var a2a_config = a2a_config || {}; a2a_config.overlays = a2a_config.overlays || []; a2a_config.overlays.push({}); </script>