Here is the custom twitter icon code:
HTML:
<i id="twitter_share" class="fa fa-twitter fs20" style="position: relative; bottom: 4px;"></i>
And Jquery:
$('#twitter_share').click(function (e) {
e.preventDefault();
var loc = "<?= base_url(uri_string()); ?>";
var title = "<?= $video->title; ?>";
window.open('http://twitter.com/share?url=' + loc + '&text=' + title + '&', 'twitterwindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 225) + ', left=' + $(window).width() / 2 + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});
It works fine with the url and title. The problem is , how can I share one image as well?
Thanks a lot for helping.
Update: reference in facebook
in facebook I can share the content like this, can it be done in twitter as well? Thanks.
!
The image comes from your HTML markup, which is scraped by twitter when someone tweets your url.
Twitter refers to the collection of meta info accompanying a tweet as a card, which they need to approve before it will appear on the network.
Have a good read through the Twitter Cards Developer page
Select an appropriate card (summary_large_image is a good one) and include the appropriate twitter meta tags in the head of your HTML
Validate your card on the Cards Validator page
Once your domain has been whitelisted any tweets with your url will also include your card
I searched a little bit for a solution and one Solution is to use Twitter Cards
Maybe this thread will help you Twitter - share button, but with image
Related
I am trying to make a dynamic link so that people using my web app can go to a web page that has additional information. The sites that the link goes to all have the same base url and are differentiated by a unique id at the end of the url (in this case an APN). When the page loads the link looks exactly as it should but when I click it goes to a file that doesn't exist on my desktop.
Here is my code:
var template = new InfoTemplate();
template.setTitle("<b>Parcel</b>");
template.setContent("<hr>Parcel No: <b>${APN}</b>" +
"<hr>Book No: <b>${BOOK}</b>" +
"<hr>Page No: <b>${PAGE}</b>" +
"<hr>Address: <b>${SitusAddress}</b>" +
"<hr>Appraised Value: <b>${Imps}</b> " +
"<hr>Year Built: <b>${YearBuilt}</b>" +
"<hr> View Assessor's Map: <a href=<b>www.acgov.org/MS/prop/index.aspx?PRINT_PARCEL=${APN}</b></a>" +
"<hr><img src='https://maps.googleapis.com/maps/api/streetview?size=270x150&location=${SitusAddress}&fov=120&pitch=-5&sensor=false&key=AIzfaNJyAak4_N4g0NaX-2LBqh2w3irnHZTtKJ2xKA'>");
//add features to map
var featureLayer = new FeatureLayer("https://services5.arcgis.com/ROBnTHSNjoZ2Wm1P/arcgis/rest/services/Parcels/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["APN", "BOOK", "PAGE", "SitusAddress", "Imps", "YearBuilt"],
infoTemplate: template});
This what the site looks like when I click on a feature to bring up it's info including the APN:
If I paste the link text from here it takes me to this site:
But if I click it,it directs me here:
file:///C:/Users/jsobryan/OneDrive/Desktop/%3Cb
And I get the generic file not found message.
Oddly, when I paste it, the end of the b tag is converted to %3b
In the browser I see:
file:///C:/Users/jsobryan/OneDrive/Desktop/<b
You have a tag in the link and the link should start with "http://" to show that it is in a different domain.
I've been having this problem with the Google bookmarks "bookmarklet" button in Chrome for several years now: it does not reliably save URLs to https://www.google.com/bookmarks so I have to double-check every link I save. The form is invoked by clicking the Google Bookmark button in the Chrome bookmarks bar that is a javascript link that opens the form. The button comes from the bottom of the Google bookmarks page itself:
Google Bookmarks page
Google Bookmark button properties
Many links will not save unless I add a suffix such as #1 to the end of the URL, and even that is not a 100% effective workaround. For example, the URL http://jsbeautifier.org/ only saves if I append the #1 in the URL field: http://jsbeautifier.org/#1.
Google Bookmarks Form
I don't know if it's an issue with the javascript, encoding the URL, or an issue on Google's end they have never fixed. Here is the full javascript that comes directly from the button properties. I added the whitespace for readability:
javascript: (function() {
var a = window,
b = document,
c = encodeURIComponent,
d = a.open("https://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + c(b.location) + "&title=" + c(b.title), "bkmk_popup", "left=" + ((a.screenX || a.screenLeft) + 10) + ",top=" + ((a.screenY || a.screenTop) + 10) + ",height=510px,width=550px,resizable=1,alwaysRaised=1");
a.setTimeout(function() {
d.focus()
}, 300)})();
Thanks in advance! :)
I have similar issue of not able to add a lot of https website into Google Bookmarks, especially those from Github or Google's Chrome Webstore. Sometimes if you change the https prefix to http, it will work, but not for all.
I guess the problem lies at the backend side, because it also fails when you try to add the URL in question directly at the Add bookmark page.
Seems Google deserted this product (originated from the time of Google Toolbar) and favors Google Chrome bookmark sync solution.
I am currently working on a project where we are able to share via twitter or facebook.
When I am working with twitter share, I found out twitter intent is the best way.
But I found a problem when I try to share via twitter using mobile device.
Here is my sample code:
var width = 640,
height = 440,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = 'https://twitter.com/intent/tweet?text=Congrats!&hashtags=labmate!',
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
if user already login, nothing is wrong, but when the user is not login twitter will show login form, and if the user misstype either the username or the password, twitter will redirect it to another page.
Here is the problem, after twitter redirect to another page, the url change into
https://mobile.twitter.com/login/error?username_or_email=sample%40mail.com&redirect_after_login=%2Fintent%2Ftweet%3Ftext%3DCongrats.......
when user finally login with the right username and password, twitter will redirect to
https://mobile.twitter.com/intent/tweet?text=Congrats
which is doesn't exist
What can I do? Much appreciate.
I have an iframe pulling in an image and some rows of data (cross domain). The iframe is created with an imbedded javascript file like this:
<script type="text/javascript" src="http://www.domain.com/blah/scriptfile.js?blah_id=001" id="blah_script"></script>
The iframe is being created and its loading the images and data perfectly... so far, so good.
Inside the iframe I want to hide the rows of data and shorten the height of the iframe [-] and when the image is clicked [+] expand the height of the iframe and unhide the rows. I placed the rows in a .
Below is a cut back version of the function being called onclick (and it IS being called). The first line in the function shows how I'm generating the szFrameName and the $folder_id is 001 which is reflected in the szSpanName. When alert() gets called it shows: "blah_iframe_001 blah_cmpnt_001" so the names are correct however the document.getElementById returns null on the blah_iframe but works fine on the blah_cmpnt_
function onclickToggle()
{
var szFrameName = 'blah_iframe_' +"<?php echo $folder_id; ?>";
var szSpanName = "blah_cmpnt_" +"001";
var idFrame = document.getElementById(szFrameName);
var idCmpnt = document.getElementById(szSpanName);
alert(szFrameName +" " +szSpanName);
}
I've tried window.frameElement but that produces an "access denied" error so how do I resize/shorten the iframe?
In hopes that this will help someone else, I created 3 files on github that shows exactly how to do this... cross domain iframe resizing at its finest.
https://github.com/ppetree/iframe_resize.git
Having looked a lots of different solutions to this I ended up writing a simple library to take a account of a number of different use cases. As I needed a solution that supported multiple user generated iFrames on a portal page, supported browser resizes and could cope with the host page JavaScript loading after the iFrame. I also added support for sizing to width and a callback function and allow the override of the body.margin, as you will likely want to have this set to zero.
https://github.com/davidjbradshaw/iframe-resizer
The iFrame code is just a little self-contained JavaScript, so that it's a good guest on other people pages.
The script is then initialised on the host page and has the following available options. More details on what these do on the GitHub page.
iFrameSizer({
log: false,
bodyMargin:null,
sizeHeight:true,
sizeWidth:false,
enablePublicMethods:false,
interval:33,
autoResize: true,
callback:function(messageData){
$('p#callback').html('<b>Frame ID:</b> ' + messageData.iframe.id +
' <b>Height:</b> ' + messageData.height +
' <b>Width:</b> ' + messageData.width +
' <b>Event type:</b> ' + messageData.type);
}
});
If you set enablePublicMethods, it gives you access in the iframe to manually set the iFrame size and even remove the iframe from the host page.
For example, there is a "Link" called go to view at the bottom of the my page, which is redirecting to http://localhost/test.php.
If we use $_SERVER['HTTP_REFERER'] in test.php page it will display the url of the page from which link was clicked.
The problem is this: my URL can be seen at the target page. This needs to be avoided. How can i do this using javascript?
When JavaScript gets to it, it is too late. Plus JavaScript can not do it.
There is no cross-browser solution. For example this code works in Chrome, but not in FF:
classic html link<br/>
js trickery
<script>
function goto(url) {
var frame = document.createElement("iframe");
frame.style.display = "none";
document.body.appendChild(frame);
frame.contentWindow.location.href="javascript:top.location.href = '" + url + "';";
}
</script>
There are third party solutions. You can find any number of them by searching "referer hide" or "refer mask" with you favorite search engine. - Some of them look sady, so try to find a trustworty one.
On the other hand. This is part of Internet culture. Referers can be used for valuable statistics for example. And if your website is in a crawler's index, they can find the link anyway.
Check http://www.referhush.com/
As sentence on this site says :"Webmasters can use this tool to prevent their site from appearing in the server logs of referred pages as referrer."