วิธีทำปุ่มแชร์ socail media 3 แบบ
แก้ไขครั้งสุดท้ายโดย suttasilo เมื่อ 2024-1-16 19:29วิธีทำปุ่มแชร์ socail media 3 แบบ
การแทรกปุ่มแขร์ socail media (facebook, google+ฯลฯ) มีคนเคยทำแล้วแต่เป็นโค้ดของเว็บของ AdThis และเคยทำโค้ดปุ่มแชร์ จากเว็บ ShareThis มาแจกแล้ววันนี้มานำเสนอ 3 แบบ ดังนี้
ไปที่ template\default\forum\เปิดไฟล์viewthread_node.htm
ค้นหา...
<!--{hook/viewthread_useraction}-->
</div>
แบบที่ 1 โค้ดจากเว็บ https://www.sharethis.com/ เคยแจกแล้วที่กระทู้นี้ https://discuzthai.com/thread-39758-1-1.html ขอนำมารวมไว้อีกครั้งหนึ่ง
เพิ่มโค๊ดนี้ต่อด้านล่าง
<table width="100%" style="table-layout:fixed;"><tr><td>
<img src="static/image/watkaeng02.jpg" border="0" width:750px;height:107px;"></table>
</div>
</div>
<div class="shareAll cc mb10">
<em>ผู้ให้ย่อมเป็นที่รักของผู้ถูกให้: </em>
<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_fblike_large' displayText='Facebook Like'></span>
<span class='st_fbsend_large' displayText='Facebook Send'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_plusone_large' displayText='Google +1'></span>
<span class='st_instagram_large' displayText='Instagram Badge'></span>
<span class='st_blogger_large' displayText='Blogger'></span>
<span class='st_email_large' displayText='Email'></span>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "6b829061-74ff-4b31-a128-2818cf4fa44e", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
</div>
แบบที่ 2 โค้ดจากเว็บ https://www.addtoany.com
เพิ่มโค๊ดนี้ต่อด้านล่าง
<table width="550" border="0" align="center">
<tr>
<td width="180"><img src="images/give.png" width="180" height="32"/></td>
<td><!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_facebook_messenger"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_blogger"></a>
<a class="a2a_button_google_bookmarks"></a>
<a class="a2a_button_line"></a>
<a class="a2a_button_copy_link"></a>
<a class="a2a_button_email"></a>
<a class="a2a_button_print"></a>
</div>
<script>
var a2a_config = a2a_config || {};
a2a_config.num_services = 10;
a2a_config.prioritize = ["facebook", "facebook_messenger", "twitter", "google_plus", "blogger", "google_bookmarks", "line", "print", "email"];
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END --></td>
</tr>
</table>
</div>
แบบที่ 3 ทำลิงค์แชร์พร้อมรูปไอคอนเอง
เพิ่มโค้ดนี้ต่อล่าง
<table width="600" border="0" align="center">
<tr>
<td width="180"><img src="images/give1.png" width="180" height="60"/></td>
<td><div id="viewthread_share">
<a href="https://www.facebook.com/PhraBoonnop/" target="_blank" title="เพจพระบุญนพ สุทฺธสีโล-นิราลัย"><img src="images/facebook2.png" width="60" height="60"/></a>
<a href="https://www.facebook.com/suttasilo" target="_blank" title="เฟสบุ๊คพ.อ.บุญนพ"><img src="images/facebook.png" width="60" height="60"/></a>
<a href="https://www.facebook.com/messages" target="_blank" title="ข้อความเฟสบุ๊ค"><img src="images/messageFB.png" width="60" height="60"/></a>
<a href="https://www.youtube.com/suttasilo" target="_blank" title="youtubeพ.อ.บุญนพ"><img src="images/youtube.png" width="60" height="60"/></a>
<a href="https://www.instagram.com/" target="_blank" title="instagram"><img src="images/instagram.png" width="60" height="60"/></a>
<a href="https://twitter.com/" target="_blank" title="Twitter"><img src="images/Twitter.png" width="60" height="60"/></a>
<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>
</tr>
</table>
</div>
ผลลัพธ์ดังนี้
ดาวน์โหลดไอคอนปุ่มแชร์ แตกไฟล์แล้วอัพโหลดขึ้นโฮสต์
หน้า:
[1]