javascript - Replace tweet button icon - Stack Overflow

admin管理员组

文章数量:1414878

I have a twitter share button that is created dynamically:

Html:

    <a id="twitter_publish" href="" class="twitter-share-button" data-via="3imit" data-count="none"></a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Javascript:

function tweetSetup() {
    $("#twitter_publish").remove();
    $(".twitter-share-button").remove();
    var tweet = $('<a>')
        .attr('href', "")
        .attr('id', "twitter_publish")
        .attr('class', "twitter-share-button")
        .attr('data-lang', "en")
        .attr('data-via', "3imit")
        .attr('data-count', "none")
        .attr('data-text', "Take a look at this:")
        .attr('data-url', $("#some_link").val())
        .text('Tweet');

    $("#facebook_publish").after(tweet);
    twttr.widgets.load();
    $("#twitter-share-button").show();
}

I would like to replace the default tweet icon with my own icon. How can I do that?

I have a twitter share button that is created dynamically:

Html:

    <a id="twitter_publish" href="https://twitter./share" class="twitter-share-button" data-via="3imit" data-count="none"></a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter./widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Javascript:

function tweetSetup() {
    $("#twitter_publish").remove();
    $(".twitter-share-button").remove();
    var tweet = $('<a>')
        .attr('href', "https://twitter./share")
        .attr('id', "twitter_publish")
        .attr('class', "twitter-share-button")
        .attr('data-lang', "en")
        .attr('data-via', "3imit")
        .attr('data-count', "none")
        .attr('data-text', "Take a look at this:")
        .attr('data-url', $("#some_link").val())
        .text('Tweet');

    $("#facebook_publish").after(tweet);
    twttr.widgets.load();
    $("#twitter-share-button").show();
}

I would like to replace the default tweet icon with my own icon. How can I do that?

• javascript
• twitter

Share Improve this question Follow asked Mar 30, 2013 at 18:56 alexarshalexarsh 5,4011212 gold badges4444 silver badges5353 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Twitter has an example on how to do that here (scroll to bottom, "Build Your Own Tweet Button"):

<style type="text/css" media="screen">
  #custom-tweet-button a {
    display: block;
    padding: 2px 5px 2px 20px;
    background: url('https://twitter./favicons/favicon.ico') 1px center no-repeat;
    border: 1px solid #ccc;
  }

</style>

<div id="custom-tweet-button">
  <a href="https://twitter./share?url=https%3A%2F%2Fdev.twitter.%2Fpages%2Ftweet-button" target="_blank">Tweet</a>
</div>

Check my answer on this question:

twitter button, with events and custom design

You can have a custom link and still use javascript API. For your case, your link should point to https://twitter./intent/tweet and you should add the query parameters you need to the url like this for example:

<a href="https://twitter./intent/tweet?url=http%3A%2F%2Fwww.yoururl.&text=your%20text">Tweet</a>

本文标签： javascriptReplace tweet button iconStack Overflow