在Facebook,Twitter和Pinterest上共享URL

时间:2019-02-20 05:34:58

标签: angularjs laravel facebook twitter pinterest

我开始进行开发,以便在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}}&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共享的URL。但是Facebook在URL的末尾添加了fbid。但是其他人(twitter和Pinterest)没有设置参数来识别它。是否有参数或可以识别它?

1 个答案:

答案 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']);
    }