suttasilo โพสต์ 2018-4-17 20:22:06

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

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

ไปที่ 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/watsuanvang" 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://plus.google.com/u/0/+สุทฺธสีโลภิกขุ" target="_blank" title="g+พ.อ.บุญนพ"><img src="images/gplus.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>
ผลลัพธ์ดังนี้


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







tangshop โพสต์ 2018-4-17 21:11:06

ขอรับ ไปรองนะครับ

birdboom โพสต์ 2019-6-30 22:20:17

เยี่ยมมาก
หน้า: [1]
ดูในรูปแบบกติ: วิธีทำปุ่มแชร์ socail media 3 แบบ