Wie fügen Sie einem LinkedIn-Beitrag ein Bild aus einem Blogpost hinzu?

Question

Ich habe einen Blog, den ich über LinkedIn teilen möchte. Die Dokumente von LinkedIn präsentieren, während einfach gesagt, haben nicht genug Details für mich, um meinen Anwendungsfall zu verstehen. In meinem Anwendungsfall muss ich das Bild und die Beschreibung dynamisch in jeden Blogeintrag einfügen, der gerade nicht ausgefüllt wird. Dies ist ein Angular-Projekt.

Mein aktueller Code: post.html

<script> 
    delete IN; 
    $.getScript("https://platform.linkedin.com/in.js"); 
</script> 
<script type="IN/Share" data-url={{webAddress}} data-counter="right"></script> 

post.js // Ich habe alle meine Daten in Rahmen $ Variablen in diesem Bereich, die umfasst // das Bild und die Beschreibung, die ich an den Beitrag anhängen möchte. Hier

ist, was der LinkedIn docs als der richtige Weg zeigen, um dies zu tun: post.html

<script type="text/javascript" src="//platform.linkedin.com/in.js"> 
    api_key: YOUR_API_KEY_HERE 
    authorize: true 
    onLoad: onLinkedInLoad 
</script> 

<script type="text/javascript"> 

    // Setup an event listener to make an API call once auth is complete 
    function onLinkedInLoad() { 
     IN.Event.on(IN, "auth", shareContent); 
    } 

    // Handle the successful return from the API call 
    function onSuccess(data) { 
    console.log(data); 
    } 

    // Handle an error response from the API call 
    function onError(error) { 
    console.log(error); 
    } 

    // Use the API call wrapper to share content on LinkedIn 
    function shareContent() { 

    // Build the JSON payload containing the content to be shared 
    var payload = { 
     "comment": "Check out developer.linkedin.com! http://linkd.in/1FC2PyG", 
     "visibility": { 
     "code": "anyone" 
     } 
    }; 

    IN.API.Raw("/people/~/shares?format=json") 
     .method("POST") 
     .body(JSON.stringify(payload)) 
     .result(onSuccess) 
     .error(onError); 
    } 

</script> 

Wie ich es verstehe, muß ich die Nutzlast Objekt mit den richtigen Daten füllen/Links. Ich habe keine Ahnung, wie man das macht, basierend auf dem, was in der docs ist.

Hier sind ein paar Dinge, die ich versucht habe,/Gedanken über zusammen mit, wo ich zur Zeit stecken:

1) die Daten von post.js bekommen und es in der Nutzlast Objekt zwischen dem Script-Tags setzen in post.html. Nach einigen Nachforschungen ist dies nicht möglich. Obwohl ich gerne korrigiert werde, wenn ich falsch liege.

2) Bringen Sie das IN-Objekt in eckig und füllen Sie die Nutzlast in post.js. Das hört sich wirklich gut an, aber LinkedIn bietet kein HTML, mit dem man eine Funktion in post.js mit Angular aufrufen kann. Plus der LinkedIn-Code, wie dargestellt, kümmert sich um die Formatierung für die Schaltfläche und was kommt, nachdem Sie darauf klicken.

3) Führen Sie einen HTTP-Aufruf innerhalb der Skript-Tags mit JQuery aus. Ich verwende selten JQuery und habe noch nie zuvor http für JQuery benutzt. Wenn dies auch ein gangbarer Weg ist dieses Problem zu denken, ist das, was ich kam mit:

<script type="IN/Share" data-url={{webAddress}} data-counter="right"> 
        $.get("https://public-api.wordpress.com/rest/v1.1/sites/myPost", function(response) { 
        var post = _.first(_.filter(response.posts, function(n){return n.title.replace(/ /g,"-").replace(/[:]/g, "").toLowerCase() === $stateParams.id})); 
        var post1 = _.assign(post, {category: _.first(_.keys(post.categories)), pic: _.first(_.values(post.attachments)).URL, credit: _.first(_.values(post.attachments)).caption, linkCredit: _.first(_.values(post.attachments)).alt, fullStory: post.content.replace(/<(?!\s*\/?\s*p\b)[^>]*>/gi,'')}); 
        **var image = post1.pic;** 
        **var title = post1.title;** 
        **var webAddress = window.location.href;** 

        function onLinkedInLoad() { 
         IN.Event.on(IN, "auth", shareContent); 
        } 

        function onSuccess(data) { 
        console.log(data); 
        } 

        function onError(error) { 
        console.log(error); 
        } 

        function shareContent(title, image, webAddress) { 

        var payload = {       
         "content": { 
         "title": title, 
         "submitted-image-url": image, 
         "submitted-url": webAddress 
         } 
        }; 

        IN.API.Raw("/people/~/shares?format=json") 
         .method("POST") 
         .body(JSON.stringify(payload)) 
         .result(onSuccess) 
         .error(onError); 
        } 
        }); 

        </script> 

