Masking a url with a url shortener - url-rewriting

I need to mask number of URLs with a short URL link that does not reveal location of the web page in the address bar.
Example:
mywebsite.com/content-123
Masked URL:
surl.us/ae12sw
Clarification: I am not looking for redirects like traditional URL shorteners (bit.ly) that would redirect user to long URL. I need the short URL to remain in the address bar masking the actual URL. But the page would display the content from original website.

Not sure if this will help but maybe try adding something like this to the JavaScript of each page
history.pushState("mywebsite.com/content-123", "Example Site", "surl.us/ae12sw");

Related

Why Joomla shows contents with any URL?

I found a bug in my Joomla 3.6.4 site when I searched in google for test purpose.
For example I have a content with ID 34 and alias myalias
Now Unexpectedly all of below URLs load my content:
http://example.com/test-test-test/34-myalias
http://example.com/mytest/34-myalias
http://example.com/hellowwwwwwwwwwwww/34-myalias
http://example.com/aything/34-myalias
and so on.
This is not TRUE at all!! The content must be loaded just in my predefined menu item. For example I assign a new Menu Item in Menu Manager like definedmenu witch shows content 34. So below URL should works only:
http://example.com/definedmenu/34-myalias
What is the problem. It's bad for my website SEO...
Thanks.
http://example.com/index.php?option=com_content&view=article&id=34&name=ram&age=30
here
http://example.com/index.php is a base url
and
option=com_content&view=article&id=34&name=ram&age=30
these are input variables
when we change url to SEO url
http://example.com/index.php/content/article/34/ram/30
so
http://example.com/test-test-test/34-myalias
http://example.com/mytest/34-myalias
http://example.com/hellowwwwwwwwwwwww/34-myalias
http://example.com/aything/34-myalias
"test-test-test" treat as input variable
"mytest" treat as input variable
but each component have some restriction in component route, in content "id-alias" format so "34-myalias" but here id is important
http://example.com/test-test-test/34-myaliasdfdfdfd it will work
http://example.com/test-test-test/34-sdsdsdmyalias it will work
but
http://example.com/test-test-test/sdsd34-myalias it will not work
This is why many people turn to SEO components like
RSSEO! https://www.rsjoomla.com/joomla-extensions/joomla-seo.html
or
sh404SEF https://weeblr.com/joomla-seo-analytics-security/sh404sef

Pinterest removing the media parameter

I'm having a bad time trying to implement a simple PinIt button.
I followed all the process and it works fine, with an exception: it is removing the Media parameter from the anchor tag.
This means that the PinIt button will open a window showing all the images from that page and the user needs to select one.
The source is ok:
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" />
But, when the page is loaded, the pinit.js is replacing the parameters.
I have tried to find a solution on the web and read something about the URL Enconde, I have tried with UTF-8 and ISO-8859-1 but without success.
The rendered html is:
<span class="PIN_1395089773564_hidden" id="PIN_1395089773564_pin_count_0"><i></i></span>
The media parameter is there, empty.
Thanks for your time,
William Borgo.
I believe the problem is actually in your url parameter. It cannot contain hashtags or other types of parameters. If you delete ?idItem=6920 from the url it will probably work.
I think your URL encoding is incorrect and is confusing Pinterest as to what is part of the Pinterest URL and what is part of one of the parameters - essentially where each parameter begins and ends, and what's a separate parameter for Pinterest vs a continuation of a previous parameter. (This is really the purpose of URL encoding for parameters.)
That is, the overall Pinterest URL should be like:
www.pinterest.com/pin/create/button/?url=[url]&media=[media]&description=[description]
The "&" separating the url, media, and description parameters should NOT be encoded. But each of the parameters themselves (the parts in [brackets]) SHOULD be encoded.
So for instance:
https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.tokstok.com.br%2Fvitrine%2Fproduto.jsf%3FidItem%3D121826&media=http%3A%2F%2Fwww.tokstok.com.br%2Fpnv%2F570%2Fc%2Fconnmlt_czbr1.jpg&description=CONNECTION%20MESA%20PARA%20LAPTOP
...which you could look at like this (with line breaks between parameters and some spacing):
https://www.pinterest.com/pin/create/button/
?url = http%3A%2F%2Fwww.tokstok.com.br%2Fvitrine%2Fproduto.jsf%3FidItem%3D121826
&media = http%3A%2F%2Fwww.tokstok.com.br%2Fpnv%2F570%2Fc%2Fconnmlt_czbr1.jpg
&description = CONNECTION%20MESA%20PARA%20LAPTOP
(Note: the URL you gave seems not to be active any more, so I grabbed another product from the site.)

how to use the facebook like button with ajax driven content and load dynamic content

