2016-03-26 13 views
0

私はLinkedInを介して共有可能にしたいブログを持っています。 LinkedInのドキュメントでは、単純に述べているが、私のユースケースを理解するのに十分な詳細がない。私のユースケースでは、今投稿されていない各ブログ投稿に画像と説明を動的に配置する必要があります。これはAngularプロジェクトです。ブログ投稿からLinkedIn共有に画像を添付するにはどうすればよいですか?

私の現在のコード: 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 // I持って を含み、この領域では$スコープ変数で私のデータのすべて//投稿に添付したい画像と説明。ここで

はLinkedInのドキュメントは、これを行うための正しい方法として表示するものである: 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> 

私はそれを理解したように、私は右のデータをペイロード・オブジェクトを移入する必要があります/ links。 docsの内容に基づいてこれを行う方法がわかりません。 post.jsからデータを取得し、スクリプトタグ間のペイロード・オブジェクト内に入れて)

1:ここでは

は私が現在、こだわっているとに沿って約/思考試したいくつかのことですpost.html。いくつかの研究をした後、これを行うことはできません。私が間違っていると訂正されることを歓迎しますが。

2)INオブジェクトを角度に変換し、post.jsにペイロードを挿入します。これは本当に素晴らしいと思うが、LinkedInはpost.jsの関数をAngularで呼び出すためのhtmlを提供していない。さらに、表示されているLinkedInコードは、ボタンの書式設定と、クリックした後の内容を処理します。

3)JQueryを使用してスクリプトタグ内でhttpコールを行います。私はまれにJQueryを使用していて、以前はJQueryのためにhttpを使用したことはありません。このソリューションは、いずれかの解決策にはなりませんでした

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

:これも、この問題を考えるための実現可能な方法であれば、これは私が思い付いたものです。ここからどこに行くのか、私は考えがありません。私はこのシンプルですが、私は少し手を保持する必要があるほど独特のものだと確信しています。

答えて

1

残念ながら、私はlinkedin APIで作業していません。

私の例では、すべてが正しいとは限りません。しかし、angularに変数INを使用し、呼び出しAPIラッパーについて書かなければならない。

プラグインの使用例については、LinkedIn Pluginsを参照してください。

ライブサンプル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>

+0

感謝。私はそれをチェックしている。素晴らしいもの!私の主な質問は、LinkedInの共有ボタンのフォーマットを維持することでこれがどのように機能するのでしょうか? – rashadb

+0

@rashadb私は私の答えを更新しています。チェックしてください。 –

+0

ありがとうございます。私は今日これに着きます。 – rashadb

関連する問題