Script, Codes f�r Forum - Webseite » Facebook Teilen Button

Daishi�s-Forum � Code Bereich � Script, Codes f�r Forum - Webseite � Facebook Teilen Button

Themen-Einstellungen

Bereich wechseln

News und Ank�ndigungen Herzlich Willkommen! Rechtliches News, Support & Forumregeln Fragen und Antworten zum Forum Daishi�s - Plauderecke Plauderecke Unser G�stebuch Mitgliedervorstellung Deine Heimat Kummerkasten-Meckerecke Rezepte Was trinkt ihr am liebsten? Lob, Kritik, Verbesserungsvorschl�ge Fotografie und Videos Gartengestaltung Familie und Co. Haustiere Code Bereich BB - Code-Farbliste BB - Code Script, Codes f�r Forum - Webseite Scripte, die noch nicht auf Xobor - Foren laufen. Partnerschaften Die Partner Uneingenommene Partnerschaftsanfragen Gratulationen und Gr��e Geburtstagsw�nsche und Gr��e an die Mitglieder Saisonale Gr��e zu Archiv Testforum Papierkorb

#1 | Facebook Teilen Button datum

09.02.2024 11:53 (zuletzt bearbeitet: 09.02.2024 18:07)

Daishi

Administrator

Informationen anzeigen

Beitr�ge:	129
Registriert seit:	22.10.2023
Wohnort:	Wut�schingen

Ich habe versucht den teilen Button von Facebook hier im Forum wieder zum Laufen zu bringen, da er nicht im Forum geht, mit den Vorgaben.

Muss aber dazu sagen, dass ich nicht von Meta die Codes verwendet habe.

Hier der Code von Meta Facebook:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<html> 
 <head> 
 <title>  Ihr Website-Titel  </title> 
 <!-- Sie können Open Graph-Tags verwenden, um die Linkvorschau anzupassen. 
  Erfahren Sie mehr: https://developers.facebook.com/docs/sharing/webmasters --> 
 <meta   property  =  "og:url"             content  =  "https://www.your-domain.com/your-page.html "   /> 
 <meta   property  =  "og:type"            content  =  "website"   /> 
 <meta   property  =  "og:title"           content  =  "Ihr Website-Titel"   /> 
 <meta   property  =  "og:description"     content  =  "Ihre Beschreibung"   /> 
 <meta   property  =  "og:image"           content  =  "https://www.your-domain.com/path/image.jpg"   /> 
 </head> 
 <body> 
 
 <!-- Facebook SDK laden für JavaScript --> 
 <div   id  =  "fb-root"  ></div> 
 <script>  (  function  (  d  ,  s  ,  id  )   { 
 var  js  ,  fjs  =  d  .  getElementsByTagName  (  s  )[  0  ]; 
 if   (  d  .  getElementById  (  id  ))   return  ; 
  js  =  d  .   createElement  (  s  );   js  .   id  =  id  ; 
  js  .   src  =   "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"  ; 
  fjs  .   Elternknoten  .   insertBefore  (  js  ,  fjs  ); 
  }(  document  ,   'script'  ,   'facebook-jssdk'  ));   </script> 
 
 <!-- Ihr Share-Button-Code --> 
 <div   class  =  "fb-share-button"  
 data-href  =  "https://www.your-domain.com/your-page.html"  
 data -layout  =  "button_count"  > 
 </div> 
 
</body> 
 </html> 
 

Schließen

Mein Selbstgeschriebenes script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<style>
#shariff_button {
    background: #3b5998;
    border-radius: 3px;
    font-weight: 600;
    padding: 5px 8px;
    display: inline-block;
    position: static;
}
 
#shariff_button:hover {
    cursor: pointer;
    background: #213A6F
}
 
#shariff_button svg {
    width: 18px;
    fill: white;
    vertical-align: middle;
    border-radius: 2px
}
 
#shariff_button span {
    vertical-align: middle;
    color: white;
    font-size: 14px;
    padding: 0 3px
}    
</style>
 
<div id="shariff_button">
    <svg viewBox="0 0 12 12" preserveAspectRatio="Beitrag Posten">
        <path class="svg-icon-path" d="M9.1,0.1V2H8C7.6,2,7.3,2.1,7.1,2.3C7,2.4,6.9,2.7,6.9,3v1.4H9L8.8,6.5H6.9V12H4.7V6.5H2.9V4.4h1.8V2.8 c0-0.9,0.3-1.6,0.7-2.1C6,0.2,6.6,0,7.5,0C8.2,0,8.7,0,9.1,0.1z"></path>
    </svg>
    <span>Teilen</span>
</div>
 
<script>
 var shariff_button = document.getElementById('shariff_button');
var url = window.location.href;
 
shariff_button.addEventListener('click', function() {
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + url,
        'facebook-share-dialog',
        'width=800,height=600'
    );
    return false;
});   
</script>
 

Schließen

Um hier keinen nahezutreten zwecks Datenschutz und DSGVO. Jeder der in Facebook unterwegs ist weis das seine daten gespeichert und an Dritte sowie in die US-Staaten weitergesendet werden und verarbeitet, Facebook ist eine riesige Datenkrake.

Ich denke das ich mit meinem Code und Script keinen der genannten DSGVO oder Datenschutz verletze.

