2010-12-22 3 views
32

Ich erstelle eine benutzerdefinierte Tweet-Schaltfläche mit meinen eigenen Stilen, aber es scheint, wenn Sie sich für die Anpassung Ihrer eigenen entscheiden, können Sie nicht die Datenattribute (Daten-Text, Daten-URL usw.) verwenden. Die Verwendung der Datenattribute scheint nur verfügbar zu sein, wenn Sie die Schaltfläche Twitter-Stil verwenden, die das Widget javascript (http://platform.twitter.com/widgets.js) verwendet.Kann man eine benutzerdefinierte Tweet-Schaltfläche verwenden und die Datenattribute verwenden?

Hier ist ein Code von der Twitter-Entwickler-Website. Im Folgenden wird der Button Tweet die Daten mit Attributen:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> 
<div> 
    <a href="http://twitter.com/share" class="twitter-share-button" 
    data-url="http://dev.twitter.com/pages/tweet_button" 
    data-via="twitterapi" 
    data-text="Checking out this page about Tweet Buttons" 
    data-related="anywhere:The Javascript API" 
    data-count="vertical">Tweet</a> 
</div> 

Jetzt hier unten ist das 'Build your own' Tweet Button:

<style type="text/css" media="screen"> 
    #custom-tweet-button a { 
    display: block; 
    padding: 2px 5px 2px 20px; 
    background: url('http://a4.twimg.com/images/favicon.gif') left center no-repeat; 
    border: 1px solid #ccc; 
    } 
</style> 
<div id="custom-tweet-button"> 
    <a href="http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button" target="_blank">Tweet</a> 
</div> 

Hoffentlich macht alles Sinn ...

Antwort

54

Für Aus irgendeinem Grund können Sie die JavaScript-Datenattribute nicht mit einer benutzerdefinierten Schaltfläche verwenden, sodass Sie sie zur URL in Ihrem HTML-Code hinzufügen müssen. Also für Ihr Beispiel:

Sie würden dann &text=your%20text mit Ihrem Text hinzufügen.

<a href="http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button&text=my%20text%20here" target="_blank"> 

Die anderen Codes sind die gleichen, fügen Sie einfach &related= usw.

Sie alle Leerzeichen mit %20 ersetzen Stellen Sie sicher, und das ist es.

+0

Das ist der eine. Prost. – igneosaur

+0

ich brauchte diese Antwort so lange !!! Vielen Dank! – juanchod

+0

brilliante, aber hässliche Lösung. Solange es funktioniert! vielen Dank. Ich nehme an, ich sollte einige Vorverarbeitung und dynamisch konstruieren die endgültige Zeichenfolge. – ahnbizcad

Verwandte Themen