如何将博客中的图片附加到 LinkedIn 分享 post？

Question

我有一个博客，我想通过 LinkedIn 共享。 LinkedIn 提供的文档虽然简单，但没有足够的细节让我理解我的用例。我的用例要求我动态地将图片和描述放入每个博客 post，现在还没有填充。这是一个 Angular 项目。

我当前的代码： 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 //我的所有数据都在这个区域的 $scope 变量中，其中包括 // 我想附加到 post.

的图片和说明

以下是 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>

据我了解，我需要用正确的 data/links 填充有效负载对象。根据 docs.

中的内容，我不知道如何执行此操作

以下是我 tried/thought 的一些事情以及我目前遇到的问题：

1) 从post.js中获取数据并将其放入post.html中脚本标签之间的payload对象中。在做了一些研究之后，这是不可能的。虽然如果我错了，我欢迎被纠正。

2) 将 IN 对象带入 angular 并在 post.js 中填充有效负载。这听起来真的很棒，但 LinkedIn 没有提供 html 来调用 post.js 和 Angular 中的函数。此外，所提供的 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>

这个解决方案也没有得到解决方案。从这里去哪里，我不知道。我敢肯定，这很简单但很特别，我需要一点手把手。

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

如何将博客中的图片附加到 LinkedIn 分享 post？

How do you attach a picture to LinkedIn share from a blog post?

html

javascript

jquery

angularjs

linkedin-api