I started development to share an edited image on Facebook, Twitter, and Pinterest.
We have a learning management system(LMS) which is developed using Angularjs, a front website developed using Laravel and set of APIs.
After the user logs into the LMS user can share referral code on Facebook, Twitter, and Pinterest. To share a referral code, we use an image. Every time we add users' referral code to image and share it. Image processing is done by the front site. Therefore I'm setting URL of front site view which creates an image with a referral code and use it to share on social media.
Sharing code as follows (LMS)
Directive
<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>
According to type GET variable we identify a type of social media in front laravel site and add text to an image. We set that image in the relevant view file. There are three view files.
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;"/>
These sharing functionality is working fine. In every shared post these social media set URL what I shared from LMS. But Facebook add fbid end of the URL. But others(twitter and Pinterest) don't set a parameter to identify it. Is there param or anyway to identify it?
As @04FS said I checked 'HTTP_REFERER' server variable of request object in laravel controller to identify referer as follows
$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']);
}