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