Ir ao conteúdo
  • Cadastre-se
Durval Ferreira

Como fazer aparecer a foto e a notícia quando um link do jornal é compartilhado

Recommended Posts

Instalei um site de jornal porém nos compartilhamentos pelo facebook não aparece a imagem da foto e o conteúdo da notícia. Ao invés disso aparece sempre a foto facebook.png e um texto padrão (como por exemplo: Folha tal, o seu melhor jornal). Gostaria de saber como posso fazer para que nos compartilhamentos pelo facebook as pessoas veêm a foto da notícia compartilhada com sua descrição. Por exemplo: a foto de um acidente e trechos do relato que aconteceu chamam muita atenção quando um usuário vê na linha do tempo do facebook. Abaixo,deixo parte do arquivo tag (esse arquivo contém o link que leva ao arquivo faceook.png

<?
if($dados2[nome] != "") {
echo'<meta name="author" content="'.$dados2[nome].'" />';
}
else{
echo'<meta name="author" content="Lenium" />';
}
?>
<?
if($dados[titulo] != "") {
echo'<meta property="og:title" content="'.$dados[titulo].'">';
}
else{
echo'<meta property="og:title" content="'.$tsite.'">';
}
?>
<?
if($dados[foto] != "") {
echo'<meta property="og:image" content="'.$usite.'thumbs.php?w=600&h=450&imagem=images/'.$tabela1.'/'.$dados[id].'/'.$dados[foto].'"/>';
}
else{
echo'<meta property="og:image" content="'.$usite.'img/facebook.png"/>';
}
?>
<?
if($dados[tags] != "") {
echo'<meta name="keywords" content="'.$dados[tags].'" />';
}
else{
echo'<meta name="keywords" content="'.$keywords.'" />';
}
?>
<? } ?>

 

Editado por dif
Inserir o código usando o botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Durval Ferreira

Usou a api do facebook? https://developers.facebook.com/docs/plugins/share-button/#example

Veja se faltou adicionar a parte do javascript que chama o plugin de compartilhamento 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ao compartilhar a notícia aparece a imagem facebook.png que está hospedada no meu servidor. Mas isso não fica legal. Como é um site de notícias e que terá conteúdo diário e vão ser compartilhadas várias páginas todos os dias, eu gostaria que aparecesse a foto da notícia e trecho do conteúdo da mesma. tenho certeza que isso convida o internauta que está visualizando a foto para clicar e ver o conteúdo completo. E assim o site de notícias ganha leitores.

 

Obs. Eu entrei https://developers.facebook.com e não consegui encontrar a solução

Veja, abaixo (negrito e itálico meu), o conteúdo que mais me interessou e que poderia resolver meu problema, porém tem como usar porque o script de notícias do meu site não tem o arquivo functions.php

 

Como resolver Problema com Imagem de Posts Compartilhados no Facebook

Posted by: Bruno Rodrigo Souza in Redes Sociais, Tutorial para WordPress

O código abaixo funcionar perfeitamente para esta tarefa de ajustar a imagem miniatura do compartilhamento do Facebook. Vale lembrar que esse código vai adicionar a meta tag apenas em posts, não em páginas de categorias ou outras. Além disso você deverá usar a imagem destaque nos posts, pois ela que será indicada ao script do Facebook para ser usada como miniatura.

O código também vai verificar se existe ou não essa imagem destaque, caso não exista vai indicar uma imagem padrão. Por isso escolha uma e salve no seu servidor,  nós especificamos a imagem padrão “http://www.seusite.com.br/imagem-padrão.jpg”.

Você precisa abrir o arquivo functions.php do seu template e cole o seguinte código dentro das tags PHP:


 

function insert_image_src_rel_in_head() {
global $post;
if ( !is_singular()) //verificar se é um post
return;
if(!has_post_thumbnail( $post->ID )) { //verifica se existe imagem desta
$default_image="http://example.com/image.jpg"; //coloque a url da imagem padrão
echo '';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '';
}
echo "
";
}
add_action( 'wp_head', 'insert_image_src_rel_in_head', 5 );

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Durval Ferreira Sim, isso você já explicou. 

Digo, você adicionou esta parte:

 

<!-- Load Facebook SDK for JavaScript -->
	<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

	

Uma coisa que impossibilita de ajudar você é que você postou só um fragmento de uma parte que não mostra algum erro.

Se possível poste o código completo.

 

Basicamente você precisa adicionar este código javascript no seu documento..

Usar a seguinte estrutura html:

