Replacing twitter button

Question

I designed My own twitter button to better fit the graphical charter of my website. For this I used the Social Buttons for Boostrap.

The problem is that data-text doesent work anymore if I replace the class twitter-share-button by my own class btn btn-social-icon btn-twitter btn-xs.

How could I replace the twitter-share-button by my button while keeping the functionalities like data-text?

This is the working code from twitter where I would like to replace the class:

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

You can't change CSS of it. http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe — Kalpesh Singh, Apr 26 '16 at 08:29
So there is absolutely no way to tweet some text with a customized twitter button? I dont want to modify the actual twitter button but just replace it with my own. — michltm, Apr 26 '16 at 09:43

score 1 · Accepted Answer · answered Apr 26 '16 at 13:05

As I said, We can't change CSS of Iframe from different domain. So here is one solution. I used this most of the time. It's called Twitter Web Intent.

I hope this will be useful.

P.S Please check this jsbin link. Somehow jsfiddle is not supporting.

$(document).ready(function() {
  $('#tweetBtn').click(function() {
    var url = 'https://twitter.com/intent/tweet?hashtags=YouAreAwesome&original_referer=' + encodeURIComponent('stackoverflow.com') + '&text=' + encodeURIComponent('Thank you so much @knowkalpesh, you made my day!');
    window.open(url, '_blank');
  });

});

#tweetBtn {
  background: tomato;
  padding: 10px;
  display: inline-block;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tweetBtn">Custom Tweet Button</div>

lol thanks for this nice trick @knowkalpesh, you indeed made my day :) — michltm, Apr 26 '16 at 13:35
I won't accept thanks untill you click on button and tweet me exact words. :D — Kalpesh Singh, Apr 26 '16 at 14:21

Replacing twitter button

1 Answers1