我开始进行开发,以便在Facebook,Twitter和Pinterest上共享编辑后的图像。
我们有一个使用Angularjs开发的学习管理系统(LMS),使用Laravel和一组API开发的前端网站。
用户登录LMS后,用户可以在Facebook,Twitter和Pinterest上共享推荐代码。要共享推荐代码,我们使用一张图片。每次我们将用户的推荐代码添加到图像并共享时。图像处理由前端站点完成。因此,我要设置前站点视图的URL,该站点将创建带有引荐代码的图像并将其用于在社交媒体上共享。
共享如下代码(LMS)
指令
<share-referrer></share-referrer>
skApi.directive('shareReferrer', function ($window, $cookies, skApiService, $location, $http) {
return {
restrict: 'E',
link: function (scope, element, attrs) {
scope.share_referral_url = "";
scope.share_pinterest_referral_url = "";
scope.share_referral_pinterest_image_url = "";
$http({
method: 'POST',
url: skApiService.getApiUrl('lms')+'/referrals/get-user-referral-details',
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
}).then(function successCallback(respond) {
// this callback will be called asynchronously
// when the response is available
if (respond.data.success == true){
scope.refer_first_name = [];
scope.refer_first_name_email = [];
scope.share_referral_url = respond.data.share_referral_url;
scope.share_pinterest_referral_url = respond.data.share_pinterest_referral_url;
scope.referral_code = respond.data.data.code;
scope.share_referral_pinterest_image_url = respond.data.share_referral_pinterest_image_url;
console.log(scope.share_referral_url);
}else if (respond.data.success == false){
scope.hide_message = false;
scope.message_section_class = "alert alert-danger";
scope.error_message = respond.data.message;
}
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
scope.$watch(scope.share_referral_url ,function(newValue, oldValue){
console.log("share referral url ", newValue, oldValue);
});
/*Share on pinterest*/
scope.pinIt = function(){
var pinterest_url = scope.share_pinterest_referral_url+"&type=pinterest";
$http({
method: 'GET',
url: pinterest_url,
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
});
//This code from pinterest
PinUtils.pinOne({
'url': pinterest_url,
'media': scope.share_referral_pinterest_image_url,
'description': 'Next stop: Pinterest!'
});
//End pinterest
};
},
scope: {
share_referral_url: '@',
share_referral_pinterest_image_url: '@',
referral_code: '@',
},
templateUrl: 'directives/social-media-share.html'
};
});
directives / social-media-share.html
<div class="share_on_section">
<div>
<span>Share on:</span>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2&appId=699323760416619&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</script>
<div class="fb-share-button"
data-href="{{share_referral_url}}&type=facebook"
data-layout="button_count">
</div>
<div class="pinterest_share_block">
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
<a ng-click="pinIt()"><img src="images/icon_64x64.png" width="20" height="20"></a>
</div>
<div class="twitter_share_block">
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet"
data-text="Refer a friend"
data-url="{{share_referral_url}}&type=twitter"
data-hashtags="ssss">Tweet</a>
</div>
根据GET变量类型,我们在前laravel网站中标识一种社交媒体,然后在图像中添加文字。我们将该图像设置在相关的视图文件中。有三个查看文件。
share_code_facebook.blade.php
<head>
<meta charset="utf-8">
<title>sssss</title>
<meta property="og:type" content="website" />
<meta property="og:title" content="Refer a friend" />
<meta property="og:description"
content="I'm loving ddd and you'll love it too! Subscribe now to it to get access to over 18,000 resources aligned to the sss sss. Use the referral code {{$social_media->getReferralCode()}} to let them know that I sent you. Happy ssss!" />
<!-- <meta property="og:image:url" content="{{env('APP_URL')}}{{$social_media->getImageShared()}}" />-->
<meta property="og:image:url"
content="{{env('APP_URL')}}{{$social_media->getImageShared()}}" />
<meta property="og:image:alt" content="Refer a friend" />
<!-- <meta property="og:image:height" content="750" />
<meta property="og:image:width" content="500" /> -->
<meta property="og:image:type" content="image/png" />
<meta property="fb:app_id" content="222222" />
<meta property="og:url"
content="{{env('APP_URL')}}{{$social_media->getImageShared()}}" />
share_code_twitter.blade.php
<head>
<meta charset="utf-8">
<title>sssss</title>
<link rel="me" href="https://twitter.com/22222">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@dddd" />
<meta name="twitter:creator" content="@ddddd" />
<meta name="twitter:title" content="Refer a friend from Twitter" />
<meta name="twitter:description" content="I'm loving dddd and you'll love it too! Subscribe now to it to get access to over 18,000 resources aligned to the sss dddd. Use the referral code {{$social_media->getReferralCode()}} to let them know that I sent you. Happy sssss!" />
<meta name="twitter:image:src" content="{{env('APP_URL')}}{{$social_media->getImageShared()}}" />
<!-- <meta name="twitter:player" content="{{env('APP_URL')}}" />-->
<!-- <meta name="twitter:player:width" content="720" />
<meta name="twitter:player:height" content="480" />-->
<meta property="og:url" content="{{env('APP_URL')}}share-referral-code?referral_code={{$social_media->getReferralCode()}}&type=twitter&return=twitter" />
</head>
<div>
<img alt="Refer a friend on pinterest" src="{{env('APP_URL')}}{{$social_media->getImageShared()}}"
class="img-fluid" style="max-width: 100%;height: auto;"/>
</div>
share_code_pinterest.blade.php
<div>
<img alt="Refer a friend on pinterest" src="{{env('APP_URL')}}{{$social_media->getImageShared()}}"
class="img-fluid" style="max-width: 100%;height: auto;"/>
这些共享功能运行良好。在每个共享的帖子中,这些社交媒体设置URL是我从LMS共享的URL。但是Facebook在URL的末尾添加了fbid。但是其他人(twitter和Pinterest)没有设置参数来识别它。是否有参数或可以识别它?
答案 0 :(得分:0)
正如@ 04FS所说,我在laravel控制器中检查了请求对象的'HTTP_REFERER'服务器变量以标识引用者,如下所示
$data = $request->all();
$http_referrer = parse_url($request->server('HTTP_REFERER'));
//For facebook
if( isset($data['fbclid'])){
return redirect('/?return='.$data['fbclid']."&type=".$data['type']."&referral_code=".$data['referral_code']);
}
//For Twitter
if(isset($http_referrer['host']) && $http_referrer['host'] != NUll && $http_referrer['host'] == 't.co'){
return redirect('/?return=twitter&type='.$data['type']."&referral_code=".$data['referral_code']);
}
//For Pinterest
if( isset($http_referrer['host']) && $http_referrer['host'] != NUll && $http_referrer['host'] == 'www.pinterest.com'){
return redirect('/?return=pinterest&type='.$data['type']."&referral_code=".$data['referral_code']);
}