Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

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

Durval Ferreira

Por Durval Ferreira
em Web e banco de dados

 Compartilhar

Posts recomendados

Durval Ferreira
 

Durval Ferreira

Postado
Postado

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.'" />';
}
?>
<? } ?>

 

Link para o comentário
Compartilhar em outros sites
Durval Ferreira
 

Durval Ferreira

Postado
  • Autor
Postado

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 );

 

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@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.

Link para o comentário
Compartilhar em outros sites
Durval Ferreira
 

Durval Ferreira

Postado
  • Autor
Postado

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

Link para o comentário
Compartilhar em outros sites
Durval Ferreira
 

Durval Ferreira

Postado
  • Autor
Postado

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.

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novas respostas.
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades 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

Mais

×
×
  • Criar novo...