arusahni / ngtweet Goto Github PK

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.

Home Page: http://arusahni.github.io/ngtweet/

License: MIT License

JavaScript 100.00%

twitter-widget angular-js hacktoberfest

ngtweet's Introduction

ngTweet

Easily embed Twitter widgets into your Angular application! No more having to kludge together a Twitter script loader, or manage embed state on visibility change.

Installation

Node

npm install --save ngtweet

Bower

$ bower install ngtweet

Then 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:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="bower_modules/ngtweet/dist/ngtweet.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        var myApp = angular.module('myApp', ['ngtweet']);
    </script>
    ...
</head>
<body>
    ...
</body>
</html>

Usage

There are two ways to embed a Twitter widget - with the source from Twitter (embedded), or via Tweet ID (linked).

Embedded Tweet

Given the source for an embedded Tweet

<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">&quot;No one likes Bit O&#39; Honey.&quot; ~<a href="https://twitter.com/griffinmcelroy">@griffinmcelroy</a> <a href="https://twitter.com/hashtag/truth?src=hash">#truth</a></p>&mdash; Aru (@IAmAru) <a href="https://twitter.com/IAmAru/status/608455483507245059">June 10, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

First, remove the <script> element from the markup. Then, simply wrap it in a <twitter-widget> tag:

<twitter-widget>
<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">&quot;No one likes Bit O&#39; Honey.&quot; ~<a href="https://twitter.com/griffinmcelroy">@griffinmcelroy</a> <a href="https://twitter.com/hashtag/truth?src=hash">#truth</a></p>&mdash; Aru (@IAmAru) <a href="https://twitter.com/IAmAru/status/608455483507245059">June 10, 2015</a></blockquote>
</twitter-widget>

Load your app, and you get:

Linked Tweet

Given a Tweet with ID '617749885933232128', simply add a <twitter-widget> tag to your markup with an attribute named twitter-widget-id specifying the Tweet ID.

<twitter-widget twitter-widget-id="'617749885933232128'">
</twitter-widget>

This, combined with ngRepeat, can display collections of individual Tweets:

<!-- Note: Tweet IDs should be represented as strings in order to maintain precision -->
<div ng-repeat="tweetID in tweetIDs track by $index">
    <twitter-widget twitter-widget-id="tweetID">
    </twitter-widget>
</div>

Embedded Timeline

Given the source for an embedded timeline.

<a class="twitter-timeline"  href="https://twitter.com/IAmAru/lists/food-trucks" data-widget-id="673710543212052480">Tweets from https://twitter.com/IAmAru/lists/food-trucks</a>
<script>!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");</script>

Remove the <script> element from the markup. Then wrap it in a <twitter-timeline> tag:

<twitter-timeline>
    <a class="twitter-timeline" href="https://twitter.com/IAmAru/lists/food-trucks" data-widget-id="673710543212052480"> Tweets from https://twitter.com/IAmAru/lists/food-trucks</a>
</twitter-timeline>

Load your app, and you get:

Linked Timeline

Given a timeline with ID '673710543212052480', simply add a <twitter-timeline> tag to your markup with an attribute named twitter-timeline-id specifying the Timeline ID.

<twitter-timeline twitter-timeline-id="'6673710543212052480'">
</twitter-timeline>

New-style Timelines

Recently, 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...

<twitter-timeline twitter-timeline-type='list'
                  twitter-timeline-owner-screen-name='"IAmAru"'
                  twitter-timeline-slug='"food-trucks"'>
</twitter-timeline>

Additional features

Eagerly load the Twitter widget script

The 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,

<html ng-app="myapp">
    <body twitter-widget-initialize>
    </body>
</html>

Configuration

You can change the path to the widget.js file in case you want to host your own version:

angular.module("myApp", ['ngtweet'])
       .value('twitterWidgetURL', '/PATH/TO/widgets.js'); //default https://platform.twitter.com/widgets.js

Since the widgets.js file is served over SSL by default, the twitterWidgetURL value can be modified to use the plain 'ol HTTP version.

Contributing

Pull requests are welcomed! The existing code follows John Papa's wonderful Angular Style Guide. 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.

The Future (tm)

This 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.

ngtweet's People

Contributors

Stargazers

Watchers

ngtweet's Issues

Using in Ionic Framework app

Hi! This is really slick. Are you aware of anyone who has made it work in Ionic? I've hunted high and low for something that would make widgets-js work inside an Ionic app, but no luck. ngtweet seems like the closest thing in theory, but alas it doesn't work in Ionic when running on a device (just nothing renders).

In any case, good stuff. Thanks for sharing it!

tweet-limit doesn't work as option

