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.)
Related
I'm new to Django so apologies if this is a really stupid question but I'm trying to get a table to reload database values and when I open the page in a browser it loads ok initially but when it tries to reload nothing appears to happen. When I look in the network section of inspect element I can see repeated 404 page not found errors. I've been searching stack exchange etc. for a few days and I've tried various types of quotes etc. round the url tag but no joy. I'd really appreciate any help anyone can give me on this. I'm using python 3 and django2.
Project level urls.py
project level urls
App Level urls.py
App level urls
App views
App views
HTML
html
Directory Structure
directory structure
Terminal
enter image description here
Thanks in advance
The problem is a simple typo: you have a space between the { and the % in your url tag. This is causing Django to not recognise it as a tag, so the Ajax is using the literal string "{ % url ... }" as the URL which explains the mess you see in the terminal. Remove the space.
(Note, you still might not get the result you expect, since your Ajax function returns a complete HTML page but you are inserting that result inside a div in an existing page; you probably either want to replace the whole page or return a template fragment from your view.)
I am trying to get TinyMCE 4's image_list to work with a URL returning JSON data as specified in the example here.
I have setup a GET endpoint http://demo.com/media on my server which gives back a JSON response consisting of a list of objects with their title and value attributes set, for example:
[{"title":"demo.jpg","value":"http://demo.com/demo.jpg"}]
I have also specified the option image_list: "http://demo.com/media" when initializing the plugin.
However, when I click the image icon in the toolbar, nothing pops up. All I can see in the network tab is an OPTIONS request with status 200, but then nothing. The GET request I was expecting never happens.
What is the correct way of using image_list in TinyMCE 4? Also, does anyone have a working demo example? I couldn't find anything.
It is somewhat hard to say what the issue is without seeing the exact data your URL is returning. I have created a TinyMCE Fiddle to show (in general) how this is supposed to work:
http://fiddle.tinymce.com/pwgaab
There is a JavaScript variable at the top (pretendFetchedData) that simulates what you would grab from the server (an array of JavaScript objects) and that is referenced via image_list.
If you enter your URL (http://demo.com/media) into a browser window what is returned? Are you sure its an array of JavaScript objects?
I have the identical problem. No matter what I do with the detail of the format (e.g. putting quotes round title and value), nothing happens.
I guess the only way (for me anyway) is to insert the list into the script with php before sending the web page.
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 …
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.
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