0

The blog on my website is written in PHP. I get all the data from my sql database. 

foreach($db->query("SELECT * FROM news ORDER BY position") as $row){   
 echo "<h1> {$row['title']} </h1>";
 echo "<span> {$row['date']} </span>"; 
 echo "<div> {$row['text']} </div> "; 
 echo "<a href='http://www.mywebsite.ch/images/news/{$row['name']}'><img src='http://www.mywebsite.ch/images/news/{$row['name']}'/></a>"; }

I try to implement social share buttons into my website. I started with google+ and ran into several problems. I need to have for each blog entry a google+ share button so I put this code into my foreach loop.

<g:plusone size="medium" href="http://www.mywebsite.ch/images/news/<?php echo "{$row['name']}" ?>" ></g:plusone>

It worked partially. Beneath each image there was the google+ button and google+ took the correct image.

Correct image for each google+ button

But the description and title were missing. So I searched the internet for a solution and found several articles -> google has removed this snippet.

So no title and description but I found this... https://developers.google.com/+/web/snippet/ ...and tried to implement Schema.org microdata and changed my code so that google will recognize the title and description 

foreach($db->query("SELECT * FROM news ORDER BY position") as $row){   
 echo "<h1 itemprop='title'> {$row['title']} </h1>";
 echo "<span itemprop='author'> myself </span>";
 echo "<span itemprop='datePublished'> {$row['date']} </span>"; 
 echo "<div itemprop='description'> {$row['text']} </div> "; 
 echo "<a href='http://www.mywebsite.ch/images/news/{$row['name']}'><img src='http://www.mywebsite.ch/images/news/{$row['name']}' itemprop='image' /></a>"; }

So now if I click on the google+ share button, it is showing me the correct title and text, but google takes always only the last image of my page.

I kept on searching the internet for a solution and get more and more confused. On several pages it is written that it is only possible to have several google+ buttons on one page with the method I used before ->

<g:plusone size="medium" href="http://www.mywebsite.ch/images/news/<?php echo "{$row['name']}" ?>" ></g:plusone>

I don't believe that, because there are several websites (maybe not written in php?) where this is working.

Anybody have an idea what I am doing wrong?

abraham
  • 46,583
  • 10
  • 100
  • 152
Mischu
  • 95
  • 1
  • 7

1 Answers1

0

Google+ displays data parsed from the response of the URL being shared.

In the first instance where the images work but there is no title. This is happening because you are sharing the direct URL of an image. Google fetches the URL, finds that it is an image and shows a thumbnail because there is no HTML to parse a title from.

In the second instance where it is correctly parsing the title but taking the last image. It is a single URL so there is no way for Google to know what image to display other than the last one.

The solution is that every image needs it's own HTML page with Schema.org tags and then the index page with all the Google+ buttons needs to share the URL to the HTML page with the image and not directly to the image itself.

abraham
  • 46,583
  • 10
  • 100
  • 152
  • Thank you for your answer. So for every single image i would have to set up it own page and fetch the images together on one page? Can you give me a hint how this would work or where i can get a example of something similar? – Mischu Oct 12 '15 at 13:19
  • Ok, i did it like you said and it works. So i have for each blog entry it's own html page. Thank you :) – Mischu Oct 31 '15 at 10:33
  • If the solution worked please don't forget to mark the question as answered. – abraham Nov 01 '15 at 18:00