Search code examples
jqueryangularjslinkedin-api

LinkedIn share button only appearing on initial load in AngularJS app


I am using AngularJS 1.3 with jQuery 1.11, and I'm trying to add a LinkedIn share button (using the LinkedIn share plugin generator). This button appears in one of my templates, inside a div. Here is my code:

<div style="padding: 10px;">
    <!-- Social media icons from sharethis.com -->
    <script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
    <script type="IN/Share" data-counter="right"></script>
</div>

This button only appears when I initially visit the page / load the template. If I visit the page again, the button is no longer there (when I inspect the DOM, the script tags are there, however).


Solution

  • You need reparse dynamically added share buttons. For example with directive:

    <!doctype html>
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
            <script src="https://platform.linkedin.com/in.js" type="text/javascript">
                lang: en_US
            </script>
        </head>
        <body ng-app="plunker">
            <div  ng-controller="MainCtrl">
                <div ng-repeat="elem in elements">
                    <linked-in-share></linked-in-share>
                </div>
                
                <button ng-click="addShare()">Add</button>
            </div>
            <script>
                var app = angular.module('plunker', []);
                app.controller('MainCtrl', ['$scope', function($scope) {
                    $scope.elements = [0];
                    
                    $scope.addShare = function () {
                        $scope.elements.push( $scope.elements.length);
                    };
                }]).directive('linkedInShare', [function() {
                    return {
                        restrict: 'E',
                        template: '<script type="IN/Share" data-counter="top"><\/script>',
                        link: function (scope, element, attrs) {
                            if (IN.parse) {
                                IN.parse();
                            }
                        }
                    };
                }]);
            </script>
        </body>
    </html>

    It doesn't work in a snippet but it works in separate page.