{"id":18836429,"url":"https://github.com/arusahni/ngtweet","last_synced_at":"2025-08-11T17:08:12.318Z","repository":{"id":34922300,"uuid":"38983283","full_name":"arusahni/ngtweet","owner":"arusahni","description":"Easily embed Twitter widgets into your Angular application! No more having to kludge together a Twitter script loader, or manage embed state on route/visibility change.","archived":false,"fork":false,"pushed_at":"2018-01-28T17:09:32.000Z","size":561,"stargazers_count":34,"open_issues_count":4,"forks_count":22,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-07-24T04:14:05.004Z","etag":null,"topics":["angular-js","hacktoberfest","twitter-widget"],"latest_commit_sha":null,"homepage":"http://arusahni.github.io/ngtweet/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arusahni.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-13T00:21:39.000Z","updated_at":"2024-04-15T20:44:51.000Z","dependencies_parsed_at":"2022-08-31T09:42:10.948Z","dependency_job_id":null,"html_url":"https://github.com/arusahni/ngtweet","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/arusahni/ngtweet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arusahni%2Fngtweet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arusahni%2Fngtweet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arusahni%2Fngtweet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arusahni%2Fngtweet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arusahni","download_url":"https://codeload.github.com/arusahni/ngtweet/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arusahni%2Fngtweet/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269922906,"owners_count":24496999,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-js","hacktoberfest","twitter-widget"],"created_at":"2024-11-08T02:22:03.520Z","updated_at":"2025-08-11T17:08:12.282Z","avatar_url":"https://github.com/arusahni.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngTweet\n\nEasily embed Twitter widgets into your Angular application! No more having to kludge together a Twitter script loader, or manage embed state on visibility change.\n\n## Installation\n\n### Node\n\n```console\nnpm install --save ngtweet\n```\n\n### Bower\n\n```console\n$ bower install ngtweet\n```\n\nThen include `ngtweet.js` or `ngtweet.min.js` in your markup and add `ngtweet` to your application's dependencies.  Your markup should look like this at the end:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml ng-app=\"myApp\"\u003e\n\u003chead\u003e\n    \u003cscript src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"bower_modules/ngtweet/dist/ngtweet.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" charset=\"utf-8\"\u003e\n        var myApp = angular.module('myApp', ['ngtweet']);\n    \u003c/script\u003e\n    ...\n\u003c/head\u003e\n\u003cbody\u003e\n    ...\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Usage\n\nThere are two ways to embed a Twitter widget - with the source from Twitter (*embedded*), or via Tweet ID (*linked*).\n\n### Embedded Tweet\n\nGiven the source for an embedded Tweet\n\n```html\n\u003cblockquote class=\"twitter-tweet\" lang=\"en\"\u003e\u003cp lang=\"en\" dir=\"ltr\"\u003e\u0026quot;No one likes Bit O\u0026#39; Honey.\u0026quot; ~\u003ca href=\"https://twitter.com/griffinmcelroy\"\u003e@griffinmcelroy\u003c/a\u003e \u003ca href=\"https://twitter.com/hashtag/truth?src=hash\"\u003e#truth\u003c/a\u003e\u003c/p\u003e\u0026mdash; Aru (@IAmAru) \u003ca href=\"https://twitter.com/IAmAru/status/608455483507245059\"\u003eJune 10, 2015\u003c/a\u003e\u003c/blockquote\u003e\n\u003cscript async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\nFirst, remove the `\u003cscript\u003e` element from the markup.  Then, simply wrap it in a `\u003ctwitter-widget\u003e` tag:\n\n```html\n\u003ctwitter-widget\u003e\n\u003cblockquote class=\"twitter-tweet\" lang=\"en\"\u003e\u003cp lang=\"en\" dir=\"ltr\"\u003e\u0026quot;No one likes Bit O\u0026#39; Honey.\u0026quot; ~\u003ca href=\"https://twitter.com/griffinmcelroy\"\u003e@griffinmcelroy\u003c/a\u003e \u003ca href=\"https://twitter.com/hashtag/truth?src=hash\"\u003e#truth\u003c/a\u003e\u003c/p\u003e\u0026mdash; Aru (@IAmAru) \u003ca href=\"https://twitter.com/IAmAru/status/608455483507245059\"\u003eJune 10, 2015\u003c/a\u003e\u003c/blockquote\u003e\n\u003c/twitter-widget\u003e\n```\n\nLoad your app, and you get:\n\n![A screenshot of a rendered embedded Tweet](./res/rendered-embed.png)\n\n### Linked Tweet\n\nGiven a Tweet with ID '617749885933232128', simply add a `\u003ctwitter-widget\u003e` tag to your markup with an attribute named `twitter-widget-id` specifying the Tweet ID.\n\n```html\n\u003ctwitter-widget twitter-widget-id=\"'617749885933232128'\"\u003e\n\u003c/twitter-widget\u003e\n```\n\nThis, combined with `ngRepeat`, can display collections of individual Tweets:\n\n```html\n\u003c!-- Note: Tweet IDs should be represented as strings in order to maintain precision --\u003e\n\u003cdiv ng-repeat=\"tweetID in tweetIDs track by $index\"\u003e\n    \u003ctwitter-widget twitter-widget-id=\"tweetID\"\u003e\n    \u003c/twitter-widget\u003e\n\u003c/div\u003e\n```\n\n![A screenshot of a rendered linked Tweet](./res/rendered-linked.png)\n\n### Embedded Timeline\n\nGiven the source for an embedded timeline.\n\n```html\n\u003ca class=\"twitter-timeline\"  href=\"https://twitter.com/IAmAru/lists/food-trucks\" data-widget-id=\"673710543212052480\"\u003eTweets from https://twitter.com/IAmAru/lists/food-trucks\u003c/a\u003e\n\u003cscript\u003e!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\"://platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");\u003c/script\u003e\n```\n\nRemove the `\u003cscript\u003e` element from the markup. Then wrap it in a `\u003ctwitter-timeline\u003e` tag:\n\n```html\n\u003ctwitter-timeline\u003e\n    \u003ca class=\"twitter-timeline\" href=\"https://twitter.com/IAmAru/lists/food-trucks\" data-widget-id=\"673710543212052480\"\u003e Tweets from https://twitter.com/IAmAru/lists/food-trucks\u003c/a\u003e\n\u003c/twitter-timeline\u003e\n```\n\nLoad your app, and you get:\n\n![A screenshot of a rendered embedded timeline](./res/rendered-timeline-embed.png)\n\n### Linked Timeline\n\nGiven a timeline with ID '673710543212052480', simply add a `\u003ctwitter-timeline\u003e` tag to your markup with an attribute named `twitter-timeline-id` specifying the Timeline ID.\n\n```html\n\u003ctwitter-timeline twitter-timeline-id=\"'6673710543212052480'\"\u003e\n\u003c/twitter-timeline\u003e\n```\n\n![A screenshot of a rendered linked timeline](./res/rendered-timeline-linked.png)\n\n### New-style Timelines\n\nRecently, Twitter updated how one goes about embedding a timeline - instead of generating an ID and linking to it, the parameters and type of timeline must be defined.  To get the food truck timeline from above...\n\n```html\n\u003ctwitter-timeline twitter-timeline-type='list'\n                  twitter-timeline-owner-screen-name='\"IAmAru\"'\n                  twitter-timeline-slug='\"food-trucks\"'\u003e\n\u003c/twitter-timeline\u003e\n```\n\n## Additional features\n\n### Eagerly load the Twitter widget script\n\nThe first time the `twitterWidget` directive is encountered, ngTweet downloads Twitter's Widget script.  If you would rather the script be downloaded at app startup, simply add the `twitter-widget-initialize` attribute to an element. For example,\n\n```html\n\u003chtml ng-app=\"myapp\"\u003e\n    \u003cbody twitter-widget-initialize\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Configuration\n\nYou can change the path to the `widget.js` file in case you want to host your own version:\n\n```javascript\nangular.module(\"myApp\", ['ngtweet'])\n       .value('twitterWidgetURL', '/PATH/TO/widgets.js'); //default https://platform.twitter.com/widgets.js\n```\n\nSince the `widgets.js` file is served over SSL by default, the `twitterWidgetURL` value can be modified to use the plain 'ol HTTP version.\n\n## Contributing\n\nPull requests are welcomed!  The existing code follows John Papa's wonderful [Angular Style Guide](https://github.com/johnpapa/angular-styleguide). Run `gulp build` to generate the debug and minified JavaScript files, and then `gulp serve` to run the demo site to verify embeds work.  Please include the compiled code within the `dist/` directory with your PR.\n\n## The Future (tm)\n\nThis is very much a young library, so I'm open to suggestions as to what direction it should go.  Currently eventing features and batch queries are slated for future development.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farusahni%2Fngtweet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farusahni%2Fngtweet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farusahni%2Fngtweet/lists"}