如何将博客文章中的图片附加到LinkedIn共享
How do you attach a picture to LinkedIn share from a blog post?
我有一个博客，我想通过LinkedIn共享。LinkedIn提供的文档虽然只是简单地说，但没有足够的细节让我理解我的用例。我的用例要求我在每个博客文章中动态地放置图片和描述，而现在还没有填充。这是一个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变量中有我的所有数据，其中包括//我想把图片和描述附在帖子上。
以下是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>
据我所知，我需要用正确的数据/链接填充有效负载对象。根据文档中的内容，我不知道如何做到这一点。
以下是我尝试/思考过的一些事情，以及我目前的困境：
1） 从post.js中获取数据，并将其放在post.html中脚本标记之间的payload对象中。经过一些研究，这是不可能做到的。虽然如果我错了，我欢迎被纠正。
2） 将IN对象放入angular中，并在post.js中填充有效负载。这听起来很好，但LinkedIn没有提供用angular调用post.js函数的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>
这个解决方案也没有产生解决方案。从这里到哪里去，我不知道。我相信这很简单，但很特别，我需要一点帮助。
很遗憾，我没有使用过linkedin API。
以我为例，也许不是所有的事情都是对的。但我必须在angular中使用一个变量IN，并编写关于调用API包装器的内容。
插件的使用示例，请参阅LinkedIn插件页面。
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>相关文章：
- Facebook共享显示一个接一个的空白页面
- 通过javascript/html访问twitter共享iframe
- 在我的SPA应用程序中集成Facebook共享的问题
- 在索引.html和应用.js [node.js] 之间共享变量
- AngularJS:$q.dedefe(）不能由工厂方法共享
- 使用闭包共享构造函数参数
- Facebook共享动态参数链接
- Node.js上的WebSocket，并在所有连接的客户端之间共享消息
- 如何在没有插件和Wordpress的情况下创建共享社交媒体
- Phonegap:获取访问令牌时出现LinkedIn登录错误
- 在requirejs中共享实例化对象
- 在Javascript服务器/客户端中共享对象定义
- 使用服务(AngularJS）在控制器之间共享数据
- 我可以共享一个HTML播放器吗
- AngularJS中的页面之间共享数据返回空
- 如何在批准露天共享中工作流的审核步骤之前添加确认对话框
- LinkedIn共享链接图片未使用自定义url更新
- 如何将博客文章中的图片附加到LinkedIn共享
- 我们可以检测页面是否在推特上共享并LinkedIn
- 与LinkedIn共享API共享时出现Javascript错误