Ich weise auf, weitere Einzelheiten zu Art und Umfang der gespeicherten Daten finden Sie in den Datenschutzerklärungen der einzelnen Anbieter:

Datenschutzrichtlinie von Facebook!

Einbauanleitung als Plugin:

Geht man so vor Admin > Plugin-Entwicklung > Neues Element erstellen > Template Element > NEUE Plugin Elemente > bottom_header

Dann den Code eingeben:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<style>
#shariff_button {
    background: #3b5998;
    border-radius: 3px;
    font-weight: 600;
    padding: 5px 8px;
    display: inline-block;
    position: static;
}
 
#shariff_button:hover {
    cursor: pointer;
    background: #213A6F
}
 
#shariff_button svg {
    width: 18px;
    fill: white;
    vertical-align: middle;
    border-radius: 2px
}
 
#shariff_button span {
    vertical-align: middle;
    color: white;
    font-size: 14px;
    padding: 0 3px
}    
</style>
 
<script>
 var shariff_button = document.getElementById('shariff_button');
var url = window.location.href;
 
shariff_button.addEventListener('click', function() {
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + url,
        'facebook-share-dialog',
        'width=800,height=600'
    );
    return false;
});   
</script>
 

Schließen

Hier ist die Frage für den Forencode gebe ich den so ein, dass es lose in der iconbar liegt oder mache ich es als Baustein als kleines iconbarmenü? Geschmäcker sind verschieden.

Einbau-Anleitungen für die iconbar:

Für die Iconbar geht man so vor:

Hier der Code, den ich einfach bei Forencode eingegeben habe.

Ersetze:

1
 
[Facebook/Teilen]

Mit:

1
 
<div id="shariff_button">     <svg viewBox="0 0 12 12" preserveAspectRatio="Beitrag Posten">         <path class="svg-icon-path" d="M9.1,0.1V2H8C7.6,2,7.3,2.1,7.1,2.3C7,2.4,6.9,2.7,6.9,3v1.4H9L8.8,6.5H6.9V12H4.7V6.5H2.9V4.4h1.8V2.8 c0-0.9,0.3-1.6,0.7-2.1C6,0.2,6.6,0,7.5,0C8.2,0,8.7,0,9.1,0.1z"></path>     </svg>     <span>Teilen</span> </div>

Grafik:

1
 
files.homepagemodules.de/b916726/a_75_322c7c27.png

Beispiel Bild:

[[File:Beispiel.png|none|auto]]

Wenn man es mit Aufruf mit OnClick machen möchte, muss es in nicht sichtbar verschoben werden.

Aufbau mit Aufruf mit OnClick:

Für die Iconbar mit HTML nehme ich den Textbaustein von Wolfgang und wird hierfür angepasst für Einfügen in Beiträgen am Schluss für die Teilen-Buttons

Hier geht man wie folgend vor:

Adminbereich, Layout, Iconbar, Reiter - HTML.

Dann in

Name: Teilen_Button Eingeben.

Dann in

HTML: HTML - Code eingeben.

Hier der HTML - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<style>
#shariff_buttonbaustein {display:none; position:absolute; background:#ffffff; width: auto; margin-left:-100px; margin-top:0; color:#000000; padding:0px !important; z-index:999999; text-align:left; border:1px solid #000000; border-radius:4px; font-size:13px; cursor:default;}
#shariff_buttonbaustein_close {position:absolute; right:0; padding:4px 10px 0 20px; font-weight:bold; cursor:pointer; }
#shariff_buttonbaustein_on {padding:20px 10px 10px 10px;}
#shariff_buttonbaustein_on div {text-align:left; margin-left:6px; padding:3px 5px; font-weight:bold; clear:both; cursor:pointer;}
#shariff_buttonbaustein_on div:hover {background:#aaaaaa; color:#383838;}
</style>
 
<div class="xob_icon_cont" id="shariff_buttonbaustein_menue">
<span><img class="xob_icon" src="https://files.homepagemodules.de/b916726/a_80_de08113f.png"></span>
<div id="shariff_buttonbaustein">
<div id="shariff_buttonbaustein_close">X</div>
 
<div id="shariff_buttonbaustein_on">
<hr>
<div onclick="xob_insert('[Facebook/Teilen]','')" class="xob_icon_cont"><img alt="Textfeld" title="Facebook_Teilen" class="xob_icon" src="https://files.homepagemodules.de/b916726/a_75_322c7c27.png"></div>
 
 

 
</div>
</div>
</div>
 
<script>
window.addEventListener('load', function(){
 
$('#shariff_buttonbaustein_menue span').on('click',function(){
$('#shariff_buttonbaustein').show(300);
});
 
$('#shariff_buttonbaustein_close').on('click',function(){
$('#shariff_buttonbaustein').slideUp(300);
});
 
});
</script>
 

Bild, wie es ausschaut:

[[File:posten und teilen.png|none|auto]]

Ach so bevor ich es vergesse nicht wundern, der Button zum Teilen liest erst die URL wen der Button mit dem Beitrag gespeichert wurde, in der Vorschau geht das nicht. Da liest er nur das Hauptforum URL in der Vorschau.

Mit freundlichen Grüßen

Daishi

Antworten

Notize � � Geöffnet Schild für das Forum

DSGVO-konforme Video-Einbettung � GDPR Compliant Video Embed