Поделиться URL на Facebook, Twitter и Pinterest - PullRequest
Новая
       40

Поделиться URL на Facebook, Twitter и Pinterest

0 голосов
/ 20 февраля 2019

Я начал разработку, чтобы поделиться отредактированным изображением в Facebook, Twitter и Pinterest.

У нас есть система управления обучением (LMS), которая разработана с использованием Angularjs, фронтального веб-сайта, разработанного с использованием 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'
    };
});

директивы / 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}}&amp;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.Но Facebook добавляет конец URL-адреса.Но другие (твиттер и Pinterest) не устанавливают параметр для его идентификации.Есть парам или в любом случае, чтобы идентифицировать его?

1 Ответ

0 голосов
/ 21 февраля 2019

Как сказал @ 04FS, я проверил серверную переменную HTTP_REFERER объекта запроса в контроллере laravel, чтобы идентифицировать реферера следующим образом 

    $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']);
    }
...