cornflourblue / angulike

AngularJS directives for social sharing buttons - Facebook Like, Google+, Twitter and Pinterest

angulike

AngularJS directives for social sharing buttons - Facebook Like, Google+, Twitter and Pinterest

Demo

To see a demo and further details go to http://jasonwatmore.com/post/2014/08/01/AngularJS-directives-for-social-sharing-buttons-Facebook-Like-GooglePlus-Twitter-and-Pinterest.aspx

Installation

Install using bower: bower install angulike

Alternatively download the code and include the angulike.js file in your page.

Add the 'angulike' directive as a dependency of your AngularJS application:

angular.module('myApp', ['angulike']);

Usage

Facebook Like

Create an empty div with the fb-like attribute.

<div fb-like></div>

To use a custom URL for the facebook like button:

<div fb-like="myModel.Url"></div>

Google+

Create an empty div with the google-plus attribute.

<div google-plus></div>

To use a custom URL for the google plus button:

<div google-plus="myModel.Url"></div>

Twitter

Create an empty div with the tweet attribute, the value of the attribute contains the name of the model object for the tweet text.

<div tweet="myModel.Name"></div>

To use a custom URL for the tweet button:

<div tweet="myModel.Name" tweet-url="myModel.Url"></div>

Pinterest

Create an empty div with the pin-it and pin-it-image attributes, the pin-it attribute contains the name of the model object for the description and the pin-it-image attribute contains the name of the model object for the image url:

<div pin-it="myModel.Name" pin-it-image="myModel.ImageUrl"></div>

To use a custom URL for the pinterest button:

<div pin-it="myModel.Name" pin-it-image="myModel.ImageUrl" pin-it-url="myModel.Url"></div>

angulike's Issues

Get rid of the jquery dependency

A lot of people recommend not to mix jquery with angularjs, would it be possible to replace $.getScript with $http.get(src) and eval(response) to make it execute the script? (any thoughts from a more experienced angular dev welcome)

Instead of tweet required follow Button

Facebook like and share buttons tied to another page

I would like to tie the facebook share link to another on my site rather than the current page that is being shared.

Do you have any idea how I may adjust the link?

How to use in Ionic application

I wan to use this Module in my ionic application, but it is not working violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'" Says But working fine in Angular Web app.

Custom buttons?

For example on Facebook is there a way to create a customised button?

10 $digest() iterations reached. Aborting!

I am using angulike like this -

          span(pin-it="product.title" pin-it-image="product.photos[0].image_url")
          span(tweet="product.title")
          span(fb-like="")
          span(google-plus="")

product.title & product.photos[0].image_url are dynamic object properties loaded from an AJAX call.

On first page load ('/product/1'), everything is fine. product 1's model is loaded and the watchers for the above social plugins fires.

