วิธีทำปุ่มแชร์ socail media 3 แบบ

suttasilo

วิธีทำปุ่มแชร์ socail media 3 แบบ

                  การแทรกปุ่มแขร์ socail media (facebook, google+ฯลฯ) มีคนเคยทำแล้วแต่เป็นโค้ดของเว็บของ AdThis และเคยทำโค้ดปุ่มแชร์ จากเว็บ ShareThis มาแจกแล้ว  วันนี้มานำเสนอ 3 แบบ ดังนี้

ไปที่ template\default\forum\เปิดไฟล์  viewthread_node.htm
ค้นหา...

1. <!--{hook/viewthread_useraction}-->
   
2.                                     </div>

คัดลอกไปที่คลิปบอร์ด

แบบที่ 1 โค้ดจากเว็บ https://www.sharethis.com/ เคยแจกแล้วที่กระทู้นี้ https://discuzthai.com/thread-39758-1-1.html ขอนำมารวมไว้อีกครั้งหนึ่ง
เพิ่มโค๊ดนี้ต่อด้านล่าง

1.     <table width="100%" style="table-layout:fixed;"><tr><td>
   
2.                                             <img src="static/image/watkaeng02.jpg" border="0" width:750px;height:107px;"></table>
   
3.     </div>
   
4.     </div>
   
5.     <div class="shareAll cc mb10">
   
6.                                             <em>ผู้ให้ย่อมเป็นที่รักของผู้ถูกให้: </em>
   
7.     <span class='st_sharethis_large' displayText='ShareThis'></span>
   
8.     <span class='st_facebook_large' displayText='Facebook'></span>
   
9.     <span class='st_fblike_large' displayText='Facebook Like'></span>
   
10.     <span class='st_fbsend_large' displayText='Facebook Send'></span>
    
11.     <span class='st_twitter_large' displayText='Tweet'></span>
    
12.     <span class='st_plusone_large' displayText='Google +1'></span>
    
13.     <span class='st_instagram_large' displayText='Instagram Badge'></span>
    
14.     <span class='st_blogger_large' displayText='Blogger'></span>
    
15.     <span class='st_email_large' displayText='Email'></span>
    
16.     <script type="text/javascript">var switchTo5x=true;</script>
    
17.     <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    
18.     <script type="text/javascript">stLight.options({publisher: "6b829061-74ff-4b31-a128-2818cf4fa44e", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
    
19.                                     </div>

คัดลอกไปที่คลิปบอร์ด

แบบที่ 2 โค้ดจากเว็บ https://www.addtoany.com
เพิ่มโค๊ดนี้ต่อด้านล่าง

1. <table width="550" border="0" align="center">
   
2.   <tr>
   
3.     <td width="180"><img src="images/give.png" width="180" height="32"/></td>
   
4.     <td><!-- AddToAny BEGIN -->
   
5. <div class="a2a_kit a2a_kit_size_32 a2a_default_style">
   
6. <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
   
7. <a class="a2a_button_facebook"></a>
   
8. <a class="a2a_button_facebook_messenger"></a>
   
9. <a class="a2a_button_twitter"></a>
   
10. <a class="a2a_button_google_plus"></a>
    
11. <a class="a2a_button_blogger"></a>
    
12. <a class="a2a_button_google_bookmarks"></a>
    
13. <a class="a2a_button_line"></a>
    
14. <a class="a2a_button_copy_link"></a>
    
15. <a class="a2a_button_email"></a>
    
16. <a class="a2a_button_print"></a>
    
17. </div>
    
18. <script>
    
19. var a2a_config = a2a_config || {};
    
20. a2a_config.num_services = 10;
    
21. a2a_config.prioritize = ["facebook", "facebook_messenger", "twitter", "google_plus", "blogger", "google_bookmarks", "line", "print", "email"];
    
22. </script>
    
23. <script async src="https://static.addtoany.com/menu/page.js"></script>
    
24. <!-- AddToAny END --></td>
    
25.   </tr>
    
26. </table>
    
27. </div>

คัดลอกไปที่คลิปบอร์ด

แบบที่ 3 ทำลิงค์แชร์พร้อมรูปไอคอนเอง
เพิ่มโค้ดนี้ต่อล่าง

1. <table width="600" border="0" align="center">
   
2.   <tr>
   
3.     <td width="180"><img src="images/give1.png" width="180" height="60"/></td>
   
4.     <td><div id="viewthread_share">
   
5.     <a href="https://www.facebook.com/PhraBoonnop/" target="_blank" title="เพจพระบุญนพ สุทฺธสีโล-นิราลัย"><img src="images/facebook2.png" width="60" height="60"/></a>
   
6.     <a href="https://www.facebook.com/suttasilo" target="_blank" title="เฟสบุ๊คพ.อ.บุญนพ"><img src="images/facebook.png" width="60" height="60"/></a>
   
7.         <a href="https://www.facebook.com/messages" target="_blank" title="ข้อความเฟสบุ๊ค"><img src="images/messageFB.png" width="60" height="60"/></a>
   
8.     <a href="https://www.youtube.com/suttasilo" target="_blank" title="youtubeพ.อ.บุญนพ"><img src="images/youtube.png" width="60" height="60"/></a>
   
9.     <a href="https://www.instagram.com/" target="_blank" title="instagram"><img src="images/instagram.png" width="60" height="60"/></a>
   
10.     <a href="https://twitter.com/" target="_blank" title="Twitter"><img src="images/Twitter.png" width="60" height="60"/></a>
    
11.     <a href="https://social-plugins.line.me/lineit/share?url=https://line.me/en" target="_blank" title="Twitter"><img src="images/line.png" width="60" height="60"/></a>
    
12.                   </tr>
    
13. </table>
    
14.   </div>

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์ดังนี้

ดาวน์โหลดไอคอนปุ่มแชร์ แตกไฟล์แล้วอัพโหลดขึ้นโฮสต์