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
Related
I find myself having to interact with a web page that hides state in various places so that one cannot easily share it as a URL, for example this page which allows users to look up information from city zoning applications:
https://aca.cityofberkeley.info/community/Default.aspx
You can interact with the page all you want, but the URL in the location bar will remain the same as the above.
Currently, city staff provide users with instructions like "Load this URL, click on the 'Zoning' tab, enter DRCP2020-0010 under the 'Permit Number' field, click 'Search', then when the records come up, click 'Record Info' and then select 'Attachments' from the dropdown menu, then click on the PDF document that says '2020-10-21_DRCP_APP_PCKT_2801 Adeline.pdf'". I would like to be able to replace these instructions with a URL.
Another example is the website where video from city council meetings is archived:
http://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa
It would be nice to be able to produce a link which brings up one of the meeting videos, and seeks to a certain timestamp like 53:40, so that I can refer to something specific that was said at a meeting.
Looking at the pages that are loaded when I follow the instructions in each case, I can see that there are some POST forms, cookies, hidden input fields, and so on.
Is there some kind of tool that I can use to create "deep links" to pages like these, that were generated using non-URL hidden state, which will allow me to quickly share what I'm looking at with another user?
What I'm seeking is similar to the frmget "bookmarklet", which changes the forms on a page to use GET instead of POST. Sometimes this succeeds in producing a URL which captures form submission query parameters. However, it doesn't work for these applications, for whatever reason.
This question is possibly related to the idea of capturing a web page's DOM state using "browser screenshots" and a script called html2canvas. A possible solution might involve getting and setting cookies in a bookmarklet. Ideally something that produces a normal "https://" URL would be ideal, but if it is impossible to solve the problem except by outputting a "javascript:" URL (bookmarklet) then that is acceptable to me (in spite of the security implications). Thanks.
That seems like not a programming matter. It seems like the site has some security issues as well.
QUESTION A: About Zoning
Here are some links you can use
Direct link to Zoning (I've found it via Advanced search from the site):
https://aca.cityofberkeley.info/CitizenAccess/Cap/CapHome.aspx?module=Planning&TabName=Planning&TabList=Home%7C0%7CBuilding%7C1%7CHousing%7C2%7CPlanning%7C3%7CFire%7C4%7CLicenses%7C5%7CPublicWorks%7C6%7CCurrentTabIndex%7C3
A strange link to the list of files (I've found it via downloading a file, then going to chrome://downloads, then right-clicking the file I've download. The link has been the following):
https://aca.cityofberkeley.info/CitizenAccess/FileUpload/AttachmentsList.aspx?iframeid=ctl00_PlaceHolderMain_attachmentEdit&module=Planning&isInConfirm=False&isdetail=True&isaccountmanager=False&isAdmin=True&isPeopleDocument=&agencyCode=BERKELEY&isForConditionDocument=N
It still doesn't give the direct link to the file, but it it gives the list of attachement of the previously opened Zoning record.
Currently I have no idea what file is triggered by javascipt:__doPostBack('attachmentList$gdvAttachmentList$ctl02$lnkFileName','').
In any case, based on what we have, step one, and then step two seems like minimize the path to download the file. I guess there could be a way to download the file directly, but I currently don't see any easy way. Maybe someone else could figure it out.
QUESTION B: About video
I've used an embed link that shows all the attributes that can be used.
There is a pretty strange but working way to give the exact timestamp. Change starttime from the link below:
https://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa&starttime=0&stoptime=undefined&autostart=1
So replacing 0 for 3600 will rewind the video forward by one hour (3600 seconds):
https://berkeley.granicus.com/MediaPlayer.php?publish_id=cbebb4e6-5b83-11eb-920e-0050569183fa&starttime=3600&stoptime=undefined&autostart=1
The problem here is that ... you cannot rewind back manually that particular hour (it just gets kind cropped out). But it works to show the exact episode.
That's a pretty strange site.
Firstly, I didn't know how to give a short description of the problem in the title, let me explain it here.
I'm creating social site, with all common features like/comments etc. Imagine Twitter/Instagram. I do have main/home page where all posts are displayed. Every post has a like button, so when it is clicked it triggers a AJAX function to send request to Django server to update the database with new like. This JS function also changes the style of the button, so user can know that he liked it. So far so good. Now when he decides that he want to comment this post, he clicks it and is redirected to the new page - the detail page. Here when the page is loading with data from server his like he gave earlier is visible(the div is red). All right, he commented, but know when pressing back button, in order to go to the home page, his like under the post is not more visible without reloading the page. I will demonstrate it using images.
Now I'm using JS function to reload whole page, to get from Django server all new data, but I don't think it is good idea.
<script>
if (!!window.performance && window.performance.navigation.type === 2) {
// value 2 means "The page was accessed by navigating into the history"
console.log('Reloading');
window.location.reload(); // reload whole page
}
</script>
Is there a better way of doing this?
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.
I have a like button on my own website, and I want it to function just like it currently does, with the additional feature that it also makes a post on the person's facebook timeline "John Smith liked this post on www.example.com" where www.example.com is my website. How can this be achieved?
Facebook has documentation for how to put their own like button but I don't want theirs, I just want what I already have to have that one functionality.
First of all, you are not allowed to use custom graphics for the Like Button, you MUST use their own one.
You can use og.likes to create your own Like Button: https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes
A message about the User having liked something shows up automatically on Facebook, you can't "autopost" it additionally. It would require to authorize a User with the publish_actions permission, and it will definitely not get approved by Facebook because the message parameter must be 100% User generated:
Don't prefill captions, comments, messages, or the user message parameter of posts with content a person didn’t create, even if the person can edit or remove the content before sharing.
Source: https://developers.facebook.com/policy/
If you know how to put their button on your page, you should also know how to put your own button on your page. It should be as easy as changing code between
<a href...>
and
</a>
I just googled 2 min and came up with this:
https://developers.facebook.com/docs/plugins/like-button
It says: Use this URL in an iframe or as a link to your plugin.
http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fyoururl.com&width&layout=standard&action=like&show_faces=true&share=true&height=80
Just change yoururl.com to whatever it should like.
I have added a facebook button to my company's site so that people can quickly distribute surveys to users via facebook. It is a pretty simple JavaScript:
function SFace()
{
window.open("http://www.facebook.com/sharer/sharer.php?u=[[:SurveyUrl:]]","Facebook","width=700,height=300,toolbar=0,resizable=0");
}
<img src="http://www.snap-surveys.com/test/face.jpg" onClick="SFace()" />
It works fine, but people want a customized title to appear. So, I added &t=Something, however, when you click the link, it still just shows the long URL. I thought maybe it was because I wasn't using encodeURIComponent. So, I added a variable
var SFace="http://www.facebook.com/sharer/sharer.php?u=[[:SurveyUrl:]]&t=something"; document.write(encodeURIComponent(uri));
And then using that in the function. Same thing, shows the URL and not the title. What exactly am I doing wrong? How can I get it to show a custom title in the shared link?
In case anyone wanted to know my solution:
First needed to get an App ID from Facebook (get the developer's app, create a new app and set the URL as the base/common domain for the site with the button you are adding). Once you have the ID The URL is:
http://www.facebook.com/dialog/feedredirect_uri=THE_URL&app_id=YOUR_APP_ID&link=THE_URL_YOURE_LINKINGTO&name=TITLE_YOU_WANT_TO_DISPLAY
My recommendation is to write the full URL out like normal and create a variable with document.write(encodeURIComponent); like in my example above. This will add the appropriate spacing characters.
If the URL matches the URL listed in the App, you can have a share link with a custom title and can therefore use your own button and not the default Like button that facebook provides.