Why linked in share button is not working - javascript

I am using a LinkedIn share button, but it is not getting content/image from my web page, it is just getting website url and that's all. I am using the following code, please see and let me know what is problem with it.
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share"
data-url="http://www.websiteurl/blog/2014/03/obamacare-health-plans-may-prove-costly-cancer-patients/"
data-counter="right">
</script>

As far as the image goes, it might not be the right minimum size (80 x 150 px, according to the link below). You might also want to try explicitly setting which image to use using metadata tags described in the link below, for example:
<meta property="og:image" content="http://www.websiteurl/images/blah.png" />
More:
https://developer.linkedin.com/documents/setting-display-tags-shares

For LinkedIn share button, content/image.
Try the link u will get some idea.
https://developer.linkedin.com/documents/share-api

Related

How to navigate to a web page via <a href> link with 150% zoom in?

I wonder if it's possible to navigate to a web page via link and zoom in to be 150%?
The only thing I could think about is to rewrite the '.click()' function and change the css there such as '-moz-transform', maybe something like this:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a href="https://www.google.com/search?q=kobe&igu=1" id="myLink" ></a>
</body>
<script>
$('#myLink').click(function() { zoom_page() });
function zoom_page()
{
// DO SOMETHING HERE!!
}
function autoClick() {
document.getElementById('myLink').click()
}
window.addEventListener("load", autoClick);
</script>
</html>
but not sure how exactly to do it.
Anyone can help? Thanks!
Andy
Given your example uses the URL of a well-known public site which you, almost certainly. have no control over: You can't do that.
Any JavaScript you run will apply to the current page and not the next one you navigate to.
If you could run JavaScript on arbitrary third-party websites then there would be a major XSS problem everywhere.
If you had control over the destination page then you could modify it with server-side code or JS embedded in the destination page contingent on data passed from the previous page (e.g. via the URL's query string).

Vimeo videos not showing up in ShadowBox

I'm at a loss for why my Vimeo videos aren't showing up in a Shadowbox.
I think I have gotten to the simplest point I know how to do, which is to copy and paste the example straight from the github page and then change the shadowbox paths to the correct places on my server (for the .js and .css files).
When I click on the link to the video, I expect the video to display in a shadowbox.
Instead, the page just goes dark (so I know shadowbox is TRYING to do something), but no video, or box appears on the screen.
I added a simple image link to the example page just to test that a simple image will work. It does.
My example code is from: https://github.com/mjijackson/shadowbox/blob/master/examples/vimeo.html
The code is supposed to work like the Vimeo link towards the bottom here:
http://www.shadowbox-js.com/index.html
My actual working page can be found at:
http://zanezmiller.com/hidden/video-test.html
Here is the complete code to the sample page I am attempting to get to work:
(Thanks in advance for any help)
<html>
<head>
<link rel="stylesheet" type="text/css" href="/shadowbox/style.css">
<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({}, function() {
Shadowbox.setup('a[title="Egypt/Lebanon Montage"]', {
height: 360,
width: 640,
flashVars: {
clip_id: "7058755",
autoplay: "1"
}
});
Shadowbox.setup('a[title="Shows Images Work"]', {
height: 360,
width: 640
});
});
</script>
</head>
<body>
<p>This example demonstrates how to display a Vimeo video in Shadowbox.</p>
<p>Click Here</p>
<p id="foot">This file is part of Shadowbox.js.</p>
<p><a title="Shows Images Work" href="http://upload.wikimedia.org/wikipedia/en/thumb/d/dd/G2Cloud_eso1151a.jpeg/200px-G2Cloud_eso1151a.jpeg">This shows images work</a></p>
</body>
</html>
Glad it worked, I'll re-word the comment so random visitors would find it helpful as well. :)
Make sure that you build the shadowbox library with the appropriate options otherwise the specific shadowbox mode you want to use works. See: http://shadowbox-js.com/download.html

How to add a base url to generated elements?

I have a page where I want to display content from a website inside my app. I have a parser which in this case grab the element from their site and into mine. But I have this problems, the links serverside are like campaign.aspx?wfege, when a users clicks it, I want to add a http://example.com/ before so the link will result in looking like http://example.com/campaign.aspx?wfege. It this possible in javascript? If so, how? Please look at my fiddle, it's fully working and is an exact copy of my site.
Fiddle: http://jsfiddle.net/4vdck/
Cheers
This can be done in your HTML.
You need to add the base tag with the appropriate href, like this
<html>
<head>
<base href="http://example.com/" target="_blank">
....
....
</head>
<body>
ClickHere <!-- Because of the base tag this href will lead you to http://example.com/campaign.aspx?wfege -->
....
</body>
</html>

Facebook Like Button Dislikes My Code

I've been trying to implement a Facebook Like button on my blog like this:
$("#fblike").append(" <iframe src='http://www.facebook.com/plugins/like.php?app_id=217624258276389&" + window.location.href + "&send=false&layout=box_count&width=50&show_faces=false&action=like&colorscheme=light&font&height=60' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:50px; height:60px;' allowTransparency='true'></iframe>");
And adding this to the <head> of my HTML source file:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
The problem is that when I try to test the Like button it shows 1 instead of 0 and a second later goes back to 0. Nothing changed at my Facebook profile neither. What's wrong and how to correct this?
PS: I'm running this on a localhost server, in my case http://nathan-camposs-macbook-pro.local/~Nathan
I think the events go something like:
You click the button.
Javascript sends the like request to FB.
Facebook tries to access your page ("localhost").
It can't access it so the request is denied.
UPDATE:-
I noticed that your src attribute starts: 'http://www.facebook.com/plugins/like.php?app_id=217624258276389&" + window.location.href + "&
i think it should be: 'http://www.facebook.com/plugins/like.php?app_id=217624258276389&href=" + window.location.href + "&
notice the href=
I've had problems testing the like on sites using temp urls - Facebook doesn't like it when the associated app_id value is not related to the url of the page you're trying to like. But I could be wrong. If you temporarily expand the width to something beyond 50 (like 300-350), there should be an "error" link that pops up that will give you some more valuable information...
If you use fbml then you will not need the application ID. Using fbml you can configure several things. I think you already have a look at-
http://developers.facebook.com/docs/reference/plugins/like/
You can try the following code
<head>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</head>
Then in the body
<div id="fb-root"></div>
<fb:like href="http://yoururl" send="true" width="450" show_faces="true" font="">
</fb:like>

What function to use to show 2 images when you pass your mouse over it?

I'm trying to make my header looks like this: http://wareztuga.ws/index.php and i was wondering how they managed to do that when we pass over the home bottum it flashes.
I know we need to have two images for that result but i need the funcion.
There are many approaches to implementing an image rollover. Here's a very basic approach:
<html>
<head>
<title>rollover demo</title>
<script type="text/javascript">
function swap(element, image) {
element.src = image;
}
</script>
</head>
<body>
<img src="home_normal.png" onmouseover="swap(this, 'home_rollover.png');" onmouseout="swap(this, 'home_normal.png');"/>
<img src="about_normal.png" onmouseover="swap(this, 'about_rollover.png');" onmouseout="swap(this, 'about_normal.png');"/>
</body>
</html>
A more preferable method would be to use jQuery or some other library that keeps the HTML free of JavaScript code. You'll find many, many different ways to do it if you Google "javascript image rollover" or "jquery image rollover".
this is not related to PHP. you just change the image-src ... there are many code-examples for that out there. here is one.

Categories

Resources