even though i use this meta <link rel="image_src" href="myimage"/> in my page, facebook sharer selects an image that i am using for ajax loading (load.gif)
how can i exclude that image ?
Instead of including it in the HTML, try adding that load.gif to the page dynamically using Javascript when you need to display it. This way Facebook will not see this image in the HTML.
Using Leventix suggestion, only on the home page I had to use javascipt to load images to prevent facebook from loading other images for "sharing" images found on the home page. Here's what I did.
In the head, I explicitately stated the image that is to be used when Facebook share link images apear using:
<link rel="image_src" href="/images/site.gif" />
And then all references to images on the home page I loaded like this:
<img alt="" onLoad="imgSrc(this, '<?php print base_path().path_to_theme() ?>/images/gall1.jpg');" src="/images/spacer.png" />
<script>function imgSrc(img, src) {if (img.src.search("spacer.png") > 0){img.src = src;}};</script>
Related
I was doing a page with a list of sites I need to visit daily, such as exercise to learn Html, CSS. I would like to know if it is possible to create a link with a page icon that is in the upper tab of the browser (chrome).
Ex: I want to list StackOverflow on my site. So I create a link and for the icon, I want to use the image that is on the tab of the page itself, as in this:
You can use:
https://plus.google.com/_/favicon?domain=www.yourlink.com
example
<a href="">
<img src="https://plus.google.com/_/favicon?domain=www.stackoverflow.com"> Stackoverflow
</a>
If I'm correctly getting what you want, you'd need to either have a local copy or link to the sites' favicon, like so:
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" />
Im building a webpage and have the following code in the page:
<img alt="chat" href="images/chat.jpg">Chat now
The image "chat.jpg" is in the images folder, which is in the same folder as index.html, and if i browse to "localhost/site/images/chat.jpg" it displays but it doesnt show up in the index page at "localhost/site/index.html".
I have tried changing the href to "/site/images/chat.jpg" and the same thing happens.
There is no href attribute for img elements. You are looking for the src attribute.
Validators are useful tools.
This will work for your problem.
<img alt="chat" src="images/chat.jpg">Chat now
I have a product page that uses Microdata. At the moment the itemprop="image" attribute is specified on the first thumbnail from my thumbnail gallery. What I'd like to do is specify it for the high-res image I have.
The trouble is, that's not actually displayed on the page, it's loaded via JavaScript using a lighbox. I know I can do something like:
<img itemprop="image" src="/img/high-res.jp" style="display:none" />
and the image won't show and it's tagged as the product image. But, of course the image is still download.
Any way I can specify itemprop="image" on an image but not actually download the image?
I tried changing <img> to <span> but the testing tool didn't recognise it.
Perhaps the link element would be useful here - it's not displayed in the rendered HTML, but it is available in the HTML source and therefore available to JavaScript:
<link itemprop="image" href="/img/high-res.jpg">
I am trying to add a Pin it button on a blog page. AddThis widgets are being used for this.
But when I try to use the PIN functionality then it is not choosing all the images on my page.
The image tags are as below
-- Getting Pinned
<img src="images/blog/123_3710961211.jpg" class="blog-main-img">
-- not Getting Pinned
<img src="data:image/png;base64,v2nv1jcqS/VEhanlIJN8hnyDHoT4Z8FfAhX/g8EI9yHfLfPFQAAAA
BJRU5ErkJggg==" data-filename="Victor Vasarely positive negative space pic.png"
style="width: 521px;">
Let me know what is the error? Is it that Pin does not include Data images?
I have tried using another widget also but same result there.
I read somewhere that img size should be at least 100×200 but all my pics are greater than that.
pinterest does not support pinning from base64 images, you should be able to set a meta tag to an actual image not displayed on the page however
<meta property="og:image" content="http://example.com/pic.jpg" />
I am trying to use Addthis widget for my website.Right now I am using the following code to share image to different website.
<script>var addthis_config = {
services_overlay:'facebook,twitter,email,more'
}</script>
<div class='giveTopMargin'>
<a href='link' class='lightbox' title='title'>
<img class='addthis_shareable' src='img_url' addthis:url='img_url' addthis:title='message' />
</a>
</div>
What I want is that when the user clicks the share button for facebook.I need the image preview of the img_url I've mentioned and when this link is successfully shared on facebook I need whoever clicks on this post on facebook, he should be redirected to the main page of my website instead redirecting him to the img_url.
Right now the problem with this code is that it shows me the following share box.
As you can see it is showing me the img_url in the title and description instead of the things I've mentioned above that is the title message.If I change the img_url to the main page of my site then this will not show me the preview of the image I've shared.
I hope I am clear enough. Please let me know for any clearification.
Code Source : http://www.addthis.com/labs/photo-sharing#.USyj-jAyZjY
I was not able to solve the problem so I sent an email to the Addthis support and they said that facebook tries to catch the image preview from the url we mention.So I was not able to accomplish this using the Addthis Plugin.
So I end Up doing it myself by using the facebook.ui dialog to share with the settings I wanted.
I think all you need to do is change the value for addthis:url, so for example, if the site you want them to go to is http://www.supportmyidea.com, then your img tag should look like:
<div class='giveTopMargin'>
<a href='link' class='lightbox' title='title'>
<img class='addthis_shareable'
src='[your_image_url]'
addthis:url='http://www.supportmyidea.com'
addthis:title='Support My Idea' />
</a>
</div>
The image preview that Facebook shows is actually based on the URL you specify. Facebook scrapes that page and will show an image from the page - if you specify an og:image tag, Facebook will use that image. I hope this makes sense.
You don't have to use their format. Make your own image and url using an img tag and an a tag. All the URL has to be is this :
http://www.addthis.com/bookmark.php?url={url}