When I want to share a site on facebook and want to add a custom image it doesn't work. It always gives the same image (one that is somewhere on the web page).
This is the code I've used:
<html>
<head>
<meta property="og:title" content="Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.the-website.com" />
<meta property="og:image" content="http://url-to-image.com" />
<meta property="og:site_name" content="The content" />
</head>
<body>
<h1> Facebook Like </h1>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.the-website.com%2F&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
</body>
</html>
If you try running the page through Facebook linter - http://developers.facebook.com/tools/lint/ - it may show up some issue.
Did you read it ? http://developers.facebook.com/docs/reference/plugins/like/
There is a "code generator" which would do all coding for you. Try it, then copy&paste the code...
As for your code:
- in this case - to have a like on a page - there is no meta needed (your example's meta are not needed).
- you have probably something wrong inside src tag: my guess is to REMOVE the "font&" part, but this might be wrong...
In any case... just use the link I provided...
I had the same problem. What I did was, I just removed the entire line " <meta property="og:image" content="xxxxxxx" /> " . This will push the facebook crawler to scan for every images in the page. Now place the image you want to add somewhere in the page with width=1 and height=1. Users won't recognise this in your page. But this image will be scanned by the crawler and you can select it to show it on our page. This worked for me. I don't know whether it will work for you or not.
NB: This is just a workaround, not a good solution
Related
I am getting a lot of pain with a small issue. My application https://mokapen.com is SSL certified and I added all open graph code:
<meta property="og:title" content="this is my title" />
<meta property="og:description" content="this is my description" />
<meta property="og:url" content="https://mokapen.com/" />
<meta property="og:image" content="https://mokapen.com/image/cover-open-graph.jpg" />
But the strange behavior is that in Facebook the https://mokapen.com/it is showing error title "Redirecting to https://mokapen.com" and no image.
Do you think is an issue of Laravel Localization or htaccess?
Many thanks of any help!!
Your url has static value. Change url value with current url value
<meta property="og:url" content="{{ url()->full() }}" />
Ps: different laravel version has different url helpers
I've been looking around for a solution to the problem I'm having, but it seems that none of the solutions on SO address my issue.
I was having the dreaded issue where the a href tag in my HTML does not actually take me to the link. At first, I tried removing the JavaScript includes, wondering if something in the JavaScript portion was messing up the page.
Then I removed the CSS portion as well, and ultimately removed everything until the page consisted of simply the header information for the HTML page and only the a href tag. I also changed the link to a non-existent page (to force a 404 error).
When clicking on the link, it keeps me on the current page and doesn't take me to the referenced page (or even give me a 404 error). Following is the stripped out code (everything but the commented out portion):
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<a href="test.html">Support</a/>
</html>
Thanks for the help.
I made the changes based on the answers given but still see the same behavior. As seen in the screenshot (sorry SO doesn't let me insert images), the URL shows /test.html but the page is still the main page. I changed the text of the link to ensure that the changes were applied.
I'm using rackup to quickly view the changes locally.
Screenshot
Updated code:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<body>
Support2
</body>
</html>
Working and tested:
NOTE: Both files [ current one and test.html ] are in same directory.
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<body>
Support
</body>
</html>
Also test code is working fine using target="_blank" in anchor tag , which open link in new page if working fine, like below:
<a href="test.html" target="_blank" > support </a>
You have an extra slash in your closing a tag.
Should be
</a>.
I would also make sure they are in the same directory.
Apparently the answer was here:
How to setup URLs for static site with Ruby Rack on Heroku
Individual pages were being routed to "/" all the time. Needed to modify "config.ru" to get routing to work properly.
Next step is to look into "sinatra".
It is possible to change the thumbnail image that users see after hitting a "Like" button on my website without using the Javascript SDK?
I'm currently using this iframe:
<iframe src="http://www.facebook.com/plugins/like.php?href=www.itsmorethanatextbook.com?show_faces=false"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
Hopefully this is a simple question. :)
-Eric
Try to set
<meta property="og:image" content="http://YOURWESITE.COM/IMAGE.JPG"/>
<meta property="og:title" content="YOUR WEBSITE TITLE"/>
<meta property="og:url" content="http://YOURWESITE.COM/"/>
<meta property="og:type" content="website" />
in your HEADER, after test your web site with https://developers.facebook.com/tools/debug the url linter :)
When I share an article on my site (www.spoilertv.com), it picks up images such as my sites logo and favicon to use in the Google Plus share box
Screenshot
http://i47.tinypic.com/2zf5ymg.png
Is there a way I can exclude an image from being "picked up" by Google+ eg somehow using the itemprop="image" snippet item?
The Google+ snippet fetcher makes a best guess when you do not specify an image using schema.org markup or Open Graph markup. You cannot explicitly exclude an image, but you can achieve the same effect by explicitly specifying a different image for your snippet :)
To specify a specific image you can add schema.org markup:
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="http://example.com/trinket.jpg" />
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
or OpenGraph markup:
<meta property="og:title" content="Example Title" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Example Description" />
You can learn more about how Google looks for images on your page on the snippet documentation.
I have an Umbraco 5 MVC3 project where i discovered that there where white spaces here and there. When investigating i discovered that my HTML looked really bad when "viewing generated source" in firefox web developer tool. For example it removes my doctype declaration and moves my meta-tags and stuff out of the head. Simplified code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>#ViewBag.Title</title>
<link rel="stylesheet" href="#Url.Content("~/Content/Styles/style.css")"/>
</head>
<body id="" class="default">
<div id="wrapper">
<header id="banner" class="body">
<a class="ir logo" href="/"><h1>Christian </h1></a>
<ul class="share">
<li id="facebook"><a class="ir" href="http://www.facebook.com/sharer.php?u=#Request.Url.AbsoluteUri">Facebook</a></li>
<li id="twitter"><a class="ir" href="http://twitter.com/share?text=Christian">Twitter</a></li>
</ul>
#Html.Partial("nav")
</header>
<section id="content" class="body">
#RenderBody()
</section>
</div>
<script src="#Url.Content("~/Scripts/plugins.js")"></script>
<script src="#Url.Content("~/Scripts/script.js")"></script>
</body>
</html>
And the output begins like this
<html class="no-js" lang="en"><head></head><body id="" class="default">
If you want to check on the HTML generated by your server, you should use View source (CTRL + U).
Generated source is more like a reconstruction of the HTML based on the DOM and includes for example nodes created on the client side with javascript, once the page is loaded.
Alright, i solved it. Took me a while. After Marapet suggested not to use "generated source" i tried normal "view source" in a bunch of browsers and got different results in all of them. When i tried to validate my source i got some weird complaints:
Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
Element head is missing a required instance of child element title.
And my personal favourite
Cannot recover after last error. Any further errors will be ignored.
Looked like there was something up with the doctype. Opened up notepad and pasted in there to "wash" the code from metadata, the way i do sometimes when pasting stuff in to tinyMCE. The text got formatted weird even in notepad. The doctype declaration had a smaller font size then the rest of the html.
So i opened it in notepad++ too and there i got a bunch of questionmarks in front of the declaration. I removed them and copied it back in to Visual Studio, saved and now everything works.
I think the reason i got this problem was that i copied snippets directly from the HTML5 Boilerplate on github.
// Sherlock