https://dev.twitter.com/web/embedded-timelines/parameters

It seams that only chrome option works :-/

iOs Bootstrap Issue

Hello

The twitter timeline I want to display in my app works great in browsers and Android but not in iOs.
I test the unminified version as you suggest in this Issue #7 but it doesn't works. There is something else I can do?

Thank you,

Make a shiny GitHub page

Add a demo page so developers can get an idea of what's what.

Does the directive need a 'destroy' handler?

We are using the directive in multiple pages within our SPA web site. From looking at the browser console it seems that the more we navigate around the site the more polling of the twitter API occurs.

I am thinking that every time a page is rendered a new object is created but not destroyed when the page is left.

Could this be the case? Is there anything I can do about this?

$compile:nonassign error when using twitter-widget-options

I'm running a fairly large app on Angular v1.3. When I try using standard markup such as the following:

<twitter-widget twitter-widget-id="'690336422717476865'" twitter-widget-options="{'cards': 'hidden', 'conversation': 'none'}">
</twitter-widget>

I see a console error pointing me to https://docs.angularjs.org/error/$compile/nonassign

I'm going to submit a PR that changes the binding of the twitter-widget-options from 2-way object binding to attribute binding as that resolves the issue for me

p.s. thanks for the library!

Naming

The 'ng' prefix is a namespace used by AngularJS. You might want to consider renaming it so as to not pollute their namespace, as the AngularJS website says:

Best Practice: In order to avoid collisions with some future standard, it's best to prefix your own directive names. For instance, if you created a directive, it would be problematic if HTML7 introduced the same element. A two or three letter prefix (e.g. btfCarousel) works well. Similarly, do not prefix your own directives with ng or they might conflict with directives included in a future version of Angular.

Minified (production) version of this library modifies global app settings

https://github.com/arusahni/ngtweet/blob/master/src/prod.config.js

This is somehow unexpected and I don't think should happen in public library.
I've got an issue with https://github.com/angular-ui-tree/angular-ui-tree library which relies on angular.element(node).scope() for it's drag-n-drop functionality, which itself becomes unavailable if you do $compileProvider.debugInfoEnabled(false);
Took me a bit of time to investigate.
There are easy workarounds: use non-minified version (minify it by yourself), or reenable this feature in app config, but again, I would not expect such global influence on the app from one of many libs.

Twitter widget script runs on app load

Right now, when an Angular app using ngTweet is initialized, the Twitter widget script automatically loads and processes the page. This should instead be on-demand.

Disable auto reload

Is there a way to disable auto reload?
I figure out that with my tiny raspberry (first generation), my load average takes of after a moment. I'm going to test with a tweet limit..

Rendered handlers

Allow for developers to register handlers for when a Tweet widget gets rendered.

At the moment this is only feasible with "linked" widgets. Currently, there is no way to get the Tweet ID from the library's rendered event.

Allow for Timeline embeds

Expose this part of the Twitter Widget library.

TypeError: Cannot read property 'ready' of undefined with new timeline and twitter-widget-initialize

when including twitter-widget-initialize the new style timelines throw a "TypeError: Cannot read property 'ready' of undefined" error.

<body twitter-widget-initialize>
<twitter-timeline twitter-timeline-type='list'
                  twitter-timeline-owner-screen-name='"IAmAru"'
                  twitter-timeline-slug='"food-trucks"'>
</twitter-timeline>
</body>

textAngular and ngTweet

Hello. I try to add <twitter-widget></twitter-widget> tag through WYSIWYG editor on page, but in html it not renders to tweet.
I add twitter-widget descriptor to sanitizers options, because without that, sanitizer delete this tag and leave only <p></p>.

On a picture: first <p> and <blockquote> rendered if I add <twitter-widget><blockquo.... .
Second <p> not renders to tweet if I use directive with id.

What is wrong? Thanks for reply.

Render tweet after HTTP Get

Hi,

Is there a way to render the twitter widget after $promise.then? That's because I'm taking the tweet id from a remote database.

Thank you

twttr.ready isn't always firing

Hey @arusahni
Its great work.
Somehow I experienced that twttr.ready is not firing when twitter widget js is already loaded before.
Because your code depends on twttr.ready, so if it isn't firing, whole this plugin stops working.
https://github.com/arusahni/ngtweet/blob/develop/src/twitterWidget.service.js#L37
So i think you need to check if its loaded already by $window.twttr.init == true first and if it isn't, add listener to twttr.ready.
i can submit PR if wanted

Rename occurrences of Angular to Angular.js

The readme states "Angular" a lot. This is very confusing because this is actually a library for the old Angular.js and not for Angular (>= v2)

ngtweet not shown inside ui-view router

