Skip to content

Latest commit

 

History

History
76 lines (54 loc) · 1.75 KB

README.md

File metadata and controls

76 lines (54 loc) · 1.75 KB
Raw

Add custom CSS to the Twitter 1.1 Embed Widget. View a demo

Usage

Embed a Twitter Widget

<a class="twitter-timeline"
    data-chrome="noheader noborders transparent nofooter"
    data-link-color="#8e1d08"
    data-dnt="true"
    data-widget-id="your-widget-id"
    href="https://twitter.com/ekrubnivek"></a>

Embed the Twitter Javascript, preferably in the footer

<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.com/widgets.js";
    fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>

Embed the Customize-Twitter JS.

<script src="customize-twitter-1.1.min.js" type="text/javascript"></script>

Finally, initialize the widget. This function will continue to call itself until the Twitter iframe appears, no need for detecting the iframe load on your end.

<script>
var options = {
    "url": "/my-styles.css"
};
CustomizeTwitterWidget(options);
</script>

Options

Pass these as key/value pairs to the CustomizeTwitterWidget function as you see fit.

  • url: A link to the custom CSS you want to inject into Twitter's iframe.
  • widget_count: In case you have multiple Twitter widgets on a page, use this to ensure the custom CSS gets embedded in all of them. (Default: 1)
  • timeout_length: Specify a custom timeout length, in milliseconds. (Default: 300)

Tested Browsers

This plugin works for the stable versions of the following browsers:

  • Chrome
  • Firefox
  • Opera
  • Safari

As well as:

  • Internet Explorer 10

Other browsers have not been tested yet. If you have feedback, please, send it!