Home / Questions / 30207
Accepted
Cidius
Asked: 2020-10-28 08:42:16 +0800 CST 2020-10-28 08:42:16 +0800 CST

How to show the main image when sharing on Facebook with Laravel

  • 772

I am trying to get my site to interact with facebook. I am interested more than anything, the issue of sharing, but this problem itself escapes the plugin provided by facebook it seems to me.

In itself, both with the share button or manually paste the link, sometimes facebook does not show me the main image of the article that I want to share. I say well, sometimes, because for certain articles it does it correctly, and in many others it shows me other images of my site that have nothing to do with the article

This is random? or is there any way that I detect the image. I have seen that in wordpress they have something called featured image, and they solve it like this

<article class="col-xs-12 col-sm-12 col-md-8">

            <ol class="breadcrumb breadcrum">
                <li><a href="{{ route('front.index') }}">Home</a></li>
                <li><a href="{{route('front.search.categoria',$articulo->categoria->nombre)}}">
                    {{$articulo->categoria->nombre}}
                </a></li>
            </ol>   

            <div class="panel panel-default">
              <div class="panel-body">

                <span aria-hidden="true" class="glyphicon glyphicon-time">
                </span>
                {{$articulo->created_at->diffForHumans()}} |
                <span aria-hidden="true" class="glyphicon glyphicon-pencil">
                </span>
                {{$articulo->autor->nombre}}
                <br><br>

                @include('front.template.partials.social.face-me-gusta')
                @include('front.template.partials.social.compartir-wapp')
                <br>
                <span class="titulo"><b>{{$articulo->titulo}}</b></span>
                <br>
                <h5>{{$articulo->copete}}</h5>
                <hr>
                    <img src="{{ asset('img/articulos/'.$articulo->imagen->nombre) }}" alt="" class="img-responsive">
                <br>
                {!!$articulo->contenido!!}
                <hr>
                @include('front.template.partials.perfil-autor')
                <hr>
                <h4>
                    Si te gusto, Compartilo:
                    @include('front.template.partials.social.face-compartir')
                    @include('front.template.partials.social.compartir-wapp')
                </h4>       
                <hr>

                @include('front.template.partials.social.face-comments')    



            </div>             

            </div>      
        </article>
laravel-5

2 Answers

  1. Best Answer

    As a complement to Muriano's answer and putting it in a Laravel views context, you can simply add the tag to your main layout with a default image and modify it on each article or page, depending on what you need:

    <meta property="og:title" content="@yield('ogTitle', 'Título general de mi sitio.')"/>
<meta property="og:site_name" content="Mi sitio web"/>
<meta property="og:url" content="@yield('ogUrl', 'https://misitioweb.com')"/>
<meta property="og:description" content="@yield('ogDesc', 'La descripción de mi sitio web.')"/>
<meta property="og:type" content="@yield('ogType', 'website')"/>
<meta property="og:locale" content="es"/>
<meta property="og:image" content="@yield('ogImage', 'https://misitioweb.com/img/logo.png')"/>
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<meta property="fb:app_id" content="xxxxxxxxx"/>

    In your specific views you modify it to your liking:

    @section('ogImage')
    https://misitio.com/img/imagen-de-pagina.png
@stop

    You should keep in mind that Facebook's cache is a bit "aggressive" and as soon as it crawls a page, you generally have to tell it to flush it, otherwise it will show you the same information when sharing for a long time. little while.

    More information about it here: https://developers.facebook.com/tools/debug/

    • 2

  2. Try to generate a series of "metatags" on your site to indicate to facebook what elements you want to show, in the case of the image, you can use:

    <meta property="og:image" content="https://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png"/>

    You can see some of the "OpenGraph" tags available here: https://davidwalsh.name/facebook-meta-tags

    And in this other one, the official documentation: https://developers.facebook.com/docs/sharing/opengraph/object-properties

    • 0