I am using your library to load a tweet preview inside a partials html file. However the tweet didn't shown up. How to solve this problem ?

dynamically load timeline

I am using this to load collection timeline and it is working when page loads, and I want to change timeline on click event by changing twitter-timeline-id of another collection but with no success.

I am calling twttr.widgets.load(); after twitter-timeline-id change with no success.

<twitter-timeline twitter-timeline-type="collection" twitter-timeline-id="'731630017813684224'" twitter-timeline-options='{"chrome": "noheader"}'> </twitter-timeline>

Any way to show loading?

I have tweets by ID. ngTweet works great, but it would be very useful if I could provide a place holder while I wait for Twitter to render the tweet.

For example..

<twitter-widget twitter-widget-id="tweet" twitter-widget-options="{'cards': 'show', 'align': 'center', 'conversation': true, 'theme': 'light'}">
   [[ Loading tweet id {{tweet}} ]] <!-- Placeholder -->
</twitter-widget>

Will render the loading indicator AND the resulting tweet from twitter appended. Ideally, the resulting tweet would replace or hide the loading indicator.

Is there anyway to do this?

Tweets not recognized when added dynamically

The problem comes when for instance, I make an http request to retrieve a list of tweets, and then on success of the request, I loop through the tweets and dynamically add a <twitter-widget twitter-widget-id="'anid'"></twitter-widget> with the tweet id instead of an "anid".

I tried with an hardcoded id using the twitter-widget, and it works, so the problems seems to come when the element is dynamically added after page load.

Here would be the code that I am using to display the tweets :
`

And how I dynamically "feed" it :

$scope.getTweets = function() {
    // Twitter
    $http.get('http://localhost:3000/twitter?search=' + $scope.searchQuery)
        .success(function(tweets) {
            $scope.rawResult = tweets;
            $scope.tweets = tweets;
        })
        .error(function(object, error) {
            console.log(error);
        });
    }

Here's the HTML of the page after the elements have been added :

Hope that's enough material for you to find it what's the problem !

Thanks

Batch widget embed requests

Currently, a request is sent to Twitter for each embed. Twitter offers a way to group the requests together for multiple components. Investigate a way to do this automatically (debouncing?) or, worse case, provide a way for developers to pass in a hint.

Getting tweet event calllback

Hi,
First of thanks a lot in making this ... I tried a lot getting twitter widget working with my ng-view switching, ultimately your library is only one working !

I want a simple function callback on

twttr.events.bind(
  'tweet',
  function (event) {
    // Do something there
  }
);

If you cannot add this to code right now, please let me know how to do this so that I can change my files. Need this ASAP !

Thanks a lot

Generate ngtweet for tweets inside html

Hi,

I'm getting an html from the server and the html might contain 1 or more tweets in the form of blackquotes and script tag. Is it possible to do something with the html so I can use ngtweet to render my tweets?

Thanks,
Amit.

Twitter has stopped supporting data_widget_id for many of their widgets

I'd like to begin thank you for this awesome project. I was very eager to use it in my own app, but I ran into trouble tracking down the data_widget_id for a user timeline. Just wanted to let you know that it looks like the twitter team are ending support for ID's altogether. See discussion here, in particular,

The new model means that there are no "widgets" as such any more - so there are no IDs.

Hope you are able to find a work-around or perhaps point users toward an alternate solution without too much grief.

Allow Tweet customization

Embedded Tweets can be customized, expose this functionality.

Tweets not rendering second time around.

When I first load a page that has a tweet-widget directive, it loads.

But as soon as I navigate to a different part of the site, tweets no longer load on pages where the directive is present.

$window.twttr doesn't exist anymore the second time around either.

Twitter Moments

Is it possible to retrieve user's Moment using this library ?
I think not, as of now.
It will be great if feature is added.

cannot seem to load widget

Wanted to post a question rather than an issue.

I cannot seem to be able to load the widget for some reason. I only get the default HTML href behavior instead of the Load widget functionality shown in your webpage on my ionic app.

Installed ngtweet using bower
$ bower install ngtweet

Linked ngtweet.min.js file to index.html and verified through console and sources that it is being called
<script src="lib/ngtweet/dist/ngtweet.min.js"></script>

HTML as shown below:

<ion-view view-title="About">
       <ion-content class="padding">
         <h3>lordlabakdas's tab</h3>
         <twitter-timeline>
    <a class="twitter-timeline" href="https://twitter.com/search?q=weather%20lawrence%20kansas&src=typd" data-widget-id="673710543212052480"> Tweets from Lawrence Weather</a>
        </twitter-timeline>
    </ion-content>
</ion-view>

Is there something I am missing in my setup?