I have a task to make things with social networks.
As far as I have discovered, there are 2 options. One is through your News Feed and the other is through the Sharer. In the diagram below, I show both.
The first uses dialog/feed, and the second uses sharer.php.
There is a difference as to how content is shared. The first shares it how I would like it, the second shows it in a way that I dislike.
I do not like the fact that the second one shares the whole page. I want that share icon for every image in the page and to share that specific icon, but not the whole page. Is it possible to make the share icon to look like the second image, but share content like the first? How should it look in Javascript/HTML?
If you need any code, that I used, just ask.
For the second option to look like the first one - and to use a specific image - you have to use Open Graph tags in the shared URL: http://ogp.me/
The second option is made with the "sharer.php", i guess. It just takes the URL of the site as parameter, the rest of the information is loaded from the Open Graph tags in the page. You can also define more than one share icon btw, so the user can browse through them before sharing.
For example, if you want a specific image to show up, you need this tag:
<meta property="og:image" content="http://mydomain.com/myimage.jpg" />
Btw, you can always test the Open Graph tags in the Facebook debugger:
https://developers.facebook.com/tools/debug
It also refreshes the tags, if they don´t show up correctly in the share window, just put the link into the debugger again.
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.
I am building my google chrome extension with functionality as follows:
Extention will be used only on one specific domain (like http(s)://www.abc.com/*)
Extention will be running(listening) all the time - on any page within the given domain
Upon highlighting(selecting by mouse) an ident of a course, its statistics(grade distribution) will be shown on the same page. The graph will be shown on top of the page content = doesn't matter where exactly, I will adjust that later.
Now, course statistics(graphs) are stored on the same domain, yet different page. It is needed to "go/click through" other two pages - to select the semester and desired course. Then the graph is shown.
Question:
Can I(and how) access these graphs(being on another page yet being on the same domain) and display them on my current page (where I highlighted text)
Notes:
I read through some other questions here like this or this and came to the conclusion it should be possible since it is on the same domain however I could not find any way how to force JS to access content on another webpage.
I have coded the part with selecting the text, capturing selected text and storing it in variable. Now I need a function (set of functions) to access different page, there in HTML find math with my selected text - click/redirect on the/with corresponding link, being redirected on another page, there copy the image and finally display this image on my page.
Ideally, only one tab (where I select ident) will be open. But if its needed new tab with statistics can be open too..
To access the domain described above, you have to be logged in - could be this also a problem?
Although I program unfortunately not in JS, so all this is new to me.
Many thanks to everyone in advance!
I researche it quite a bit, and thus it seems simple, I couldnt find the answer.
So I have a website that has different articles,each with a custom facebook share button. Every time the user wants to share, I activate javascript sdk and it works. However it shares the opengraph tags that are defined in the header. How would I do that dynamically ? I want to share the specific content of the article ? Is opengraph the right way ?
I assume that your use case is something like the main page in a blog,
where you wish to display several articles in the same page,
and have a like button for each one.
However, the way Facebook crawls your page, it looks at the open graph meta tags for this main page only.
You wish for each of the share buttons to be specific to each post instead.
Have a read of the instructions on this page
In your situation, her is what you will need to do:
Set the data-href attribute of the individual page that the share button is for
For the individual pages, set the open graph meta tags appropriately
This way, when facebook queries your page open graph meta tags, it will not do so on the main page, but instead on the pages you have specified.
Another approach, that will give you more fine grained control, would be to use Facebook's Javascript SDK.
The one that you are looking for, in this case, would be the Share Dialog.
Essentially, here you create your own buttons by hand, and trigger the Facebook Share API using Javascript manually too.
I am using this Social Sharing tool called "Sharethis".
I gives you some header J.S. links to add to your HTML header.
Then, you'll need to add some SPAN in your code to add the social buttons, like this:
<span class='st_fblike_hcount' displayText='Facebook Like'></span>
Then, on load, you'll see your buttons to click on and get some social activity feedback.
Look at my page, if you have no idea how it looks like: http://www.seoroger.com/seo_quotes_archive.php
Problem is, I make dynamic pages like: /seo_quotes_archive.php?page=2, page=3, etc.
And this widget considers each of these pages a separate one (which is true somehow), and keeps each page's statistics separately.
I think the right thing to do for this instance, is to have one account for all of these pages and if the user clicks on facebook button on /seo_quotes_archive.php?page=5, for example, it increments the general facebook count.
If you agree, and you know how this is feasible, please help!
Thanks in advance!
PS. This case is the opposite of Multiple Sharethis buttons per page. In Fact, it's looking for a way to have one Sharethis statistics for Multiple pages.
You can add a "st_url" Parameter to specify the shared url. Insert the current url without the page-parameter to share the same url across multiple pages.
<span class='st_fblike_hcount' st_url='http://www.example.com/seo_quotes_archive.php' displayText='Facebook Like'></span>
Source: http://support.sharethis.com/customer/portal/articles/475079-share-properties-and-sharing-custom-information#sthash.EoamLhNZ.dpbs
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.