Diese Lösung nicht entweder in einer Lösung geführt hat. Wohin ich von hier gehe, habe ich keine Ideen. Ich bin mir sicher, dass das einfach aber eigenwillig genug ist, dass ich eine kleine Hand brauche.

Answer 1

Leider habe ich nicht mit linkedin API gearbeitet.

Vielleicht wird nicht alles in meinem Beispiel richtig sein. Aber ich muss eine Variable IN in angular verwenden und über den Call-API-Wrapper schreiben.

Ein Beispiel für die Verwendung von Plugins, siehe Seite LinkedIn Plugins.

Live Beispiel auf jsfiddle.

//CallBackHell 
 
    function LinkedInServiceFunc(callback) { 
 
    callback && IN.Event.onDOMReady(callback); 
 
    } 
 

 
    angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function($scope, LinkedInService, ShareLinkedINService) { 
 
     console.log('ExampleController IN', IN); 
 
     console.log('ExampleController LinkedInService', LinkedInService); 
 
     LinkedInService.promise.then(function(LIN) { 
 
     console.log('Complete loading script for LinkedIn in ExampleController', LIN.Objects) 
 
     }); 
 

 
     //Then you can interact with IN object as angular service. Like this 
 
     $scope.shareContent = function() { // Use the API call wrapper to share content on LinkedIn 
 

 
     // Build the JSON payload containing the content to be shared 
 
     var payload = { 
 
      "comment": $scope.comment, 
 
      "visibility": { 
 
      "code": 'anyone' 
 
      } 
 
     }; 
 
     // Handle the successful return from the API call 
 
     function onSuccess(data) { 
 
      console.log(data); 
 
     } 
 

 
     // Handle an error response from the API call 
 
     function onError(error) { 
 
      console.log(error); 
 
     } 
 
     console.log('shareContent', payload); 
 
     LinkedInService.promise.then(function(LIN) { 
 
      LIN.API.Raw("/people/~/shares?format=json") 
 
      .method("POST") 
 
      .body(JSON.stringify(payload)) 
 
      .result(onSuccess) 
 
      .error(onError); 
 
     }); 
 
     } 
 
     $scope.shareContentService = function() { 
 
     //It's better way, i think 
 
     ShareLinkedINService.shareContent($scope.comment, 'anyone').then(function(data) { 
 
      console.log('success', data); 
 
     }).catch(function(data) { 
 
      console.err('error', data); 
 
     }); 
 
     } 
 
    }) 
 
    .service('LinkedInService', function($q) { 
 
     var defer = $q.defer(); 
 
     LinkedInServiceFunc(function() { 
 
     defer.resolve(IN); 
 
     }); 
 
     return { 
 
     promise: defer.promise 
 
     }; 
 
    }) 
 
    //You can create wrapper on IN API 
 
    .service('ShareLinkedINService', function(LinkedInService, $q) { 
 
     return { 
 
     shareContent: function(comment, visible) { 
 
      var defer = $q.defer(); 
 
      var payload = { 
 
      "comment": comment, 
 
      "visibility": { 
 
       "code": visible 
 
      } 
 
      }; 
 
      LinkedInService.promise.then(function(LIN) { 
 
      LIN.API.Raw("/people/~/shares?format=json") 
 
       .method("POST") 
 
       .body(JSON.stringify(payload)) 
 
       .result(defer.resolve) 
 
       .error(defer.reject); 
 
      }); 
 
      return defer.promise; 
 

 
     } 
 
     } 
 
    }) 
 
    .directive('linkedInShareButton', function(LinkedInService) { 
 
     return { 
 
     restrict: "E", 
 
     replace: false, 
 
     scope: { 
 
      shareUrl: "@", 
 
      counter:"@" 
 
     }, 
 
     link: function(scope, elem, attr) { 
 
      var script = document.createElement('script'); 
 
      script.setAttribute('type', 'IN/Share'); 
 
      script.setAttribute('data-url', scope.shareUrl); 
 
      script.setAttribute('data-counter', scope.counter); 
 
      elem.append(script); 
 
     }, 
 
     }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script type="text/javascript" src="//platform.linkedin.com/in.js"> 
 
    authorize: false 
 
    onLoad: LinkedInServiceFunc 
 
    //I don't have api_key, because i delete it 
 
    // api_key: YOUR_API_KEY_HERE 
 
    // authorize: true 
 
    // onLoad: onLinkedInLoad 
 
</script> 
 

 
<body ng-app="ExampleApp"> 
 
    <div> 
 
    <div ng-controller="ExampleController"> 
 
     <input ng-model="comment"> 
 
     <button ng-click="shareContent()"> 
 
     shareContent 
 
     </button> 
 
     <button ng-click="shareContentService()"> 
 
     shareContentService 
 
     </button> 
 
     <script type="IN/Share" data-url="www.mail.ru" data-counter="top"></script> 
 
     <linked-in-share-button share-url="www.mail.ru" counter="top"></linked-in-share-button> 
 
    </div> 
 
    </div> 
 
</body>