|
| 1 | + |
| 2 | + |
1 | 3 | # Hashtegny
|
2 | 4 |
|
3 |
| -A plugin that aggregates "hashtags" from different social media networks like twitter, instagram, googleplus. It displays the posts in a unique, attractive, and animated layout. You can use it for personal purpose, during any conference or event, for an Organization, or even at a Store. So, you can engage the audiences anywhere and increase your interaction and impact. |
| 5 | +jQuery Plugin aggregates hashtags from different social media networks. Posts are displayed in a unique, attractive, and animated layout. |
4 | 6 |
|
5 |
| -How to do that? Simply you can display it on your websites, mobile, TV displays, or using projectors on a wall. |
| 7 | +You can use it for personal purpose, during any conference or event, for an organization, or even at a Store. So, you can engage the audiences anywhere and increase your interaction and impact. |
6 | 8 |
|
7 |
| -Unfortunately it doesn't support Facebook since the fact that The public post search was deprecated with Graph API v2.0. |
8 |
| -But I will try instead to add Facebook as soon as i find any way. |
| 9 | +_How to do that?_ Simply you can use it on your website, mobile, TV displays, or using projectors on a wall. |
9 | 10 |
|
10 |
| -Desktop & Mobile Screenshots |
11 |
| - |
| 11 | +### Social Networks Supported |
| 12 | ++ Twitter |
| 13 | ++ Instagram |
| 14 | ++ Google+ |
| 15 | ++ VK |
| 16 | ++ ~~Facebook(Deprecated)~~ |
12 | 17 |
|
13 | 18 | ## Demo
|
14 | 19 |
|
15 |
| -[Click here to watch a Demo](http://omarelgabry.github.io/Hashtegny/). Sorry, There is a problem with Twitter. Since GitHub doesn't deal with PHP. **However** it works well if you take it on your local server or webserver |
| 20 | +Check [Demo](http://omarelgabry.github.io/Hashtegny/) |
16 | 21 |
|
17 |
| -## Features |
| 22 | +**NOTE** Twitter won't work in the previous demo link because Twitter API requires PHP, and GitHub Pages doesn't execute PHP. But, it works well on your local server or webserver. |
18 | 23 |
|
19 |
| -* Aggregates different hashtags from different social media networks. |
20 |
| -* Displays the posts in a unique, attractive, and animated layouts. |
21 |
| -* It automatically update the Time stamp of each post. |
22 |
| -* You can Update the posts without refresh the page, meaning you can get the latest posts and add them to the current posts. |
23 |
| -* Posts are sorted according to the time they were created at. |
24 |
| -* Posts will be displayed in a loop, one after another in animated effects. |
25 |
| -* It Supports Arabic letters. |
26 |
| -* You can restart the plugin without need to refresh the page. |
27 |
| -* You can use it anywhere; conference, event, at a Store. |
28 |
| -* You can use it on your websites, mobile, TV, Using projectors on wall. |
29 |
| -* Build based on latest version of jQuery(CDN) |
30 |
| -* Easy to be maintained and customized. |
31 |
| - |
32 |
| -## Getting started |
| 24 | +## Features |
| 25 | ++ Aggregates hashtags from different social media networks. |
| 26 | ++ Displays the posts in a unique, attractive, and animated layouts. |
| 27 | ++ Works on different screen sizes. |
| 28 | ++ It automatically updates the time stamp of each post. |
| 29 | ++ Posts are sorted according to the time they were created at. |
| 30 | ++ Posts are clickable. |
| 31 | ++ Ready to be used anywhere; conference, event, at a Store. |
| 32 | ++ You can use it on your websites, mobile, TV, Using projectors on wall. |
| 33 | ++ Build based on latest version of jQuery(CDN) |
| 34 | ++ Easy to be maintained and customized. |
| 35 | + |
| 36 | +## Getting Started |
33 | 37 |
|
34 | 38 | Add CSS Files:
|
35 | 39 | ```html
|
36 |
| -<!-- Loading(spinners) Animation --> |
37 |
| -<link rel="stylesheet" href="http://css-spinners.com/css/spinner/three-quarters.css" type="text/css"> |
38 |
| -<!-- Animation for Posts --> |
39 |
| -<link rel="stylesheet" href="_css/animations.min.css" type="text/css" /> |
40 |
| -<!-- Main CSS File --> |
41 |
| -<link rel="stylesheet" href="_css/main.css" type="text/css" /> |
| 40 | + <link rel="stylesheet" href="css/animations.min.css" type="text/css" /> |
| 41 | + <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
| 42 | + <link rel="stylesheet" href="css/main.css" type="text/css" /> |
42 | 43 | ```
|
43 | 44 |
|
44 | 45 | Add JS Files:
|
45 | 46 | ```html
|
46 |
| -<!-- jQuery --> |
47 |
| -<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
48 |
| -<!-- Animation for Posts --> |
49 |
| -<script type="text/javascript" src="_scripts/animations.min.js"></script> |
50 |
| -<script type="text/javascript" src="_scripts/appear.min.js"></script> |
51 |
| -<!-- Main JS --> |
52 |
| -<script type="text/javascript" src="_scripts/main.js"></script> |
| 47 | +<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
| 48 | +<script type="text/javascript" src="js/animations.min.js"></script> |
| 49 | +<script type="text/javascript" src="js/appear.min.js"></script> |
| 50 | +<script type="text/javascript" src="js/hashtegny.js"></script> |
53 | 51 | ```
|
54 | 52 |
|
55 |
| -Add UI to get the hashtag you want to search for: |
| 53 | +Finally, Run the plugin: |
56 | 54 | ```html
|
57 |
| -<div id="userInput" class="userInput"> |
58 |
| - <div class='wrongInput'>Please make sure to use valid characters, don't use '#' and use at least one alphabet letter</div> |
59 |
| - <form autocomplete="on" method="post" > |
60 |
| - <label for="instagram" class="instagramLabel">Instagram:#</label> |
61 |
| - <input type="text" name="instagram" id="instagram" value="aiesec" maxlength="15" /> |
62 |
| - <br /> |
63 |
| - <label for="googleplus" class="googleplusLabel">GooglePlus:#</label> |
64 |
| - <input type="text" name="googleplus" id="googleplus" value="gsamena" maxlength="15"/> |
65 |
| - <br /> |
66 |
| - <label for="twitter" class="twitterLabel">Twitter:#</label> |
67 |
| - <input type="text" name="twitter" id="twitter" value="تويتر" maxlength="15"/> |
68 |
| - <br /> |
69 |
| - <input type="submit" name="submit" id="submit" value="#Hashtegny" title="Press Me!" /> |
70 |
| - </form> |
71 |
| -</div> |
| 55 | +<!-- Inside your <body> tag --> |
| 56 | +<div id="myPlugin"></div> |
72 | 57 | ```
|
73 |
| - |
74 |
| -Finally, Add this line to initialize the Plugin: |
75 |
| -```html |
76 |
| -<div id="Hashtegny" class="Hashtegny"></div> |
| 58 | +```js |
| 59 | +<script> |
| 60 | + $(document).ready(function(){ |
| 61 | + |
| 62 | + // start the plugin & pass your options |
| 63 | + $('#myPlugin').hashtegny({ |
| 64 | + twitter:{ |
| 65 | + enable: true, |
| 66 | + hashtag: "twitter", |
| 67 | + count: 5 // number of posts to be displayed |
| 68 | + }, |
| 69 | + google:{ |
| 70 | + enable: true, |
| 71 | + hashtag: "google", |
| 72 | + count: 5 |
| 73 | + }, |
| 74 | + instagram:{ |
| 75 | + enable: true, |
| 76 | + hashtag: "insta", |
| 77 | + count: 5 |
| 78 | + }, |
| 79 | + vk:{ |
| 80 | + enable: true, |
| 81 | + hashtag: "зима", |
| 82 | + count: 5 |
| 83 | + }, |
| 84 | + textLength: 300, // max length of post content |
| 85 | + animate: 8, // time of animation for each post in seconds |
| 86 | + updateTime: 60, // update post time every 60 second(1 min) |
| 87 | + background: "background.jpg", // background image |
| 88 | + showError: false // show error alert box if any error encountered |
| 89 | + }); |
| 90 | + }); |
| 91 | +</script> |
77 | 92 | ```
|
78 |
| -**IMPORTANT:** When you use the Plugin, make sure that you are on a local host Or on your webserver. |
| 93 | +#### Want to change the image background? |
| 94 | +Add your image in _img_ directory, then assign ```background``` to ```imagefilename.extension```. |
79 | 95 |
|
80 |
| -## Dependencies |
| 96 | +Default is set to ```background.jpg```. |
81 | 97 |
|
82 |
| -* Spinners for loading animation: http://css-spinners.com/#/spinners/ |
83 |
| -* Posts Animation: https://github.com/joemottershaw/animations |
84 |
| -* Twitter API: https://github.com/J7mbo/twitter-api-php |
| 98 | +## Support |
| 99 | +I've written this script in my free time during my studies. This is for free, unpaid. If you find it useful, please support the project by spreading the word. |
85 | 100 |
|
86 |
| -## License |
87 |
| -The Plugin built under MIT license. |
| 101 | +## Contribute <a name="contribute"></a> |
| 102 | + |
| 103 | +Contribute by creating new issues, sending pull requests on Github or you can send an email at: [email protected] |
88 | 104 |
|
89 |
| -## Issues |
90 |
| -If you found any bug or you want to add any feature, Please report it here: https://github.com/omarelgabry/Hashtegny/issues. Or you can email me at: [email protected]. Your feedback will be really appreciated. |
| 105 | +## Dependencies |
| 106 | ++ [Animations](https://github.com/joemottershaw/animations) |
| 107 | ++ [Twitter API](https://github.com/J7mbo/twitter-api-php ) |
| 108 | + |
| 109 | +## License |
| 110 | +Built under [MIT](http://www.opensource.org/licenses/mit-license.php) license. |
0 commit comments