Next, I click a click to go to the next page '/product/2' which uses the same template above. My code then fetches product 2's model. Then I get these errors:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"]]
http://errors.angularjs.org/1.3.1/$rootScope/infdig?p0=10&p1=%5B%5B%22pinIt…%22tweet%3B%20newVal%3A%20%5C%22%5C%22%3B%20oldVal%3A%20undefined%22%5D%5D
    at http://127.0.0.1:3000/bower_components/angular/angular.js:80:12
    at Scope.$digest (http://127.0.0.1:3000/bower_components/angular/angular.js:13990:19)
    at Scope.$apply (http://127.0.0.1:3000/bower_components/angular/angular.js:14214:24)
    at http://127.0.0.1:3000/bower_components/angular/angular.js:15945:36
    at completeOutstandingRequest (http://127.0.0.1:3000/bower_components/angular/angular.js:4842:10)
    at http://127.0.0.1:3000/bower_components/angular/angular.js:5215:7 angular.js:11339
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"]]
http://errors.angularjs.org/1.3.1/$rootScope/infdig?p0=10&p1=%5B%5B%22pinIt…%22tweet%3B%20newVal%3A%20%5C%22%5C%22%3B%20oldVal%3A%20undefined%22%5D%5D angular.js:80
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"]]
http://errors.angularjs.org/1.3.1/$rootScope/infdig?p0=10&p1=%5B%5B%22pinIt…%22tweet%3B%20newVal%3A%20%5C%22%5C%22%3B%20oldVal%3A%20undefined%22%5D%5D
    at http://127.0.0.1:3000/bower_components/angular/angular.js:80:12
    at Scope.$digest (http://127.0.0.1:3000/bower_components/angular/angular.js:13990:19)
    at Scope.$apply (http://127.0.0.1:3000/bower_components/angular/angular.js:14214:24)
    at done (http://127.0.0.1:3000/bower_components/angular/angular.js:9474:47)
    at completeRequest (http://127.0.0.1:3000/bower_components/angular/angular.js:9659:7)
    at XMLHttpRequest.requestLoaded (http://127.0.0.1:3000/bower_components/angular/angular.js:9602:9) angular.js:11339
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"],["pinIt; newVal: \"\"; oldVal: undefined","tweet; newVal: \"\"; oldVal: undefined"]]

Can't get Tweet to work

FB directive works fine, but after following you instructions and copying

<div tweet="myModel.Name"></div>

into my code, I couldn't get a tweet link to appear.

how can i display only share for facebook and not the like button ?

Twitter And Pin it buttons are not apearing

I m using this module to my ionic app here google+ and facebook ion are appearing but Twitter and Pin it button are not appearing.

Set language from $rootScope

Hi,

Thanks for a great module! I think it would be a great idea to implement another variable on the $rootScope to specify a language for the fbLike-directive. As it is now you always get english.

npm package distrib evolution

Could you create a npm package of this component in order to use it with npm / browserify ?
It will complement the bower packaging.

model.name undefined when models loaded dynamically

Hi,

I'm loading models through $http ajax. Therefore, model.name will be undefined for a while. Problem is when the promise resolved, the social widgets do not register this change and so when I attempt to click the tweet button for example... it reads "undefined http://127.0.0.1:3000/product/10"

it always says jQuery not defined, whats the solution for it ?

How could replace the share button of angulike by a custom ( facebook ) ?

I would like to replace the share button of angulike by this custom , what is the correct way to do the replacement ?

<div id="fb-root"></div>
<a href="http://www.google.com/" data-image="Article img url" data-title="Article Title" data-desc="Some description for this article" class="fb_share">
    <img src="http://www.synermous.com/data/images/fb-icon.svg" alt="" width="50" height="50">
</a>

window.fbAsyncInit = function() {
    FB.init({
        appId: <your facebook app id>,
        status: true,
        cookie: true,
        xfbml: true
    });
};

(function(d, debug){var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];if   (d.getElementById(id)) {return;}js = d.createElement('script'); js.id = id; js.async = true;js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";ref.parentNode.insertBefore(js, ref);}(document, /*debug*/ false));

function postToFeed(title, desc, url, image) {
    var obj = {method: 'feed',link: url, picture: image,name: title,description: desc};
    function callback(response) {}
    FB.ui(obj, callback);
}

var fbShareBtn = document.querySelector('.fb_share');
fbShareBtn.addEventListener('click', function(e) {
    e.preventDefault();
    var title = fbShareBtn.getAttribute('data-title'),
        desc = fbShareBtn.getAttribute('data-desc'),
        url = fbShareBtn.getAttribute('href'),
        image = fbShareBtn.getAttribute('data-image');
    postToFeed(title, desc, url, image);

    return false;
});

http://tedshd.logdown.com/posts/200979-javascript-custom-facebook-share-button

Updating buttons on state change

Hello, I don't quite understand why you stop the $watch on scope.fbLike. It seems to me like this prevents the button from updating, when the view changes. I haven't looked into the other buttons yet, only FB, but I think keeping a $watch on the url is essential

Facebook and Google+ Icons are not working with URLs containing query params.

Examples:

Doesn't work
http://localhost:9000/results?location=raleigh-nc-c

Works

http://localhost:9000/listing/1198-shining-water-lane-creedmoor-nc-27522

URL in popup -

https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A9000%2Fhttp%253A%252F%252Flocalhost%253A9000%252Fresults%253Flocation%253Dbrassfield-elementary-raleigh-nc-e%2526tab%253Dhomes%2526anchor%253D0%2526NELAT%253D36.39566014444259%2526NELONG%253D-77.92769204528093%2526SWLAT%253D35.46605821598029%2526SWLONG%253D-79.30647622496843%2526zoom%253D10&display=popup&ref=plugin&src=like&app_id=1557143717880270

how do i make the image to be displayed when I click like and write comment on it. On my facebook wall it doesnt display the image.

Demo does not show the facebook button

The demo at http://jasonwatmore.com/post/2014/08/01/angularjs-directives-for-social-sharing-buttons-facebook-like-google-plus-twitter-and-pinterest does not work for facebook

Same for http://embed.plnkr.co/TQoIJ2/?show=preview

google plus doesn work

google plus doesn't work

bower install with latest angular fails due to version mismatch.

Unable to find a suitable version for angular, please choose one:
1) angular#~1.2.16 which resolved to 1.2.28 and is required by angulike#de2ec79068
2) angular#~1.3.10 which resolved to 1.3.10 and is required by songrhyme
3) angular#1.3.10 which resolved to 1.3.10 and is required by angular-route#1.3.10
4) angular#~1 which resolved to 1.3.11 and is required by ngDialog#0.3.9

Cannot get facebook link to display as a span or use with boostrap "pull-left" class

The directive is currently forcing me to work with a div. If I surround it with a span and attempt to pull it to the right with the pull-left bootstrap class, it constantly remains pulled to the right and behaves as a div.

Is this working with android and ios hybrid app?

Hi

Thanks for better directive , I created a apk for android and install on device, but below message shows.

my question is : does this work for app?

if (window.location.href.indexOf('http') != 0) {
alert("This demo must be run on a web server (i.e. the url must start with http/https), it won't work by opening the file directly in a browser.");
}

Thanks
Brijmohan

twitter mention @somebody

Hello, is it possible to add twitter mentions through this library?

something like:

tweet-mention="somebody"

Also considering hashtags too.

how can i change the icons for facebook share I want to display only the f button and not the whole share button.

In Ionic App Not working file://connect.facebook.net/en_US/sdk.js? File Not found error