Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
DrBarcode

Как можно добавить кнопку WHATSAPP share?

Recommended Posts

Как можно добавить кнопку WHATSAPP в форум? Что бы отображался толко в мобильном теме?

Например : http://whatsapp-sharing.com

Share this post


Link to post
Share on other sites

Там же есть целая инструкция по установке. Нужно только в мобильном стиле - редактируйте глобальный шаблон мобильного стиля.

Share this post


Link to post
Share on other sites

Куда ставить код?

Share this post


Link to post
Share on other sites

Внешний вид > Управление стилями и шаблонами > Управление шаблонами в Mobile

 

globalTemplate

здесь?

Share this post


Link to post
Share on other sites

topicViewTemplate

 

 

я добавил сюда

 

 

но результатов нет

Share this post


Link to post
Share on other sites

я добавил

 

Глобальные - shareLinks

 

 

 

<a href="whatsapp://send" data-text="Oxumağınızı tövsiyə edirəm:" data-href="" class="wa_btn wa_btn_s" style="display:none">Paylaş</a>

 

 

 

<script type="text/javascript">if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://www.******.com/public_html/forums/public/js/whatsapp-button.js";h.appendChild(s);}</script>

 

но результатов нет

Share this post


Link to post
Share on other sites

Все правильно Вы вставляли: шаблон topicViewTemplate в слой <div id='shareStrip'>, там где кнопки facebook и twitter.

 

Т.е. со вставкой всё правильно, у Вас неправильно указан путь к скрипту - откуда взялось /public_html/ ?

 

И еще - кнопка появиться только в мобильнике (проверяется по useragent), т.е. если на ПК в браузере выбрать мобильный скин, кнопки не будет.

post-57438-0-78963500-1426334894_thumb.jpg

Edited by Viktar83

Share this post


Link to post
Share on other sites

Мне надо чтобы отобразить толко на мобильном версии.

Share this post


Link to post
Share on other sites

Мне надо чтобы отобразить толко на мобильном версии.

Будет на мобильной. Все правильно:

Внешний вид > Управление стилями и шаблонами > Управление шаблонами в Mobile > topicViewTemplate

 

Только путь к файлу js правильно укажите (смотря куда у Вас форум установлен):

http://www.******.com/forums/public/js/whatsapp-button.js

или

http://www.******.com/public/js/whatsapp-button.js

Edited by Viktar83

Share this post


Link to post
Share on other sites

Да все сделал как вы сказали и результат есть. Но как можно кнопку сдвинуть чуть вниз?

 

надо что то здесь изменит. но что?

wa_btn_s{font-size:12px;background-size:16px;background-position:5px 2px;padding:3px 6px 3px 25px}

Edited by DrBarcode

Share this post


Link to post
Share on other sites

А можно ли вообще сделать кнопку точно так же как фейс и твит?

Share this post


Link to post
Share on other sites

я сделал вот так (взял код от кнопки твиттер и изменил):

 

Внешний вид > Управление стилями и шаблонами > Управление шаблонами в Mobile>>> topicViewTemplate

 

<if test="canShare:|:!$forum['disable_sharelinks'] AND $this->settings['sl_enable']">
	<div id='shareStrip'>
		<a class='button secondary' id='share_facebook_trigger' href='#'>{$this->lang->words['share']} <img src="{$this->settings['public_dir']}style_extra/sharelinks/facebook.png" /></a>

		<a class='button secondary' id='share_twitter_trigger' href='#'>{$this->lang->words['share']} <img src="{$this->settings['public_dir']}style_extra/sharelinks/twitter.png" /></a>

                       <a class='button secondary' id='share_whatsapp_trigger' data-text='Share WHATSApp:' href='whatsapp://send'>{$this->lang->words['share']} <img src="{$this->settings['public_dir']}style_extra/sharelinks/WhatsApp.png" /></a>

 

и результат:

post-53045-0-23418300-1427179881_thumb.png

 