!-- Your share button code -->
	<div class="fb-share-button" 
		data-href="URL da página que você que quer compartilhar" 
		data-layout="button_count">
	</div>

Os meta-tags você poe dentro de head

<meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Your Website Title" />
<meta property="og:description"   content="Your description" />
<meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />

Dentro do content="" você adiciona o php!

A imagem do facebook aparece porque você seta no bloco do else:

echo'<meta property="og:image" content="'.$usite.'img/facebook.png"/>';

isso quer dizer que  IF NOT, mostra a imagem do facebook.

 

Melhor você ter sempre a referencia da imagem no banco de dados, resgatar estes dados como titulo do post, imagens, conteúdo, no ínicio do documento acima do <html>  porque aí depois você pode chamar os dados abaixo dele.

 

Por hora, recomendo que você poste o código completo  desde  <html> até o fim.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aqui está o arquivo tag.php completo:


 

<?
$variables=(strtolower($_SERVER['REQUEST_METHOD'])== 'GET') ? $_GET : $_POST;
foreach ($variables as $k=> $v)
$$k=$v;
$tabela1 = "noticias";
$tabela2 = "users";
$tabela3 = "cidades";
$file = "$tabela1";
if($acao == "ver"){
$busca = "SELECT * FROM $tabela1 WHERE id='$id'";
$sql = mysql_query($busca);
$dados = mysql_fetch_array($sql);
$data1 = strftime("%d/%m/%Y Ã s %Hh%Mmin", strtotime($dados[data]));
$data2 = strftime("%d/%m/%Y Ã s %Hh%Mmin", strtotime($dados[data2]));
$data = "Matéria publicada em $data1";
$sql2 = "SELECT * FROM $tabela2 WHERE id='$dados[id_user]'";
$sql2 = mysql_query($sql2);
$dados2 = mysql_fetch_array($sql2);
$sql3 = "SELECT * FROM $tabela3 WHERE id='$dados2[id_cidade]'";
$sql3 = mysql_query($sql3);
$dados4 = mysql_fetch_array($sql3);
$dadosc=mysql_fetch_array(mysql_query("SELECT * FROM noticias_cat where id='$dados[id_cat]'"));
?>
<?
if($dados2[nome] != "") {
echo'<meta name="author" content="'.$dados2[nome].'" />';
}
else{
echo'<meta name="author" content="Lenium" />';
}
?>

<?
if($dados[titulo] != "") {
echo'<meta property="og:title" content="'.$dados[titulo].'">';
}
else{
echo'<meta property="og:title" content="'.$tsite.'">';
}
?>

<?
if($dados[foto] != "") {
echo'<meta property="og:image" content="'.$usite.'thumbs.php?w=600&h=450&imagem=images/'.$tabela1.'/'.$dados[id].'/'.$dados[foto].'"/>';
}
else{
echo'<meta property="og:image" content="'.$usite.'img/facebook.png"/>';
}
?>

<?
if($dados[tags] != "") {
echo'<meta name="keywords" content="'.$dados[tags].'" />';
}
else{
echo'<meta name="keywords" content="'.$keywords.'" />';
}
?>
<? } ?>

 

E se for, esse é o site que ainda está em teste: www.folhaumuarama.tk

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Durval Ferreira Bem analisando seu código, noto que foi utilizado o wordpress. Nesse caso, é melhor você usar um plugin específico para wordpress: https://br.wordpress.org/plugins/facebook-api/

Este é um dos mais fáceis de instalar e usar! 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Baixei o arquivo do site https://br.wordpress.org/plugins/facebook-api/ . E como não tem a pasta "wp-content/plugins" no meu site, enviei a pasta "facebook-api" que continha os plugins diretamente para a pasta raiz do site. Porém por enquanto apenas duas notícia funcionaram mostrando três imagens (a primeira que mostra é a do autor do post que não quero que apareça, e usando a seta pode se ver a segunda imagem que é a da notícia que é a que eu quero que apareça e, também usando a seta, pode se ver a terceira imagem que é a propaganda e que também não pode aparecer). As outras notícias continuam mostrando a imagem inicial do site. Mas acredito que é uma questão de tempo para funcionar para todas as notícias. Em nenhuma situação mostra trecho da notícia.

Se quiser conferir apenas coloque esse link abaixo na sua linha do tempo do facebook:

http://www.folhaumuarama.tk/noticia/108/sai-nome-da-empresa-vencedora-da-licitação-que-dará-continuidade-às-obras-da-praça-arthur-thomas.html

 

Se puder me ajudar, diga o que devo fazer para que mostre somente a imagem da notícia.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×