I've got functionality on my website to share to twitter. It's just a simple Twitter Intent with some custom text. I'd now like to share an image with this text, not a link to the image, but the image itself like how they're shown in Twitter Cards. I'm at a loss of how to achieve this though.
I've got a web app that changes the data shown based on filters that the user engages. When they click the "share" button, I use PHP GD to generate an image using the current data shown. This image is saved on the server and the url is passed back to the javascript via ajax. Now I would like to open a "twitter share" dialog with my pre-filled text and this image. I have discovered that this is not possible with twitter intents because they don't allow images, only image urls (because actual images shown in tweets are pic.twitter.com images).
So I'm looking at Cards but it seems as though Cards are static. I was wondering if it's possible to make the card metadata dynamic by having a php file which has a hash (e.g. www.example.com/tweet.php?esd87fsduh) that is used to dynamically populate the twitter card meta tags? Or would this not work because it takes a long time for twitters bots to crawl the website again?
I basically want the simple functionality that the user clicks "tweet" and they are presented with the Twitter dialog showing dynamic text and the image based on the data filters they'd applied. Is this possible?
Thank you for your time.
Related
I'm bulding a website that allows users to upload a picture and then get the EXIF info shown in a user-friendly way.
I also want to make available an option for users to be able to share their picture online.
At the moment I already have the JavaScript for the image preview fully working, I select an Image on a Form and it appears on the website...
I also have the upload part of the code working as well (PHP). The image gets uploaded to a folder and the name and path of the respective image get uploaded to the MySQL database.
The thing is... I want the process to happen in this way:
User selects the picture - WORKING
The picture appears on display as a preview - WORKING
User presses the upload button (if he wishes to) - WORKING
The image gets uploaded to the defined folder and the name and path to the DB - WORKING
Website stays on the same page with the image preview still there... - TO BE DONE
A new text-area appears on the website with the image path inside (gotten from the database) so the user can share the image - TO BE DONE
----------------//-------------------
I've read some articles and topics on this and supposedly it needs to be done using JQuery in order to work in the way I defined above...
Could you guys clarify if that's true?
---------------//---------------
UPDATE
The solution #Dhanushka sasanka presented worked! I can now upload the picture to the folder and the info to the database and it stays on the page without refreshing!!
I did this You must use JqueryForm Plugin to do this because In the Form that your "upload" button it must be type="submit" therefore current page will be reload after pressing that "upload" button so you must use this plugin JQuery Form Plugin
Go through this one.from this you can uplaod your image without reloading page.
Sending data to server in background without refresh/reload/change the current page can be done with javascript AJAX Request.
If you want to pass data to server and stay on the same page, Then Yes you need to use AJAX in Javascript.
But using Jquery is much easy to implement Ajax request and callbacks, So go with jQuery.
I have 2 text fields, one for description, another for a link to be shared to Facebook (manually after review).
I want to show the user what their combination would look like, when I share it to Facebook.
I can simulate the post textbox as it is on Facebook (link below), but 1) when they change it, it will be out of date, 2) the URL will not be processed and shown as on FB.
Is there some easy way to show the user what the data will be rendered like, when I take it and post it on FB page?
Can be done any way (popup, iframe, etc... )
Without the possibility for sharing, for rendering I would support my Page info.
Which means for my user:
Fill in the description and url, when I share it on my page, it will look like this.
I found a similar question, but it did not cover rendering of the links Create a Facebook Post Preview
Does anyone have experiences in the area?
UPDATE:
For better understanding I drew pictures of the flow. On the first picture you can see 2 textboxes for the user. Here he enters description and a link. On the second picture his data, combined with my static data, are rendered just like it would be on Facebook, if I posted it via my page.
Picture 1 - User interface
Picture 2 - Result
I am trying to create a table in bootstrap that can be edited online by users without using a database backend.
Please see a preview of my page at https://preview.c9users.io/tomheaps/whiteboard/index.html?_c9_id=livepreview3&_c9_host=https://ide.c9.io#
You will see that I have managed to insert a dropdown menu which appears if you click on the table cell directly under the 'Diet' column header. Is there any way using jquery that you can click on an item from the menu list to insert a specific image or text into the div from which the dropdown originates (i.e. into the table cell that you clicked on).
Ideally I want the text or image that the user has inserted to remain in that div until it is changed, even if somebody views the page on a different computer - not sure if this is possible in a static webpage without using a database back end.
My javascript skills are non-existent and can't find anything similar after hours of trawling the web so any scripts to enable this would be very gratefully received.
You need a database to show any data which needs to appear in a new computer.
Anything you insert by js in your current DOM document shows just for the current user.
You have to store the data in a remote server in order to allow new users to see its.
When we want to log-out from the google/gmail account, we click on the profile picture displayed at the right most of the Google bar. The scenario with the pop-up is shown in below figure.
What does this functionality called in jQuery, HTML? I think it's not a modal pop-up as it's not appearing on the existing content of a page and background content is non-clickable. Also it can't be called as tool-tip as it's not showing up on mouse hover, we need to click on profile picture to see the log out button. So what does it called?
I'm asking this thing curiously because I need to implement same functionality in my website. That is when user clicks on specific text the pop-up/tool-tip(for now I'm using these words for your understanding only, may be I'm using wrong words). As I don't know the exact word for this functionality I'm not able to find out such jQuery plugin on internet which would behave the same way.
One more thing is that I want to use a form in this pop-up/tool-tip which would be submitted to PHP using AJAX.
Popover!
Example API from a popular CSS/JS toolkit:
http://getbootstrap.com/javascript/#popovers
On Mouse-over i wish to show user information such as User Id, User Name, User Location, User Age etc. All this info would be coming from database. As well, this information would be in a rectangular block that would actually come-up on Mouse-over.
I am aware that JavaScript could be use to show div (in mouse-over) but don't know how to fetch from database?
Plus the application is a Windows Based Asp.net Application. I am not aware whether that could be possible in Windows based as i'm web based developer.
Thanks for all your inputs.
You could use the jQuery qtip plugin that can display dynamic content, see a documentation at
http://craigsworks.com/projects/qtip/docs/tutorials/#dynamic
and a demo at
http://craigsworks.com/projects/qtip/demos/content/loading
The url parameter should point at an aspx page that show the text that is loaded from database.