В роди все ок. но не работает ((

 

Что не так сделал?

Share this post


Link to post
Share on other sites

Не работает, потому что Вы изменили class кнопки. А этот класс менять нельзя, так как функции в js файле используют именно его.

 

Собственно, содержимое файла whatsapp-button.js (см. также вложение)

whatsapp-button.js.txt

 

waShBtn=function(){this.isIos===!0&&this.cntLdd(window,this.crBtn)},waShBtn.prototype.isIos=navigator.userAgent.match(/Android|iPhone/i)&&!navigator.userAgent.match(/iPod|iPad/i)?!0:!1,waShBtn.prototype.cntLdd=function(win,fn){var done=!1,top=!0,doc=win.document,root=doc.documentElement,add=doc.addEventListener?"addEventListener":"attachEvent",rem=doc.addEventListener?"removeEventListener":"detachEvent",pre=doc.addEventListener?"":"on",init=function(e){("readystatechange"!=e.type||"complete"==doc.readyState)&&(("load"==e.type?win:doc)[rem](pre+e.type,init,!1),!done&&(done=!0)&&fn.call(win,e.type||e))},poll=function(){try{root.doScroll("left")}catch(e){return void setTimeout(poll,50)}init("poll")};if("complete"==doc.readyState)fn.call(win,"lazy");else{if(doc.createEventObject&&root.doScroll){try{top=!win.frameElement}catch(e){}top&&poll()}doc[add](pre+"DOMContentLoaded",init,!1),doc[add](pre+"readystatechange",init,!1),win[add](pre+"load",init,!1)}},waShBtn.prototype.addStyling=function(){var s=document.createElement("style"),c="body,html{padding:0;margin:0;height:100%;width:100%}.wa_btn{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTguMTI5LDAuOTQ1Yy0zLjc5NSwwLTYuODcyLDMuMDc3LTYuODcyLDYuODczDQoJCQljMCwxLjI5OCwwLjM2LDIuNTEyLDAuOTg2LDMuNTQ5bC0xLjI0LDMuNjg4bDMuODA1LTEuMjE5YzAuOTg0LDAuNTQ0LDIuMTE2LDAuODU0LDMuMzIxLDAuODU0YzMuNzk1LDAsNi44NzEtMy4wNzUsNi44NzEtNi44NzENCgkJCVMxMS45MjQsMC45NDUsOC4xMjksMC45NDV6IE04LjEyOSwxMy41MzhjLTEuMTYyLDAtMi4yNDQtMC4zNDgtMy4xNDctMC45NDZsLTIuMTk4LDAuNzA1bDAuNzE1LTIuMTI0DQoJCQljLTAuNjg2LTAuOTQ0LTEuMDktMi4xMDMtMS4wOS0zLjM1NGMwLTMuMTU1LDIuNTY2LTUuNzIyLDUuNzIxLTUuNzIyczUuNzIxLDIuNTY2LDUuNzIxLDUuNzIyUzExLjI4MywxMy41MzgsOC4xMjksMTMuNTM4eg0KCQkJIE0xMS4zNTIsOS4zNzljLTAuMTc0LTAuMDk0LTEuMDItMC41NS0xLjE3OC0wLjYxNUMxMC4wMTQsOC43LDkuODk4LDguNjY2LDkuNzc1LDguODM3QzkuNjUyLDkuMDA3LDkuMzAxLDkuMzksOS4xOTMsOS41MDUNCgkJCUM5LjA4OCw5LjYxNyw4Ljk4NCw5LjYyOSw4LjgxMiw5LjUzM2MtMC4xNzEtMC4wOTYtMC43My0wLjMtMS4zNzgtMC45MjNjLTAuNTA0LTAuNDg0LTAuODM0LTEuMDcyLTAuOTMtMS4yNTINCgkJCWMtMC4wOTUtMC4xOCwwLTAuMjcxLDAuMDkxLTAuMzU0QzYuNjc3LDYuOTI4LDYuNzc4LDYuODA1LDYuODcsNi43MDZjMC4wOTEtMC4xLDAuMTI0LTAuMTcxLDAuMTg3LTAuMjg2DQoJCQljMC4wNjItMC4xMTUsMC4wMzgtMC4yMTgtMC4wMDMtMC4zMDhDNy4wMTIsNi4wMjMsNi42OTQsNS4xNDYsNi41NjEsNC43OUM2LjQyOCw0LjQzNCw2LjI4LDQuNDg2LDYuMTc3LDQuNDgyDQoJCQlDNi4wNzUsNC40NzksNS45NTgsNC40NTksNS44NDEsNC40NTZDNS43MjQsNC40NTEsNS41MzMsNC40ODcsNS4zNjYsNC42NTdjLTAuMTY3LDAuMTctMC42MzcsMC41NzYtMC42NjksMS40MzkNCgkJCXMwLjU2NSwxLjcyMiwwLjY0OCwxLjg0MWMwLjA4NCwwLjEyMSwxLjE0LDEuOTkxLDIuODk3LDIuNzYyYzEuNzU2LDAuNzcsMS43NjYsMC41MzQsMi4wODgsMC41MTgNCgkJCWMwLjMyMi0wLjAxOCwxLjA1NS0wLjM4NiwxLjIxNS0wLjc4OWMwLjE2Mi0wLjQwNSwwLjE3Ni0wLjc1NSwwLjEzNS0wLjgzMUMxMS42MzksOS41MjEsMTEuNTIzLDkuNDc1LDExLjM1Miw5LjM3OXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==);border:1px solid rgba(0,0,0,.1);display:inline-block!important;position:relative;font-family:Arial,sans-serif;letter-spacing:.4px;cursor:pointer;font-weight:400;text-transform:none;color:#fff;border-radius:2px;background-color:#5cbe4a;background-repeat:no-repeat;line-height:1.2;text-decoration:none;text-align:left}.wa_btn_s{font-size:12px;background-size:16px;background-position:5px 2px;padding:3px 6px 3px 25px}.wa_btn_m{font-size:16px;background-size:20px;background-position:4px 2px;padding:4px 6px 4px 30px}.wa_btn_l{font-size:16px;background-size:20px;background-position:5px 5px;padding:8px 6px 8px 30px}";return s.type="text/css",s.styleSheet?s.styleSheet.cssText=c:s.appendChild(document.createTextNode©),s},waShBtn.prototype.crBtn=function(){var b=[].slice.call(document.querySelectorAll(".wa_btn"));iframe=new Array;for(var i=0;i<b.length;i++){var parent=b.parentNode,t=b.getAttribute("data-text"),u=b.getAttribute("data-href"),o=b.getAttribute("href"),at="?text="+encodeURIComponent(t);t&&(at+="%20"),at+=encodeURIComponent(u?u:document.URL),b.setAttribute("href",o+at),b.setAttribute("target","_top"),iframe=document.createElement("iframe"),iframe.width=1,iframe.height=1,iframe.button=b,iframe.style.border=0,iframe.style.overflow="hidden",iframe.border=0,iframe.setAttribute("scrolling","no"),iframe.addEventListener("load",function(){this.contentDocument.body.appendChild(this.button),this.contentDocument.getElementsByTagName("head")[0].appendChild(theWaShBtn.addStyling());var meta=document.createElement("meta");meta.setAttribute("charset","utf-8"),this.contentDocument.getElementsByTagName("head")[0].appendChild(meta),this.width=Math.ceil(this.contentDocument.getElementsByTagName("a")[0].getBoundingClientRect().width),this.height=Math.ceil(this.contentDocument.getElementsByTagName("a")[0].getBoundingClientRect().height)},!1),parent.insertBefore(iframe,b)}};var theWaShBtn=new waShBtn;

 

Поэтому: или пробовать переписать функцию (но все равно должен использоваться уникальный id класса) или менять css прямо в этом файле whatsapp-button.js или удалить в нем свойства css для .wa_btn и потом прописать такие же, как и для button secondary, или переопределить свойства через !important. Собственно, надо смотреть, как лучше и как будет работать.

 

Но факт такой: .wa_btn нужен для работы скрипта, а его css прописаны в whatsapp-button.js

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...