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

Navigation
1

I'm trying to make my site interact with facebook. I'm interested more than anything, the issue of sharing, but this problem itself escapes the plugin that provides facebook I think.

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

Is this random? or there is some way that I can detect the image. I've seen that in wordpress they have something called a prominent image, and they solve it like that 

<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>
    
asked by Cidius 27.10.2016 в 18:42
source

2 answers

0

As a complement to Muriano's answer and putting it in a context of Laravel views, you can simply add the tag to your main layout with a default image and modify it in 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, modify it to your liking: 

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

You should bear in mind that the Facebook cache is a bit "aggressive" and as soon as you crawl a page, you should usually tell it to flush it, otherwise it will show you the same information when sharing. for a while.

More information here: link

    
answered by 27.10.2016 / 19:01
source
0

Try to generate a series of "metatags" tags on your site to tell 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: link

And in this one, the official documentation: link

    
answered by 27.10.2016 в 18:46
How to decompile a .exe file [closed] Error in the database query to avoid an injection sql php