To let people easily share the patio11bot, we'll add a "Tweet" button to the page. You can easily add a static share button by going to https://publish.twitter.com/ and following the instructions there, but to make a dynamic tweet button is more difficult.

We'll use the same share button, but we'll dynamically add it to the page with javascript, and then we have to tell the Twitter script to reload it as a widget with: twttr.widgets.load()

Insert the script into the header: 

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Add a placeholder in the html:

<div id="tweet-button"></div>

In script, we build dynamic message:

document.getElementById("tweet-button").innerHTML = '<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" data-size="large" data-via="chrisachard" data-text="patio11bot.com just told me:\n\n'+answer.quote+'\n\nWhat will it tell you?">Tweet</a>'

twttr.widgets.load()

[Tools] Add a Dynamic Tweet Button to a Webpage的更多相关文章

  1. Using jQuery to add a dynamic “Back To Top” floating button with smooth scroll

    Ever read a really long blog post or article and then had to scroll all the way up to the top of the ...

  2. Tweet button with a callback – How to?

    原文: http://jaspreetchahal.org/tweet-button-with-a-callback-how-to/ 两种方式:1. 原生的button <a href=&quo ...

  3. ef code first transform,add ef power tools add-in,add tangible t4 editor for enhancement.

    use ef power tools, as to .edmx file,right click at view, choose generate database from model, then ...

  4. Linux Programe/Dynamic Shared Library Entry/Exit Point && Glibc Entry Point/Function

    目录 . 引言 . C/C++运行库 . 静态Glibc && 可执行文件 入口/终止函数 . 动态Glibc && 可执行文件 入口/终止函数 . 静态Glibc & ...

  5. magento产品成功添加到购物车后跳转到不同页面 添加 add to cart 按钮

    1 添加产品到购物车成功后是跳转到购物车页面或不跳转.这个在后台可以设置 system -> configuration -> After Adding a Product Redirec ...

  6. [AngularJS] Accessible Button Events

    Often buttons need to be handled by JavaScript, and if done improperly it can lead to accessibility ...

  7. 在toolbar里动态创建多个button(ext.net)

    private void setOneMenu() { string sql = "select id,name,gids from Config where name<>'高级 ...

  8. Dynamic proxy

    import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflec ...

  9. ASP.NET 动态创建文本框 TextBox (add TextBox to page dynamically)

    下面的函数每执行一次就生成一个TextBox(其实是<input type="Text">)    var i=0;     function changeIt()   ...

随机推荐

  1. 关于在C#中对抽象类的理解

    先说一下自己对类的理解吧.类就是指将一系列具有一些共同特性的事物归纳起来,按照不同的特性分为不同的类.比如在现实世界中人是一类,动物是一类.植物 又是一类.但他们都是生命这一类的派生类.他们都继承了生 ...

  2. 转:LLVM与Clang的概述及关系

    转:http://www.cnblogs.com/saintlas/p/5738739.html      LLVM是构架编译器(compiler)的框架系统,以C++编写而成,用于优化以任意程序语言 ...

  3. Java中面向对象的分拣存储

    Student.java package yzhou.map; /** * 学生类 * * * @author 洋 * */ public class Student { private String ...

  4. Trie树【UVA11362】Phone List

    Description 给定\(n\)个长度不超过\(10\)的数字串,判断是否有两个字符串\(A\)和\(B\),满足\(A\)是\(B\)的前缀,若有,输出NO,若没有,输出YES. 一道\(Tr ...

  5. 洛谷——P2299 Mzc和体委的争夺战

    P2299 Mzc和体委的争夺战 题目背景 mzc与djn第四弹. 题目描述 mzc家很有钱(开玩笑),他家有n个男家丁(做过前三弹的都知道).但如此之多的男家丁吸引来了我们的体委(矮胖小伙),他要来 ...

  6. putty对Linux上传下载文件或文件夹

    putty是一个开源软件,目前为止最新版本为0.70.对于文件或文件夹的上传下载,在Windows下它提供了pscp和psftp两个命令. (1).pscp pscp在命令提示符中使用,只要putty ...

  7. HTTP Slow Attack测试工具SlowHTTPTest

    HTTP Slow Attack测试工具SlowHTTPTest   Slow Attack是HTTP常见的一种拒绝服务攻击方式.它通过消耗服务器的系统资源和连接数,导致Web服务器无法正常工作.常见 ...

  8. 【BZOJ 4570】【SCOI 2016】妖怪

    http://www.lydsy.com/JudgeOnline/problem.php?id=4570 对于每个妖怪的两个值,看成二位平面上的一个点的横纵坐标(x,y). 因为只关心a/b,所以设经 ...

  9. JZYZOJ1442 [noip2013]华容道 bfs 最短路 剪枝

    http://172.20.6.3/Problem_Show.asp?id=1442 想到最短路的简直神了,如果我写我大概只能写一个30分的bfs. 从数据范围可以看出思路是bfs剪枝,但这里的剪枝是 ...

  10. (转)JS中的对象

    1.对象 要有对象, 就先要有创建对象的方法. 在C++/Java等语言, 这个方法就是实例化XXX类的一个实例xxx.而在JavaScript的世界里实际没有类的东西, 当然仍然可以用"类 ...