Obecnie 305 forumowiczów jest online
Obecnie 305 forumowiczów jest online
Poprowadź mnie
star_border
Odpowiedz

Podpięcie Code snippet do <div class=>

Student ✭ ✭ ✭

Cześć, 

 

mam fragment Code snippet z przyciskami social media z add this, który wygląda tak:

 

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-123123123"></script>

 

I chciałbym go wpiąć do <div class="post-newsletter"> na końcu wpisów na blogu. 

Wiecie może jak to zrobić? 

 



Odpowiedź eksperta 1verified_user

Zaakceptowane rozwiązania
Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: Mariusz K
‎15-01-2018 18:18

Dot.: Podpięcie Code snippet do &lt;div class=&gt;

Wschodząca Gwiazda

Jak tworzę w TOOLS Share Buttons i wybieram typ Inline to u mnie jest klasa addthis_inline_share_toolbox, a u Ciebie jest addthis_sharing_toolbox, więc nie wiem dokładnie jakie narzędzie generujesz, ale mniejsza z tym. Poniższa procedura powinna zadziałać.

Stwórz w GTM nowy tag typu własny kod HTML i wstaw do niego poniższy kod oraz wybierz dla niego regułę uruchamiania na wszystkich stronach.

 

<script>
  
  var s = document.createElement("script");
  s.type="text/javascript";
  s.src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-123123123";
  document.body.appendChild(s);
  
  var div = document.createElement("div");
  div.className="addthis_sharing_toolbox";  
  document.getElementsByClassName("post-newsletter")[0].appendChild(div);
  
</script>

Elementy zaznaczone na czerwono wymagają oczywiście dostosowania w zależności od tego jaki kod się wygeneruje no i zakładam, że masz na stronie jeden element klasy post-newsletter, a jeśli jest ich wiele to kod <div class="addthis_sharing_toolbox"></div> zostanie dodany na końcu pierwszego z nich.

Tomasz Ciepłucha

Wyświetl rozwiązanie w oryginalnym poście


Wszystkie odpowiedzi

Podpięcie Code snippet do &lt;div class=&gt;

Nowicjusz ✭

Odp. dostałem od Piotra Karbowiaka na jednej z facebookowych grup. Dziele się tu info.

 

1. W szablonie wtyczki, która generuję Ci posty dla newslettera możesz wstawić na sztywno skrypt. (najprostszy sposób).


2. Możesz też w GTM wstrzelić skrypt jako Tag "Custom HTML" z funkcją, która dodawała do wybranego DIV-a powyższy skrypt w przypadku znalezienia odpowiedniego ciągu znaków. (Zamieni - "dodajAddThis" na "<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-123123123"></script>" ).


3. Ewentualnie możesz zmodyfikować funkcję zawartą w "//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-123123123" tak aby uruchamiała się przy napotkaniu "<div class="post-newsletter">" i wstawić tak zmodyfikowaną funkcję w "Custom HTML" (ale widząc ilość kodu nie polecam).

Podpięcie Code snippet do &lt;div class=&gt;

Magister ✭ ✭ ✭

Udało się to skonfigurować?

Kanał YT- Google Tag Manager: https://goo.gl/S2RM7X

Podpięcie Code snippet do &lt;div class=&gt;

Student ✭ ✭ ✭

nie potrafię sobie z tym poradzić. Pomimo instrukcji, nic tu sensownego nie wychodzi. 

Podpięcie Code snippet do &lt;div class=&gt;

Wschodząca Gwiazda

Sam główny kod działa tylko wówczas jeśli wygenerujesz Tool typu floating.

Natomiast w Twoim przypadku jeśli chcesz wyświetlać przyciski przy konkretnym elemencie to musisz w Tools wygenerować sobie element typu Inline i pobrać dodatkowy kod do wstawienia. Masz ten drugi kod też, czy nie? Czy w ogóle do zakładki Tools w AddThis nie zaglądałeś?

 

Tomasz Ciepłucha

Podpięcie Code snippet do &lt;div class=&gt;

Student ✭ ✭ ✭

Czy jako inline rozumiane jest to? <div class="addthis_sharing_toolbox"></div>

Zaglądałem. Myślę, że u mnie problem to wciąż niski poziom zrozumienia HTML i CSS +JS

Zaakceptowane rozwiązanie.
Rozwiązanie
Zaakceptowane przez autora tematu: Mariusz K
‎15-01-2018 18:18

Dot.: Podpięcie Code snippet do &lt;div class=&gt;

Wschodząca Gwiazda

Jak tworzę w TOOLS Share Buttons i wybieram typ Inline to u mnie jest klasa addthis_inline_share_toolbox, a u Ciebie jest addthis_sharing_toolbox, więc nie wiem dokładnie jakie narzędzie generujesz, ale mniejsza z tym. Poniższa procedura powinna zadziałać.

Stwórz w GTM nowy tag typu własny kod HTML i wstaw do niego poniższy kod oraz wybierz dla niego regułę uruchamiania na wszystkich stronach.

 

<script>
  
  var s = document.createElement("script");
  s.type="text/javascript";
  s.src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-123123123";
  document.body.appendChild(s);
  
  var div = document.createElement("div");
  div.className="addthis_sharing_toolbox";  
  document.getElementsByClassName("post-newsletter")[0].appendChild(div);
  
</script>

Elementy zaznaczone na czerwono wymagają oczywiście dostosowania w zależności od tego jaki kod się wygeneruje no i zakładam, że masz na stronie jeden element klasy post-newsletter, a jeśli jest ich wiele to kod <div class="addthis_sharing_toolbox"></div> zostanie dodany na końcu pierwszego z nich.

Tomasz Ciepłucha

Dot.: Podpięcie Code snippet do &lt;div class=&gt;

Student ✭ ✭ ✭

Dzięki @Tomasz_C, wszystko pięknie działa Emotikon: Szczęśliwy Potrzebuje poszperać w necie jak to ostylować i będzie śmigać. 

 

Newsletter.png