I have the following code,
<a href="https://plus.google.com/share?" onclick="javascript:window.open(this.href+'url={'+window.location.href+'}',
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img src="google.png" alt="Share on Google Plus"></a>
Which works perfectly. I'm developing a simple game in jquery and html and what I want to do is, once the game is over, allow the player to share their score on google plus. The above will share the page only. How would I go about doing this?
The content shared to Google+ is controlled by the markup of the page being shared.
<body itemscope itemtype="http://schema.org/Thing">
<h1 itemprop="name">Awesome Game 5000</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Super good score of {score}.</p>
</body>
In order to dynamically change the score people share you would have to dynamically change the score based on the url. E.g. https://example.com/shared/5343 would replace the score on the page with 5343.
Related
I have a page for Mobile application details and features, but the app itself is not implemented yet and not available on any store, so I don't know the size,version,rating etc..
The question is can I render the page with dynamic Schema.org markup, which means to build now for example as an Article markup, and once the app is live the page will be built with MobileApplication ? Can I do this and Google will like it and understand it? if not, what can I do for my case?
#if(IsAppLive){
<div itemscope itemtype="http://schema.org/MobileApplication">
}
else{
<div itemscope itemtype="http://schema.org/Article">
}
Yes, but Google will only scrape and index one version. It won't register a second version until it re-scrapes, which can take up to two weeks.
Google displays links to pages in its search results by taking all the text inside an tag as the link. So this:
<a href="#">
<span>1</span> This is a great story
</a>
displays in Google search results as:
1 This is a great story
Is there any way to tell Google to index a specific part of the link text, e.g.
<a href="#">
<span class="dont-index-me">1</span>
<span class="index-me">This is a great story</span>
</a>
So I can have just: 'This is a great story'.
Or is the only option to change the markup:
<span>1</span> This is a great story
No. Google will index an entire page's contents. there is no way to tell Google to ignore part of a page. There are black hat techniques, of course, but those just get you banned if you get caught and aren't worth the risk.
just change the markup (2nd solution) ie. move it out of <a> tag
I'm making a one-page website for a friend of mine. She's a fashion designer, and she would love to have a one-page website based on the "Stylish Portfolio" Bootstrap template --> http://startbootstrap.com/stylish-portfolio
However, I want to put in a lightbox gallery in the section below where it says "Some of our work".
I was thinking of getting the BlueImp Lightbox gallery or the Bootstrap Lightbox: http://www.jasonbutz.info/bootstrap-lightbox/#usage
Both match what I was looking for.
However, I have tried to insert it into the HTML-code, but without any luck!
Does anybody have any experience in inserting/adding lightbox galleries to a Bootstrap template? And if so, how should I approach this task?
Like the comments from your question, they wanted to see your code so they know where and how they can help you. It would also let us know how much code we would need to supply without actually spoon-feeding you the answers so that you can get your answers as well as still learn :)
With that, I'm gonna assume that you're a beginner and thus supply most of the codes that you need as well as explanations on what I'm doing. I'm gonna take bootstrap-lightbox as an example.
First off, you need to download the files from the site. After downloading the files, you would be able to see that this contains 4 files, namely bootstrap-lightbox.css, bootstrap-lightbox.js and their min files. (min files are just compressed versions of the files in order to lessen its size)
Now, it's basically just needing to plug-in those files into your project.
Assuming that you put the files into their respective js and css folders in your project, this is how they would look like:
<link href="css/bootstrap-lightbox.css" rel="stylesheet"> //plug this inside your <head> tags
<script src="js/bootstrap-lightbox.js"></script>
After plugging those in your files, then its a matter of just using the html code that you found in the site :)
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="image.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
Solved.
I used BlueImp instead to insert a lightbox gallery :-)
So i am using the open graph method to pull in content from a Wordpress site that can then be posted on facebook. However with google plus the content that is pulled in is distorted. It is pulling in the title twice and the content twice. So i opted to use Schema.org. Open graph has meta tags which are invisible on the site while Schema uses regular html tags as follows:
<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
Trailer
</div>
This displays on my site so i added an inline style of "display: hidden;" to the div. However this doesn't work. Has anyone gotten schema to work with Wordpress? Or a better question might be, has anyone gotten open graph/schema to work with google plus?
Thanks
display: hidden; does not exist. You're looking for display: none;
http://jsfiddle.net/wgLZL/
A rich snippet example from Schema.org http://schema.org/AggregateRating:
<html>
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" />
<span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">87</span>
out of <span itemprop="bestRating">100</span>
based on <span itemprop="ratingCount">24</span> user ratings
</div>
</div>
</html>
But http://www.google.com/webmasters/tools/richsnippets won't show a preview.
So, the following words from http://support.google.com/webmasters/bin/answer.py?hl=en&answer=146645 are just lies?
New! schema.org lets you mark up a much wider range of item types on
your pages, using a vocabulary that Google, Microsoft, and Yahoo! can
all understand. Find out more. (Google still supports your existing
rich snippets markup, though.)
It is working absolutely fine.
Google is not obliged to show you preview every time, and here it shows an error when I inserted your give example from schema.org:
The following errors were found during preview generation:
This page does not contain authorship or rich snippet markup.
I have done it in my website's news pieces and it shows fine.