Facebook Messenger Button CSS для веб-сайта

-2

Я пытаюсь встроить кнопку Facebook Messenger на свой сайт, чтобы люди могли связаться со мной. У меня есть код HTML, но я хотел бы отформатировать его как кнопку Messenger. Кто-нибудь может мне помочь?Facebook Messenger Button CSS для веб-сайта

источник

2017-02-14 Jok56

поделитесь своим кодом, так что мы можем увидеть, что вы делали до сих пор, и пролить свет на вашу проблему. – ErvalhouS

Можете ли вы поделиться своим кодом? –

Хорошо, так что если вы начинаете полностью froms царапину, то вот что я сделал для вас, чтобы играть с, как HTML и CSS:

<a id="msnnr_btn_anc" href="#mypage"> 

     <div id="messenger_button"> 
      <div class="messenger_column btn_label"> 
       <span>Message me</span> 
      </div> 
      <div class="messenger_column btn_icon"> 
       <img src="icon.svg" id="msngr_btn_icon"> 
      </div> 
     </div> 

    </a>

и некоторые CSS:

<style type="text/css"> 
     a#msnnr_btn_anc { 
      position: relative; 
      float: left; 
     } 

     div#messenger_button { 
      position: relative; 
      float: left; 
      background: #2196F3; 
      color: #fff; 
      font-family: arial; 
      border-radius: 3px; 
      overflow: hidden; 
      text-decoration: none; 
     } 

     .messenger_column { 
      float: left; 
      padding: 5px; 
     } 

     .messenger_column.btn_icon>#msngr_btn_icon { 
      float: left; 
      width: 28px; 
     } 

     .messenger_column.btn_label { 
      padding: 10px; 
      padding-right: 5px; 
     } 
    </style> 

SVG 


<?xml version="1.0" encoding="utf-8"?> 
     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 76.2 76.2" style="enable-background:new 0 0 76.2 76.2;" xml:space="preserve"> 
       <style type="text/css"> 
        .icon{fill:#FFFFFF;} 
        .icon.blue{fill:#0084FF;} 
       </style> 

       <g> 
        <path class="icon" d="M38.1,0.2C17.3,0.2,0.4,15.9,0.4,35.3c0,11.1,5.5,20.9,14.1,27.4v13.4L27.3,69c3.4,1,7.1,1.5,10.8,1.5 
    c20.8,0,37.7-15.7,37.7-35.1S58.9,0.2,38.1,0.2z M41.9,47.5l-9.6-10.3L13.5,47.5l20.6-22L44,35.8l18.5-10.3L41.9,47.5z" /> 
       </g> 
      </svg>

Если вы используете API-интерфейс fb «send to messenger», вы можете преодолеть стили элементов, используя их данные.

источник

2017-02-14 20:04:10 Abelm

Кстати, если вам не нравится использовать facebook api, просто мы это. если у вас действительно есть конкретная причина, почему вы хотите сделать это с нуля. [ссылка] (https://developers.facebook.com/docs/messenger-platform/plugin-reference/message-us) – Abelm

Вы можете просто использовать значок значка обмена сообщениями в качестве ссылки. Проверьте следующий фрагмент кода: Plunker

#fb_msg_icon:hover{ 
 
    background-color: #eeeeee; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body> 
 
    <a href="fb.com/msg/pk1" title="Get in touch with me"> 
 
     <img id="fb_msg_icon" width="10%" height="10%" src="http://store-images.s-microsoft.com/image/apps.7488.13510798886918977.69182166-f125-495d-80d2-44fdaab21523.8fcea13e-5d9a-48a9-9937-b26deeced1b5"> 
 
    </a> 
 
    </body> 
 

 
</html>

источник

2017-02-15 04:37:54

Facebook Messenger Button CSS для веб-сайта

ответ

Смежные вопросы