I have searched the net for a solution but can't seem to get anywhere.
My page (php) is loading with one url (let's say www.mysite.com)
in the page several search options on music (albums) can be done and the tracks are shown. (without refreshing the page). the info comes from a database.
So the url stays the same.
In this search process the facebook meta tags (description, url, title) stay the same also because I never reload the page, I only load content into div's.
I would like to be able to 'like' the album, and backlink to it. So I have created the function to load the album by using the url: www.mysite.com?album=12345
I can show a popup with this url to share this.
So, if you go to this url, the content is automatically loaded based on the url parameter.
And on this spot (where you can see the url with the parameter ?album=12345) I would like to show the 'like' button as well. (I generated the url, so I use this in the code:)
echo '<div style="overflow:visable" class="fb-like" data-href="http://mysite.com/?album='.$albumid.'" data-send="false" data-width="300" data-show-faces="false">?</div>';
it works so far... (after I added the parse code to enable the button)
However the like button takes the default meta tags description and title etc.
Not particular on this album or artist - so it's not unique.
Note: if I remove the meta[property=og:url] from the header I can make the button backlink to the right url with the ?album parameter. Otherwise it would go back to the default root of the site mysite.com (this does make the lint tool give an error on the missing meta)
I have tried to add into this same function something like:
$("meta[property=og\\:url]").attr("content", "http://mysite.com/?album=<?php echo $albumid; ?>");
$("meta[property=og\\:title]").attr("content", "<?php echo $artistname; ?>");
$("meta[property=og\\:description]").attr("content", "<?php echo $albumname; ?>");
I did this so the meta tags will be changed, just to let the like button show the right description etc. However this doesn't work.
I understand that facebook scrapes the page (I used the lint tool etc.) but I will never executes javascript, so the meta tags wil stay as default (when first loading the page)
What can I do to make a unique like button, with it's own description (albumname etc) without making a html page for each one of them (millions of albums in the database...)
I hope it makes sense.
I can't seem to figure this one out, help please :-)
Based on the comments below I used the following solution:
you should create the right fb meta tags when the url (with the params ?alb_id=12345) is opened.
That's enough for the like button to do its job.
Your logic is fine, up to the point where you're setting the meta tags using jquery.
They should be set using PHP. As you can imagine the scraper won't execute the jquery, but if it's fed the already PHP-customized meta tags it will use them (as provided).
Just have the og:tags prepared server-side, depending on the albumId requested, and it should work. It might not work right away, I remember there used to be occasional caching issues with the scraper before.
In short, index.php?album=123 will send a different set of og:tags to the scraper than say index.php?album=321. Just set them up server-side.
<meta property="og:title" content="<?php echo $artistTitle; ?>"/>
What can I do to make a unique like button, with it's own description (albumname etc) without making a html page for each one of them (millions of albums in the database...)
You can’t, because Open Graph objects are URLs (resp. are represented/identified by their URL).
One URL == one Open Graph object.
But where’s the problem in having one URL for each album? Since it all works using parameters, it’s not like you have to create a page for each album URL manually …

How to post a dynamic image to wordpress post?

I want to put a image into a post, but it seems I just cannot get it work.
For example, this one:
http://stockcharts.com/c-sc/sc?s=ACHN&p=D&b=5&g=0&i=t88400486500&r=9913
The output is a PNG file. So in HTML tab, i put,
< img src="http://stockcharts.com/c-sc/sc?s=ACHN&p=D&b=5&g=0&i=t88400486500&r=9913">,(I leave a empty space between the < and image otherwise, stackoverflow won't allow me to put a image tag here) it just won't show up the correct image. The image you will see is "go to stockcharts.com to view this chart", that is because the URL is wrong. If the URL is correct, the image will display fine. Any way to work around?
I was trying to play around with the formatting.php file, but so far, no luck.
(It is quite strange though, if you put the URL into your IE URL bar, and press enter, it shows up fine with a chart.)
Thanks.
Your URL is a web page, NOT an image. When you try to insert the link as an image, the html IMG tag is used to specify the FILE NAME to be inserted. The file can be on a different url but it should not refer to just another uri.
to get around it, you have 4 options:
Specify the image file name directly and not the uri with the img tag.
Use iframe and put the uri
use frame (I'd not go for this)
Use Ajax and fill it in a DIV tag - most effective in my opinion.

Ajax - How to change URL by content

I'll explain:
I have a picture gallery, the first page is display.php.
Users can flip through pictures using arrows, when you click an arrow it sends an Ajax request to retrieve the next picture from the db. Now I want the URL to change according to the picture displayed.
So if the first picture is:
www.mydomain.com/display.php?picture=Paris at night
I'll flip to the next one and the URL would be
www.mydomain.com/display.php?picture=The Big Ben
How do I do this?
The trick here are uri's with an anchor fragment.
The part before '#' points to a resource on the internet, and after normally designates to a anchor on the page.
The browser does not refresh if the resource is the same but moves to the anchors position when present.
This way you can keep the convenience of browser history from a usability point of view while replacing certain parts on the page with ajax for a fast and responsive user interface.
Using a plugin like jQuery history (as suggested by others) is really easy: you decorate certain elements with a rel attribute by which the plugin takes care of the rest.
Also kinda related to this topic is something called 'hijax', and it's something I really like.
This means generating html just like you would in the old days before ajax. Then you hijack certain behavior like links and request the content with ajax, only replacing the necessary parts. This in combination with the above technique allows really SEO friendly and accessible webpages.
You can use the jQuery history plugin for example.
changing the search of the url will load the changed url.
See also: stackoverflow, javascript changing the get parameter without redirecting
Do you really want to use AJAX here?
A traditional web request would work like this...
User navigates to display.php
User clicks "next" and location is updated to "display.php?picture=Big-Ben"
Big Ben is shown to user, along with a link to "display.php?picture=Parliment"
User clicks "next" and location is updated to "display.php?picture=Parliment"
And so on.
With AJAX, you essentially replace the GET with a "behind the scenes" GET, that just replaces a portion of your page. You would do this to make things faster... for example...
User navigates to display.php
User clicks "next" and the next image location is obtained using an AJAX request
The image (and image description) is changed to the next image
What you are suggesting is that you retrieve the "next url" using AJAX and then also perform a GET on the whole page. You would be much better off sending the "next" image when you send each page and not using AJAX at all.
this best describes everything i think: http://ajaxpatterns.org/Unique_URLs

Resources