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}
Related
I am trying to add a logo to my webpage. I am using CSS and eclipse. The image shows as a broken image and I am not sure why. The image I am trying to use is in the folder specified :
Does it need to be added in CSS or can someone please help me to know where I am wrong. Thank you.
<body>
<div class="jumbotron">
<h2 style="text-align: center; color: white;"> New Plan </h2>
<a href="#">
<img src="resources/img/logo.png">
</a>
</div>
</body>
This wouldn't be a css issue if the browser is showing the broken link icon. That icon means the path to the file is incorrect or it can't retrieve it.
To confirm this, take resources/img/logo.png and add it to the end of the URL where your HTML is, excluding any files. For instance, if your URL is http://example.com/index.php, you want to make the URL read as http://example.com/resources/img/logo.png, without the index.php.
You will need to tweak this URL until the image shows up in the browser, since you didn't provide a URL where the HTML is running. When that happens, the URL in the address bar is the one you can use for the image URL.
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" />
I found a photo in www.w3schools.com. In that server i can access it by using simple html tag. It's src = "smiley.gif". I want to access the photo in www.practiseboard.com. I have no clue how to do that. Please help.
Right click on the image and copy it URL:
Chrome: Copy image URL
Safari: Copy image address
Firefox: Copy image location
Then use that URL in your img tag.
<img src="http://www.w3schools.com/tags/smiley.gif" alt="Smile">
Demo: https://jsfiddle.net/4v1az6rx/
Use full URL and dont forget http://
if the target site prevents hotlink, you can not display it inside your website.
<img src="http://www.practiseboard.com/smiley.gif">
May be this is what you are looking for!
<img src="http://www.w3schools.com/html/pic_mountain.jpg"; alt="W3Schools.com" />
demo : http://www.practiceboard.com/4fbfc9fc
replace src with full url of the image as Ali said!
I have a link on one page that needs to go to a different page, but load to a specific section on that other page.
I have done this before with bootstrap but they take all the 'coding' out of it, so I need to know how to do from scratch. Here is the markup I have based on this link (not the best resource, I know): http://www.w3schools.com/html/html_links.asp
**Page One**
<a href="/academics/page.html#timeline> Click here </a>
**Page I am linking to**
<div id="timeline" name="timeline"> ... </div>
Can I do this with just HTML, or do I need some JavaScript? If I need to do it via JS, it needs to be on the target page, right?
I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:
<div id="timeline" name="timeline" ...>
To the old format:
<a name="timeline" />
You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.
Also, check out this similar question.
You can simply use
<a href="directry/filename.html#section5" >click me</a>
to link to a section/id of another page by
To navigate to a section of another page use:
<a href="example.html#example-section>name-of-link</a>
The example.html would be the page you want to go to, and the #example-section would be the name of the id on that page that you want to navigate to.
To link from a page to another section of the page, I navigate through the page depending on the page's location to the other, at the URL bar, and add the #id. So what I mean;
This takes you #the_part_that_you_want at the page before
I tried the above answer - using page.html#ID_name it gave me a 404 page doesn't exist error.
Then instead of using .html, I simply put a slash / before the # and that worked fine. So my example on the sending page between the link tags looks like:
El Chorro
Just use / instead of .html.
To link from a page to another section just use
my first div
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>